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

シングルページアプリ向けの Auth0 React 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

はじめに

まず、アプリケーションを 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;

Login

ユーザーをログインさせるには、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>)
});

注 カスタム Router を使用している場合は、ユーザーを保護されたページに戻す処理を行うために、Auth0Provider にカスタムの onRedirectCallback メソッドを指定する必要があります。例については、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;