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

このセクションでは、React Native Auth0モジュールをインストールします。

Yarn

yarn add react-native-auth0

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

はじめに、ユーザーがログインする方法を提供する必要があります。Auth0がホストするログインページを使用することをお薦めします。

Androidを構成する

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

android {
defaultConfig {

    // Add the next line

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

}

...

}

iOSを構成する

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

#import <React/RCTLinkingManager.h>


(BOOL)application:(UIApplication *)app openURL:(NSURL *)url
      options:(NSDictionary&lt;UIApplicationOpenURLOptionsKey, id&gt; *)options



{
return [RCTLinkingManager application:app openURL:url options:options];
}

次に、アプリのバンドル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>

この値は、この後の手順で、Callback URLを定義するために使用します。以下の手順で、XCodeを用いて変更できます：

• アプリのルートからターミナルでios/<YOUR PROJECT>.xcodeprojファイルを開くか、xed iosを実行する。

• プロジェクトまたは希望ターゲットの［Build Settings（ビルド設定）］タブを開いて「Bundle Identifier」を含むセクションを見つける。

• 「Bundle Identifier」値を希望のアプリケーションのバンドルID名と置き換える。

詳細情報はReact Nativeドキュメントをご覧ください。

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）］フィールドで確認できます。

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

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

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

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

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