メインコンテンツへスキップ
このクイックスタートは、React Nativeフレームワーク用です。ExpoアプリケーションにAuth0を統合するには、「Expoクイックスタート」参照してください。
1

Auth0を構成する

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

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

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理も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://labs-fundtraining.us.auth0.com/ios/com.auth0samples/callback
  • Android ： com.auth0samples.auth0://labs-fundtraining.us.auth0.com/android/com.auth0samples/callback
2

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

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

​
Yarn

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

​
npm

npm install react-native-auth0 --save

​
追加のiOS手順：モジュールPodをインストールする

SDKの必須最低iOSデプロイメントターゲットは13.0です。プロジェクトの「ios/Podfile」でプラットフォームのターゲットが13.0になっていることを確認してください。
platform :ios '13.0'
CocoaPodsは、React Nativeフレームワークがプロジェクトに自己をインストールするために使うiOSパッケージ管理ツールです。iOSネイティブモジュールがiOSアプリで動作するように、最初にライブラリーPodをインストールします。古いReact Native SDKバージョンの知識がある方には、以前のLinking a Nativeモジュールに似ています。プロセスが簡略化されました：ディレクトリをiosフォルダーに変更してpod installを実行します。
cd ios
pod install
3

Auth0をアプリケーションに統合する

はじめに、ユーザーがログインする方法を提供する必要があります。Auth0がホストするログインページを使用することをお薦めします。
iOSアプリのユニバーサルログイン画面の例

​
Androidを構成する

アプリケーションのディレクトリ（android/app/build.gradleが典型的）でbuild.gradleファイルを開き、以下のマニフェストプレースホルダーを追加します。auth0Domainの値には、上で構成したようにAuth0アプリケーション設定が含まれなければなりません。
android {
defaultConfig {

    // Add the next line

    manifestPlaceholders = [auth0Domain: "{yourDomain}", auth0Scheme: "${applicationId}.auth0"]

}

...

}
ランタイムでは、applicationIdの値がアプリケーションのパッケージ名またはIDで自動的に更新します（例：com.example.app）。この値はbuild.gradleファイルから変更できます。AndroidManifest.xmlファイルの上部でも確認できます。

​
iOSを構成する

ios/<YOUR PROJECT>/AppDelegate.mmファイルで、以下を追加します：
#import <React/RCTLinkingManager.h>

(BOOL)application:(UIApplication *)app openURL:(NSURL *)url
      options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options

{
return [RCTLinkingManager application:app openURL:url options:options];
}
このファイルは、古いアーキテクチャを使ったアプリケーションのios/<YOUR PROJECT>/AppDelegate.mになります。
次に、アプリのバンドルIDを使ってURLSchemeを追加します。iosフォルダーでInfo.plistを開き、CFBundleIdentifierの値を見つけます。
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
この値の下に、CFBundleIdentifierの値をCFBundleURLSchemesの値として使い、URLタイプのエントリーを登録します。
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>None</string>
<key>CFBundleURLName</key>
<string>auth0</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).auth0</string>
</array>
</dict>
</array>
アプリケーションがReact Native CLIで生成された場合、$(PRODUCT_BUNDLE_IDENTIFIER)のデフォルト値はorg.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)と動的に一致します。サンプルアプリの場合、この値はcom.auth0samplesと一致します。
この値は、この後の手順で、Callback URLを定義するために使用します。以下の手順で、XCodeを用いて変更できます：
  • アプリのルートからターミナルでios/<YOUR PROJECT>.xcodeprojファイルを開くか、xed iosを実行する。
  • プロジェクトまたは希望ターゲットの［Build Settings（ビルド設定）］タブを開いて「Bundle Identifier」を含むセクションを見つける。
  • 「Bundle Identifier」値を希望のアプリケーションのバンドルID名と置き換える。
詳細情報はReact Nativeドキュメントをご覧ください。
4

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

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

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

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

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

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

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

​
次のステップ

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