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

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

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

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

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

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）］フィールドでもこの値を確認できます。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。

Auth0アプリケーションとAuth0 React SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

ログインボタンコンポーネントのためにアプリケーションでlogin.jsという名前の新規ファイルを作成し、インタラクティブパネルから右へとコードにコピーします。これにはログインに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログインボタンを含めます。

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKのlogout()メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。

ログアウトボタンコンポーネントのためにアプリケーションでlogout.jsという名前の新規ファイルを作成し、インタラクティブパネルからコードにコピーします。これにはログアウトに必要なロジックが含まれています。それからindex.jsファイルを更新して新しいログアウトボタンを含めます。

ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロファイル画像をプロジェクトに表示できるようになりたいかもしれません。

React用のAuth0 SDKでは、userプロパティを通じてユーザー情報を提供します。インタラクティブパネルでprofile.jsコードを確認し、使用方法の例をチェックします。

userプロパティにはユーザーのアイデンティティに関する機密情報が含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。エラーを防ぐため、常に以下を行ってください：

• Reactがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

• isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。