Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに認証を構成する場所です。

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

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

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

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

Callback URLとログアウトURLを構成する

Auth0はCallback URLとログアウトURLを呼び出して、ユーザーをアプリケーションにリダイレクトで戻します。Auth0は、ユーザーを認証した後にCallback URLを呼び出し、セッションのクッキーを削除した後にログアウトURLを呼び出します。Callback URLとログアウトURLを設定しないと、ユーザーはアプリにログインやログアウトが行えなくなり、アプリケーションにエラーが発生します。

アプリのプラットフォームに合わせて、対応するURLをCallback URLとログアウトURLに追加します。カスタムドメインを使っている場合は、Auth0テナントのドメインではなく、カスタムドメインの値を使用してください。

iOS

BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback

Android

PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback

このセクションでは、React Native Auth0モジュールをインストールする方法について説明します。

Yarn

yarn add react-native-auth0

npm

npm install react-native-auth0 --save

Auth0パッケージはカスタムネイティブコードを実行し、これはビルド時に構成しておく必要があります。これを実現するには、Expo構成プラグインを使用します。

react-native-auth0プラグインがExpo構成に追加されます。

上記の構成を設定するには、ネイティブコードを生成する必要があります。これを行うには、次のコマンドを実行します：

expo prebuild

Expoの構成に存在しない場合には、AndroidパッケージとiOSバンドル識別子の提供が促されます。

? What would you like your Android package name to be? > com.auth0samples # or your desired package name
? What would you like your iOS bundle identifier to be? > com.auth0samples # or your desired bundle identifier

これらの値は、Callback URLとログアウトURLの設定に使用されます。

useAuth0フックはReact Contextに依存して状態を管理します。このコンテキストはAuth0Providerコンポーネントが提供します。

react-native-auth0パッケージからuseAuth0フックとAuth0Providerコンポーネントをインポートします：

import {useAuth0, Auth0Provider} from 'react-native-auth0';

SDKが正しく機能するためには、アプリケーションをAuth0Providerコンポーネントでラップし、次のプロパティを設定しなければなりません：

• domain：Auth0テナントのドメインです。通常、Auth0 Dashboardにあるアプリケーションの設定の［Domain（ドメイン）］フィールドで確認できます。カスタムドメインを使用している場合には、この値をカスタムドメインの値に設定してください。

• clientId：このクイックスタートで前にセットアップした、Auth0アプリケーションのクライアントIDです。これは、Auth0 Dashboardにあるアプリケーションの設定の［Client ID（クライアントID）］フィールドで確認できます。

ユーザーを認証するには、useAuth0フックが提供するauthorizeメソッドを呼び出します。これは、認証のためにユーザーをAuth0のユニバーサルログインページへリダイレクトし、アプリへ戻します。

ユーザーのログインが成功したことを確認するには、フックの提供するuserプロパティがnullでないことを確認してください。

ユーザーをログアウトさせるには、clearSessionを呼び出して、ユーザーをAuth0のログアウトエンドポイントにリダイレクトします。そうすると、ユーザーのセッションが認可サーバーから削除され、ユーザーがアプリケーションからログアウトされます。

useAuth0フックは、認証済みユーザーの情報を含むuserオブジェクトを公開します。これを使用すれば、認証済みユーザーについてデコードされたユーザープロファイル情報に、IDトークンからアクセスできます。

ユーザーが認証されていない場合、このプロパティはnullになります。