🐡

React / Auth0 の Tutorial

2023/01/17に公開

React Auth0 Tutorial

React アプリケーションで Auth0 を利用したアプリケーションの構築を行います。

この資料は、公式の React チュートリアルを実施するための参考ドキュメントです。

https://auth0.com/docs/quickstart/spa/react/interactive

Auth0 のセットアップ

まずは、Auth0 側のセットアップを進めていきます。

Auth0 のアカウントをまだ作成していない場合は、 signup の画面からアカウントの作成を行なってください。

https://auth0.com/signup

アカウントの作成が終わったら、ダッシュボードを開きます。
ダッシュボードでは、認証で利用するアプリケーションを作成することができます。

https://manage.auth0.com/dashboard/

ダッシュボードの左メニューから、 Applications -> 「Create Application」のボタンをクリックします。
アプリケーションの名前を入力して、「Single Page Application」 を選択すれば、作成は完了です。

アプリケーションの画面で、Setting のタブを開き、以下の項目にこれから作成するサンプルアプリケーションのURL http://localhost:3000 を入力します。

  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins

最後にページ下部の、「Save Change」ボタンを押すのを忘れずに!

これで Auth0 側のセットアップは完了です。

React アプリケーションの作成

続いて実際にコードを書きながらアプリケーションを作成していきましょう。

React の開発を進めるためには、 Node.js の実行環境が必要です。手元の PC でまだインストールが済んでいない場合は、先に Node.js のインストールを進めてください。

https://nodejs.org/ja/download/

Node.js の実行準備ができたら、npx コマンドを利用して React アプリケーションのテンプレートを作成していきます。
以下のコマンドで、手元に React アプリケーションのサンプルをセットアップしましょう。

$ npx create-react-app my-react-auth0-sampleapp

コードの準備ができたら cd コマンドで階層を移動して npm start でアプリケーションを実行します。

$ cd my-react-auth0-sampleapp
$ npm start

ブラウザでアプリケーション URL http://localshot:3000 にアクセスして React のロゴが表示されたら、サンプルアプリの準備のセットアップは無事完了です。

このプロジェクトに Auth0 を用いた認証機能を追加していくために、コードをエディタで開いておきましょう。

Auth0 との接続

React で Auth0 を利用する場合、Auth0 の提供する SDK を利用するのが便利です。

以下の npm コマンドを実行して、まずは SDK のインストールを行なっておきましょう。

$ npm install @auth0/auth0-react

Auth0 を利用する場合 @auth0/auth0-react の提供する Auth0Provider を利用してアカウントとの接続を行います。

src/index.js を開いて、以下のような形で import 文と Auth0Provider の記述を追加します。

import ...
import { Auth0Provider } from "@auth0/auth0-react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Auth0Provider
      domain="dev-xxxxxxxxxxx.jp.auth0.com"
      clientId="xxxxxxxxxxxxxxx"
      redirectUri={window.location.origin}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

Auth0Provider の domain と clientId の値は、Auth0 のアプリケーション設定で表示されている値を利用しましょう。
アプリケーションの Setting タブを開き、それぞれの値を確認することができます。

Tips : Auth0Provider について

Auth0Provider は 子要素のコンポーネントに Auth0Context を提供します。
アプリケーションの親要素に Auth0Provider を提供することで、それぞれのコンポーネントから 後述する useAuth0 フックを利用した認証操作が可能になります。

https://auth0.github.io/auth0-react/modules.html#Auth0Provider

Login ボタンの追加

続いてアプリケーションにログインボタンを追加していきましょう。

まずは、ログインボタンのコンポーネントとして、src/login.js を作成します。

import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

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

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

export default LoginButton;

作成したコンポーネントを利用するために src/App.js に import 文と、LoginButton の記述を追加しましょう。

App.js
//import ...
import LoginButton from './login';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        // ...
        <a
        // ...
        >
          Learn React
        </a>
        <LoginButton></LoginButton>
      </header>
    </div>
  );
}

export default App;

画面にログインボタンが表示されたら、実際にボタンを押して認証の画面を開いてみましょう。
Auth0 のアカウントと正しく接続されている場合、ログインのフォームが画面に表示されるでしょう。

Auth0 との接続が確認できたら以下のアクションを試してみましょう。

  • Signup できる
  • シークレットモードで開いてログインできる。

ユーザ情報を表示する

続いて、画面にログイン中ユーザのプロフィールを表示してみましょう。

プロフィール表示用のコンポーネントとして、src/profile.js を作成します。

import { useAuth0 } from "@auth0/auth0-react";
import React from "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;

作成したコンポーネントを画面に表示するため、src/App.js に import 文と Profile コンポーネントの追加を行います。

App.js
//import ...
import Profile from './profile';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        // ...
        <a
          //...
        >
          Learn React
        </a>
        <LoginButton></LoginButton>
        <Profile></Profile>
      </header>
    </div>
  );
}
export default App;

画面にログイン中ユーザの情報が正しく表示されたでしょうか?

シークレットモードに切り替えて異なるアカウントでのユーザログインを試しながら、アカウントごとに異なるユーザ情報が表示されることを確認してみましょう。

ログアウト

最後にログアウトの機能を実装しましょう。

ログアウトボタンのコンポーネントとして、src/logout.js を作成します。

logout.js
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

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

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

export default LogoutButton;

作成したコンポーネントを画面に表示するため、src/App.js に import 文と LogoutButton コンポーネントの追加を行います。

logout.js
// ...
import LogoutButton from './logout';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        // ...
        <a
          // ...
        >
          Learn React
        </a>
        <LoginButton></LoginButton>
        <LogoutButton></LogoutButton>
        <Profile></Profile>
      </header>
    </div>
  );
}
export default App;

ログアウトのボタンを押下して、ログイン中のユーザ情報がクリアされるのを確認しましょう。

Auth0 のチュートリアル

Auth0 の公式ドキュメントでは、React 以外にも様々なアプリケーションフレームワーク向けのチュートリアルコンテンツが公開されています。

各種フレームワークごとに、様々な SDK も個別に用意されているため、普段利用しているフレームワークなどがあればぜひトライしてみてください。

https://auth0.com/docs/quickstarts

Discussion

ログインするとコメントできます