シングルページアプリケーション向け Auth0 React SDK

React シングルページアプリケーション向け Auth0 SDK の説明

Auth0 React SDK (auth0-react.js) は、Auth0 を使用して React アプリに認証と認可を実装するための JavaScript ライブラリです。カスタム React フックやその他の 高階コンポーネント を提供しており、ベストプラクティスに従って React アプリを保護しながら、コード量を減らせます。

Auth0 React SDK は、グラントやプロトコルの詳細、トークンの有効期限と更新、トークンの保存とキャッシュを処理します。内部では、Universal Login と PKCE を使用する認可コードグラントフロー を実装しています。

このライブラリは GitHub で公開 されており、API の詳細 を確認できます。

インストール

プロジェクトで auth0-react.js を使用するには、いくつかの選択肢があります。

• npm から:

  npm install @auth0/auth0-react

• yarn から: yarn add @auth0/auth0-react

はじめに

まず、アプリケーション全体を 1 つの Auth0Provider コンポーネントでラップする必要があります。これにより、アプリケーション内のコンポーネントで React Context を利用できるようになります。

isLoading と error

SDK の初期化が完了するまで待機し、isLoading と error の状態を使ってエラーを処理します。

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function Wrapper({ children }) {
  const {
    isLoading,
    error,
  } = useAuth0();
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }
  return <>{children}</>;
}
export default Wrapper;

ログイン

loginWithRedirect または loginWithPopup を使用して、ユーザーをログインさせます。

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

function LoginButton() {
  const {
    isAuthenticated,
    loginWithRedirect,
  } = useAuth0();

  return !isAuthenticated && (
    <button onClick={loginWithRedirect}>Log in</button>
  );
}

export default LoginButton;

ログアウト

ユーザーをログアウトするには、logout を使用します。Auth0 Dashboard の「Allowed Logout URLs」に returnTo が指定されていることを確認してください。

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

function LogoutButton() {
  const {
    isAuthenticated,
    logout,
  } = useAuth0();

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

export default LogoutButton;

ユーザー

user の値を使用して、ユーザープロフィール情報にアクセスできます。

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

function Profile() {
  const { user } = useAuth0();

  return <div>Hello {user.name}</div>;
}

export default Profile;

クラスコンポーネントで使用する

フックを使用する代わりに、withAuth0 高階コンポーネント を使用して、クラスコンポーネントに auth0 プロパティを追加します。

import React, { Component } from 'react';
import { withAuth0 } from '@auth0/auth0-react';

class Profile extends Component {
  render() {
    const { user } = this.props.auth0;
    return <div>Hello {user.name}</div>;
  }
}

export default withAuth0(Profile);

ルートを保護する

withAuthenticationRequired 高階コンポーネントを使用して、ルートコンポーネントを保護します。未認証の状態でこのルートにアクセスすると、ユーザーはログインページにリダイレクトされ、ログイン後にこのページに戻ります。

import React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';

const PrivateRoute = () => (<div>Private</div>);

export default withAuthenticationRequired(PrivateRoute, {
  // ユーザーがログインページにリダイレクトされるのを待つ間、メッセージを表示します。
  onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});

注 カスタムルーターを使用している場合は、ユーザーを保護されたページに戻す処理を行うために、カスタムの onRedirectCallback メソッドを Auth0Provider に渡す必要があります。例については、react-router、Gatsby、Next.js を参照してください。

API を呼び出す

保護された API を アクセストークン で呼び出すには、Auth0Provider または getAccessTokenSilently で アクセストークン の audience と scope を必ず指定してください。続いて、そのトークンをリクエストの Authorization ヘッダーに渡して、保護された API を呼び出します。

import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const Posts = () => {
  const { getAccessTokenSilently } = useAuth0();
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const token = await getAccessTokenSilently({
          authorizationParams: {
            audience: 'https://api.example.com/', // Value in Identifier field for the API being called.
            scope: 'read:posts', // 呼び出すAPIに存在するスコープ。Auth0 Management APIまたはAuth0 DashboardのAPIのPermissionsビューから作成できます。
          }
        });
        const response = await fetch('https://api.example.com/posts', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setPosts(await response.json());
      } catch (e) {
        console.error(e);
      }
    })();
  }, [getAccessTokenSilently]);

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

  return (
    <ul>
      {posts.map((post, index) => {
        return <li key={index}>{post}</li>;
      })}
    </ul>
  );
};

export default Posts;