このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。

また、Capacitorの開発ワークフローを理解しておく必要もあります。

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

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

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

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

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

Callback URLを構成する

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

ログアウトURLを構成する

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

許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

最後に、アプリケーションの［Application Type（アプリケーションタイプ）］が［Native（ネイティブ）］になっていることをアプリケーションの設定で必ず確認してください。

プロジェクトディレクトリで次のコマンドを実行して、Auth0 React SDKをインストールします：

npm install @auth0/auth0-react

SDKは、慣用的にReact Hooksや高階コンポーネント（HOC）を使用して、Auth0をReactアプリケーションに統合しやすくするメソッドや変数を公開しています。

Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします：

npm install @capacitor/browser @capacitor/app

• @capacitor/browser：デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

• @capacitor/app：高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

内部では、Auth0 React SDKはReact Contextを使用して、ユーザーの認証状態を管理します。Auth0をReactアプリに統合する1つの方法として、SDKからインポート可能なAuth0Providerでルートコンポーネントをラップすることができます。

Auth0Providerコンポーネントは以下のプロパティを使用します。

• domain：Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

• clientId：Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

• useRefreshTokens：AndroidまたはiOSでauth0-reactをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

• useRefreshTokensFallback：AndroidまたはiOSでauth0-reactをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

• authorizationParams.redirect_uri：Auth0で認証した後に、ユーザーをリダイレクトするURLです。

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント（iOSではSFSafariViewController、AndroidではChrome Custom Tabs）でURLが開くようにします。

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodeとstateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。

Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。

• アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの［Allowed Logout URLs（許可されているログアウトURL）］の構成に追加します。

• logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。

• CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。

Auth0 React SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられたユーザープロファイルを取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、useAuth0()フックが公開するuserプロパティを介して使用することができます。

SDKの初期化は非同期に行われます。isLoadingとuserプロパティを確認して、ユーザープロファイルを保護する必要があります。isLoadingがfalseになり、userが値を持つと、ユーザープロファイルを利用することができます。