auth0-react-native

Auth0 React Native の統合

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

---

前提条件

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

使用しない場合

• Expo マネージドワークフロー - 設定プラグインを使用する Expo アプリでは auth0-expo スキルを使用してください
• React ウェブアプリケーション - SPA（Vite/CRA）では auth0-react スキルを使用してください
• React Server Components - Next.js アプリケーションでは auth0-nextjs を使用してください
• React Native 以外のアプリ - プラットフォーム固有の 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 only

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 Hook を使用する

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
# or
npx react-native run-android

---

詳細ドキュメント

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

---

よくある間違い

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

---

関連スキル

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

---

クイックリファレンス

コア Hook API：

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

よくあるユースケース：

• ログイン／ログアウト → 上記の手順 5 を参照
• セキュアなトークンストレージ → Auth0Provider により自動的に処理されます
• 生体認証 → パターンガイド
• トークンを使用した API 呼び出し → パターンガイド
• トークンの更新 → getCredentials() により自動的に処理されます

---

参考資料

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