メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、ReactアプリケーションにAuth0 React SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。このクイックスタートを使用するには、以下の手順に従います：
Reactでユーザー認証を実装するための詳しい情報については、例を挙げて説明するReact認証ガイドを参照してください。このガイドでは、サインアップボタンを作成する方法、React Routerを使用してルートガードを追加する方法、そして保護されたAPIをReactから呼び出す方法が詳しく説明されています。
1

Auth0を構成する

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

​
アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

​
Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

​
ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

​
Allowed Web Origins（許可されているWebオリジン）を構成する

Allowed Web Origin（許可されているWebオリジン）とは、認証フローへのアクセスを許可されるURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。
2

Auth0 React SDKをインストールする

Reactアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はReact SDK（auth0-react.js）を提供しています。ターミナルで以下のコマンドを実行してAuth0 React SDKをインストールします：
cd <your-project-directory>
npm install @auth0/auth0-react

​
Auth0Providerコンポーネントを構成する

SDKが正しく機能するためには、次のプロパティをAuth0Providerコンポーネントで設定しなければなりません：
  • domain：Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の［Domain（ドメイン）］フィールドで確認できます。カスタムドメインを使用している場合は、その値を代わりに設定してください。
  • clientId：このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの設定の［Client ID（クライアントID）］フィールドで確認できます。
  • authorizationParams.redirect_uri：ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。Auth0 Dashboardにあるアプリケーションの［Settings（設定）］の［Callback URLs（コールバックURL）］フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。
チェックポイント
Auth0Providerコンポーネントが適切に構成されました。アプリケーションを実行して次の点を検証します：
  • SDKが正しく初期化している。
  • アプリケーションがAuth0に関連したエラーを投入していない。
3

アプリケーションにログインを追加する

Auth0アプリケーションとAuth0 React SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。
このガイドではuseAuth0()のカスタムReactフックに焦点を当てています。クラスコンポーネントを使用している場合は、withAuth0()を使用したこちらのサンプルを確認してください。
ログインボタンコンポーネントのためにアプリケーションでlogin.jsという名前の新規ファイルを作成し、インタラクティブパネルから右へとコードにコピーします。これにはログインに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログインボタンを含めます。
チェックポイント
ユーザー名とパスワードを使ってログインやサインアップができるようになりました。ログインボタンをクリックして次の点を検証します：
  • ReactアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。
  • ログインまたはサインアップできる。
  • Auth0が、Auth0Providerを構成するために使ったauthorizationParams.redirect_uriの値を使用し、アプリケーションへリダイレクトする。
4

アプリケーションにログアウトを追加する

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。ログアウトボタンコンポーネントのためにアプリケーションでlogout.jsという名前の新規ファイルを作成し、インタラクティブパネルからコードにコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログアウトボタンを含めます。
チェックポイント
アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します：
  • Reactアプリケーションによって、アプリケーションの設定で［Allowed Logout URLs（許可されているログアウトURL）］の一つに指定したアドレスへリダイレクトされる。
  • アプリケーションにログインしていない。
5

ユーザープロファイル情報を表示する

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロファイル画像をプロジェクトに表示できるようになりたいかもしれません。React用のAuth0 SDKでは、userプロパティを通じてユーザー情報を提供します。インタラクティブパネルでprofile.jsコードを確認し、使用方法の例をチェックします。userプロパティにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、常に以下を行ってください：
  • Reactがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。
  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。
チェックポイント
以下の点を確認します：
  • ログイン後、コンポーネント内のuser.nameやその他のユーザープロパティをすべて正しく表示できる。

​
次のステップ

成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
  • Auth0 Dashboard - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
  • auth0-react SDK - このチュートリアルで使用されているSDKをより詳しく説明します
  • Auth0 Marketplace - Auth0の機能性を拡張できる各種の統合を見つけられます
⌘I