auth0-expo

Auth0 Expo 統合

Expo（React Native）アプリケーションに、Expo Config Plugin を使用して react-native-auth0 で認証を追加します。

前提条件

• Expo SDK 53 以上（react-native-auth0 v5.x には Expo 53 以上が必要です）
• React 19 および React Native 0.78.0 以上
• ネイティブアプリケーションとして設定された Auth0 アカウント
• Auth0 の設定がまだの場合は、まず auth0-quickstart スキルを使用してください
• Expo Go には対応していません — カスタム開発クライアントまたは EAS Build が必要です

使用しないケース

用途	推奨スキル
Bare React Native CLI プロジェクト（Expo なし）	auth0-react-native
React Web SPA（Vite/CRA）	auth0-react
Next.js アプリケーション	auth0-nextjs
Vue.js SPA	auth0-vue
Angular SPA	auth0-angular
Express.js バックエンド	auth0-express
ネイティブ Android（Kotlin/Java）	auth0-android
バックエンド API（JWT 検証）	auth0-fastify-api または auth0-express

クイックスタートワークフロー

1. Auth0 を設定する

Auth0 CLI を使用して自動で設定する場合は、完全なスクリプトについてセットアップガイドを参照してください。

手動で設定する場合は、Auth0 Dashboardでネイティブアプリケーションを設定し、ドメインとクライアント ID を控えてください。

2. Expo Dev Client を確認する

エージェントへの指示： Auth0 SDK をインストールする前に、プロジェクトに expo-dev-client がインストールされているか確認してください。プロジェクトの package.json を読み込み、dependencies または devDependencies に expo-dev-client があるか確認します。

• expo-dev-client が見つかった場合： ステップ 3 に進みます。

• expo-dev-client が見つからない場合： 次のメッセージを使用して AskUserQuestion を実行します。

  「react-native-auth0 SDK にはカスタム Expo 開発クライアントが必要です。Expo Go では動作しません。プロジェクトに expo-dev-client がインストールされていません。

  どのように進めますか？

  1. インストールを依頼する — npx expo install expo-dev-client を実行してセットアップを続けます
  2. 自分でセットアップする — このステップをスキップして、Auth0 SDK のインストールに進みます」

  ユーザーがオプション 1 を選んだ場合は、次を実行します。

  npx expo install expo-dev-client
  

  その後、ステップ 3 に進みます。オプション 2 の場合は、そのままステップ 3 に進みます。

3. SDK をインストールする

npx expo install react-native-auth0

4. Expo Config Plugin を設定する

app.json（または app.config.js）に、Auth0 ドメインとカスタムスキームを指定して react-native-auth0 プラグインを追加します。また、bundleIdentifier（iOS）と package（Android）が設定されていることも確認してください。

{
  "expo": {
    "ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
    "android": { "package": "com.yourcompany.yourapp" },
    "plugins": [
      ["react-native-auth0", {
        "domain": "YOUR_AUTH0_DOMAIN",
        "customScheme": "YOUR_CUSTOM_SCHEME"
      }]
    ]
  }
}

customScheme はすべて小文字で、特殊文字を含めないでください（例：auth0sample）。HTTPS コールバック、複数のドメイン、EAS Build、シークレット管理については、セットアップガイドを参照してください。

5. コールバック URL を設定する

Auth0 Dashboard の Allowed Callback URLs と Allowed Logout URLs に追加します。

YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/ios/YOUR_BUNDLE_ID/callback,
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/android/YOUR_PACKAGE/callback

すべての値は小文字で、末尾にスラッシュを付けないでください。HTTPS コールバック URL（App Links / Universal Links）については、セットアップガイドを参照してください。

6. Auth0Provider で認証を追加する

アプリを Auth0Provider でラップし、useAuth0 フックを使用します。

エージェントへの指示： 新しい UI 要素を追加する前に、プロジェクト内でログイン、ログアウト、サインイン、サインアウトボタンに既存のクリックハンドラーがないか検索してください。既存のハンドラーが見つかった場合は、Auth0 のコードをそこに組み込んでください。新しいボタンを作成するのは、既存のハンドラーが見つからない場合に限ります。

import React from 'react';
import { Auth0Provider, useAuth0 } from 'react-native-auth0';
import { View, Button, Text, ActivityIndicator } from 'react-native';

function HomeScreen() {
  const { authorize, clearSession, user, isLoading, error } = useAuth0();

  const login = async () => {
    try {
      await authorize(
        { scope: 'openid profile email' },
        { customScheme: 'YOUR_CUSTOM_SCHEME' }
      );
    } catch (e) {
      console.error('Login error:', e);
    }
  };

  const logout = async () => {
    try {
      await clearSession({ customScheme: 'YOUR_CUSTOM_SCHEME' });
    } catch (e) {
      console.error('Logout error:', e);
    }
  };

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      {user ? (
        <>
          <Text>Welcome, {user.name}!</Text>
          <Text>{user.email}</Text>
          <Button title="Log Out" onPress={logout} />
        </>
      ) : (
        <Button title="Log In" onPress={login} />
      )}
      {error && <Text>{error.message}</Text>}
    </View>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="YOUR_AUTH0_DOMAIN"
      clientId="YOUR_AUTH0_CLIENT_ID"
    >
      <HomeScreen />
    </Auth0Provider>
  );
}

7. ビルドと検証

エージェントへの指示： 統合が完了したら、プロジェクトをビルドしてコンパイルできることを確認してください：

npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android

ビルドに失敗した場合は、エラー出力を分析してください。統合時によく発生するビルドエラーは次のとおりです：

• 「Invariant Violation: Native module cannot be null」：開発ビルドではなく Expo Go を使用しています。npx expo start ではなく、npx expo run:ios または npx expo run:android を実行してください
• プラグインが適用されない：app.json の plugins 配列に react-native-auth0 がありません。プラグインの設定を確認してください
• Pod のインストールに失敗する（iOS）：npx expo prebuild --clean を実行して、ネイティブプロジェクトを再生成してください
• マニフェストのマージに失敗する（Android）：auth0Domain プレースホルダーが競合しています。ドメインを設定するのが設定プラグインのみであることを確認してください

修正するたびにビルドを再実行してください。ビルド修正の試行回数を記録してください。

失敗時の確認： 5～6 回修正を試みてもビルドに失敗する場合は、作業を中断し、AskUserQuestion を使ってユーザーに確認してください： 「何度か修正を試みましたが、ビルドにまだ失敗しています。どのように進めますか？」

• スキルに修正を続けさせる
• 手動で修正する — 残っているエラーを表示する
• ビルド検証をスキップする — ビルドに成功していない状態で先に進む

詳細なドキュメント

• セットアップガイド — 開発クライアントの要件、自動セットアップ、Expo 設定プラグイン、コールバック URL、EAS Build、シークレット管理
• 統合パターン — ログイン／ログアウト、認証情報管理、生体認証、トークンの更新、組織、DPoP、エラー処理
• API リファレンスとテスト — 設定オプション、useAuth0 フック API、テストチェックリスト、よくある問題、セキュリティ

よくある間違い

間違い	修正方法
開発ビルドではなく Expo Go を使用する	react-native-auth0 にはネイティブコードが必要です。npx expo run:ios／npx expo run:android を使用するか、EAS で開発ビルドを作成してください。
authorize／clearSession 呼び出しに customScheme がない	authorize() と clearSession() の第 2 引数として { customScheme: 'your-scheme' } を渡してください。app.json のプラグイン設定の値と一致させる必要があります。
コールバック URL が一致しない	コールバック URL がすべて小文字で、末尾にスラッシュがなく、Auth0 Dashboard と完全に一致していることを確認してください：{customScheme}://{domain}/ios/{bundleId}/callback
アプリの種類が Native に設定されていない	Auth0 アプリケーションの種類は、Dashboard で SPA や Regular Web ではなく、Native にする必要があります。
app.json に bundleIdentifier または package がない	コールバック URL を機能させるには、app.json で expo.ios.bundleIdentifier と expo.android.package の両方を設定する必要があります。
アプリを Auth0Provider でラップしていない	useAuth0() を使用するすべてのコンポーネントは、Auth0Provider の子である必要があります。
Expo < 53 で react-native-auth0 v5.x を使用する	バージョン 5.x には Expo 53 以降が必要です。それ以前の Expo バージョンでは v4.x を使用してください。
実機でテストしていない	生体認証（Face ID、指紋認証）は実機でのみ動作し、シミュレーターでは動作しません。リリース前に、必ず実機で認証フロー全体をテストしてください。

関連スキル

• auth0-quickstart — Auth0 アカウントとアプリケーションをセットアップする
• auth0-react-native — ベア React Native CLI プロジェクト向け
• auth0-mfa — 多要素認証を設定する
• auth0-cli — ターミナルから Auth0 リソースを管理する

参考資料

• Auth0 Expo クイックスタート
• react-native-auth0 GitHub リポジトリ
• react-native-auth0 API ドキュメント
• Expo サンプルアプリ
• EXAMPLES.md