メインコンテンツへスキップ
このクイックスタートは、Expoフレームワーク用です。React NativeアプリケーションにAuth0を統合するには、「React Nativeクイックスタート」を参照してください。
このSDKは「Expo Go」アプリと互換性がありません。互換性があるのはカスタム開発クライアントとEASビルドのみです。
1

Auth0を構成する

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
サンプルプロジェクトに沿って進めている場合には、次の値を使用します：
  • iOS：com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback
  • Android：com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback
2

依存関係をインストールする

このセクションでは、React Native Auth0モジュールをインストールする方法について説明します。
React Nativeの追加情報については、公式ドキュメントを参照してください。

​
Yarn

yarn add react-native-auth0
yarnの詳細については、公式ドキュメントを確認してください。

​
npm

npm install react-native-auth0 --save
3

Auth0構成プラグインをセットアップする

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

ネイティブソースコードを生成する

上記の構成を設定するには、ネイティブコードを生成する必要があります。これを行うには、次のコマンドを実行します：expo prebuildExpoの構成に存在しない場合には、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の設定に使用されます。
5

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

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）］** フィールドで確認できます。
チェックポイント
Auth0Providerコンポーネントが構成されました。アプリケーションを実行して次の点を確認します： SDKが正しく初期化している アプリケーションがAuth0に関連したエラーを投入していない
6

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

ユーザーを認証するには、useAuth0フックが提供するauthorizeメソッドを呼び出します。これは、認証のためにユーザーをAuth0のユニバーサルログインページへリダイレクトし、アプリへ戻します。ユーザーのログインが成功したことを確認するには、フックの提供するuserプロパティがnullでないことを確認してください。
チェックポイント
クリックでauthorizeを呼び出すボタンコンポーネントを追加します。ログインページにリダイレクトされてから、アプリケーションに戻されることを確認します。
7

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

ユーザーをログアウトさせるには、clearSessionを呼び出して、ユーザーをAuth0のログアウトエンドポイントにリダイレクトします。そうすると、ユーザーのセッションが認可サーバーから削除され、ユーザーがアプリケーションからログアウトされます。
チェックポイント
clearSessionを呼び出すログアウトボタンを追加して、Auth0のログアウトエンドポイントにリダイレクトされ、再び戻されることを確認してください。アプリケーションにはログインされていないはずです。
8

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

useAuth0フックは、認証済みユーザーの情報を含むuserオブジェクトを公開します。これを使用すれば、認証済みユーザーについてデコードされたユーザープロファイル情報に、IDトークンからアクセスできます。ユーザーが認証されていない場合、このプロパティはnullになります。
チェックポイント
ログインして、結果のuserプロパティを調査します。emailやnameなど、現在のユーザーのプロファイル情報を確認します。

​
次のステップ

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