Auth0 React Native インテグレーション

react-native-auth0 を使用して React Native および Expo モバイルアプリケーションに認証を追加します。

---

前提条件

• React Native または Expo アプリケーション
• Auth0 アカウントと Native タイプで設定されたアプリケーション
• Auth0 をまだ設定していない場合は、まず auth0-quickstart スキルを使用してください

使用しない場合

• Expo 管理ワークフロー - Expo アプリケーション（config プラグイン付き）には auth0-expo スキルを使用
• React ウェブアプリケーション - SPA（Vite/CRA）には auth0-react スキルを使用
• React Server Components - Next.js アプリケーションには auth0-nextjs を使用
• 非 React ネイティブアプリ - プラットフォーム固有の SDK を使用（iOS は Swift、Android は Kotlin）
• バックエンド API - サーバー言語用の JWT 検証ライブラリを使用

---

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

1. SDK をインストール

Expo:

npx expo install react-native-auth0

React Native CLI:

npm install react-native-auth0
npx pod-install  # iOS のみ

2. 環境を設定

Auth0 CLI で自動化セットアップを行う場合、完全なスクリプトについては セットアップガイド を参照してください。

手動セットアップの場合:

.env を作成：

AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id

3. ネイティブプラットフォームを設定

iOS - ios/{YourApp}/Info.plist を更新：

<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>

Android - android/app/src/main/AndroidManifest.xml を更新：

<activity
    android:name="com.auth0.android.provider.RedirectActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="YOUR_AUTH0_DOMAIN"
            android:pathPrefix="/android/${applicationId}/callback"
            android:scheme="${applicationId}" />
    </intent-filter>
</activity>

Expo - app.json を更新：

{
  "expo": {
    "scheme": "your-app-scheme",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

4. Auth0Provider で認証を追加

アプリケーションを Auth0Provider でラップします：

import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';

export default function Root() {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENT_ID}
    >
      <App />
    </Auth0Provider>
  );
}

5. useAuth0 フックを使用

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

export default function App() {
  const { user, authorize, clearSession, isLoading } = useAuth0();

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

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

  if (isLoading) {
    return <ActivityIndicator />;
  }

  return (
    <View>
      {user ? (
        <>
          <Text>Welcome, {user.name}!</Text>
          <Text>{user.email}</Text>
          <Button title="Logout" onPress={logout} />
        </>
      ) : (
        <Button title="Login" onPress={login} />
      )}
    </View>
  );
}

6. 認証をテスト

Expo:

npx expo start

React Native:

npx react-native run-ios
# または
npx react-native run-android

---

詳細ドキュメント

• セットアップガイド - 自動化セットアップ、ネイティブ設定、ディープリンキング
• パターンガイド - セキュアストレージ、バイオメトリック認証、トークンリフレッシュ
• API リファレンス - 完全な SDK API、メソッド、設定オプション

---

よくある間違い

間違い	解決方法
Auth0Provider でアプリケーションをラップするのを忘れた	useAuth0() を使用するすべてのコンポーネントは Auth0Provider の子である必要があります
ディープリンキングの設定を忘れた	iOS Info.plist と Android AndroidManifest.xml に URL スキームを追加します（ステップ 3 を参照）
コールバック URL が一致していない	Auth0 ダッシュボードのコールバック URL がアプリケーションの URL スキーム（例：com.yourapp.auth0://YOUR_DOMAIN/ios/com.yourapp/callback）と一致していることを確認してください
インストール後に iOS ビルドが失敗する	npx pod-install を実行してネイティブ依存関係をリンクします
Auth0 で SPA タイプとしてアプリケーションを作成した	モバイルアプリケーションはネイティブアプリケーションタイプである必要があります
認証エラーを処理していない	authorize/clearSession 呼び出しを try-catch ブロックで囲みます
Android でディープリンクが機能していない	RedirectActivity に android:exported="true" が設定されていることを確認してください

---

関連スキル

• auth0-quickstart - Auth0 の基本設定
• auth0-migration - 別の認証プロバイダーから移行
• auth0-mfa - 多要素認証を追加
• auth0-cli - ターミナルから Auth0 リソースを管理

---

クイックリファレンス

コアフック API:

• useAuth0() - 認証用のメインフック
• authorize() - ログインを開始
• clearSession() - ログアウト
• user - ユーザープロファイルオブジェクト
• getCredentials() - API 呼び出し用のトークンを取得
• isLoading - ローディング状態

一般的なユースケース:

• ログイン/ログアウト → 上記ステップ 5 を参照
• セキュアトークンストレージ → Auth0Provider で自動
• バイオメトリック認証 → パターンガイド
• トークン付き API 呼び出し → パターンガイド
• トークンリフレッシュ → getCredentials() で自動

---

参考資料

• Auth0 React Native SDK ドキュメント
• Auth0 React Native クイックスタート
• SDK GitHub リポジトリ