🛡️

IDaasを使う

2022/11/26に公開

Auth0をReactで使ってみた!

こちらが公式のページ
https://auth0.com/jp?utm_source=google&utm_medium=cpc&utm_term=-g-auth0&pm=true&utm_campaign=japan-jp-brand-auth0&utm_source=google&utm_campaign=apac_japan_jpn_all_ciam-all_dg-ao_auth0_search_google_text_kw_utm2&utm_medium=cpc&utm_id=aNK4z0000004IZLGA2&utm_term=auth0-c&gclid=Cj0KCQiAj4ecBhD3ARIsAM4Q_jF8YFa5MvvtvC9z6KA1mlgSYDhtMI3dxttAWWx-rmJGuDEcmYFIHXEaAs18EALw_wcB

Auth0が提供しているIDaasでしたが、現在はOktaという企業に買収されているようです。
簡単にカッコイイログイン画面と多要素認証を導入できるサービスです。

IDassとは何か?

Identity as a Serviceの略で、クラウドで、IDパスワード管理、アクセス制御を管理できるサービス。
わかりやすくいうと、クラウドが提供している認証・認可の機能を提供するサービス。

まずは、会員登録をしてチュートリアルを始めます。英語で分かりにくいですが、翻訳機能を使えばどれを選択して次の手続きを進めればいいのかわかるので、難しくはなかったのですが、以前なぜか新規登録ができないことがあった?

今回作成したサンプルアプリの完成品

https://github.com/sakurakotubaki/Auth0-Tutorial

公式チュートリアルには、.envの設定がなかったのですが、見えたらまずいなと思うdomainやクライアントIDを隠したかったので、環境変数の設定をしました。


忘れないようにスクリーンショットを撮って起きました

新規作成をして、Auth0をReactで使ってみます。マニュアルがあったのでこちらの手順に従えば私でもできました。

左のサイドメニューからApplicationsを選択して、Create Applicationを選択する

Create Applicationのボタンを押す

左から2番目項目を選択してCREATEのボタンを押す

Reactのアイコンを選択すると、ReactアプリでAuth0に必要な設定方法が表示されます。

TabBarでSettingsを選択する

main.jsxで使用するこちらのドメインとクライアントIDをコピーしておく

下の方にURLを設定

Auth0をReactで使う

公式チュートリアルを参考に進めた
今回はViteを使用しているので、create react appとは設定の仕方が違って、
ハマった!
通常のcreate react appだとhttp://localhost:3000で設定できる!

http://は、Viteのhttpを指定する
# こちらを指定する
http://127.0.0.1:5173/

こちらのコマンドでReactプロジェクトを作成する

npm create vite@latest

プロジェクトを作成したら、componentsディレクトリを作成して、認証に必要なコンポーネントを作成する

認証用のコンポーネント

  • ログインボタン
  • ログアウトボタン
  • プロフィール表示コンポーネント

.envファイルを作成して、環境変数を作成する。Viteだと設定の仕方が違うので、注意が必要!

.envは.gitignoreでGitのコミットの対象から外しておく。

.env
VITE_AUTH0_DOMAIN=********.com
VITE_AUTH0_CLIENT_ID=*********SWMAEj

main.jsxにAuth0の設定をしているコードがありこちらで、ドメインとクライアントIDを使用する。

main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Auth0Provider } from "@auth0/auth0-react";
const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const client = import.meta.env.VITE_AUTH0_CLIENT_ID;

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Auth0Provider
    domain={domain}
    clientId={client}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>
  </React.StrictMode>
)

componentsディレクトリに作成した認証に使うボタンコンポーネントは、公式のものをそのまま使ってます。

ログインのコンポーネント

components/LoginButton.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

ログアウトのコンポーネント

components/LogoutButton.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LogoutButton = () => {
  const { logout } = useAuth0();

  return (
    <button onClick={() => logout({ returnTo: window.location.origin })}>
      Log Out
    </button>
  );
};

export default LogoutButton;

プロフィールを表示するコンポーネント

components/Profile.jsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <div>Loading ...</div>;
  }

  return (
    isAuthenticated && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  );
};

export default Profile;

ソースコードを書くのが終わったら、Reactをアプリを起動する。

npm run dev

Sign Upで新規登録をする

ユーザー登録できたらこちらの画面が表示される。
右下のAcceptボタンを押すとログインボタンのページに戻る。

ログイン後の画面

ログイン後の画面

プロフィール画像が表示されるコンポーネントを追加

ログアウト後の画面

最後に

Auth0以前から気になっていて試してみたかったのですが、ついに使ってみました。現代の開発でこのような外部サービスを使ってフロントエンドだけで開発を進めることできるから、すごい時代になったなと思いました😅
Login機能だと、FirebaseやSupabaseでも使える仕組みが提供されているので、Reactで個人開発をするときは、どんどん使っていきたいと思います。

Discussion