React Native アプリにログイン機能を追加する

このQuickstartはReact Nativeフレームワーク向けです。Auth0をExpoアプリケーションに統合する場合は、Expo Quickstartを参照してください。

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使えば、agent skillsを使って数分で Auth0 認証を自動的に追加できます。インストール:

npx skills add auth0/agent-skills --skill auth0

次に、AI アシスタントに次のように依頼します:

Add Auth0 authentication to my React Native app

AI アシスタントが自動的に Auth0 アプリケーションを作成し、資格情報を取得し、react-native-auth0 をインストールし、ネイティブの依存関係を設定して、認証フローを構成します。agent skills の完全なドキュメント →

はじめに

新しいReact Nativeプロジェクトを作成する

このQuickstartでは、新しいReact Nativeプロジェクトを作成します。ターミナルで：

npx @react-native-community/cli init Auth0ReactNativeSample
cd Auth0ReactNativeSample

次の内容でプロジェクトを設定します。

名前: Auth0ReactNativeSample
パッケージ名: com.auth0.samples.reactnative

これにより、最新の安定版の React Native アプリが作成されます。Auth0 SDK には、React Native 0.78.0 以降と React 19.0.0 以降が必要です。

Auth0 SDKをインストールする

Auth0 React Native SDKをプロジェクトに追加します。

npm install react-native-auth0

iOS では、ネイティブの依存関係をインストールします。

cd ios && pod install && cd ..

SDK は両方のプラットフォームで自動的にリンクされます。pod install ステップでは、必要な iOS ネイティブモジュール (Auth0.swift、JWTDecode、SimpleKeychain) がインストールされます。

Auth0 のアプリケーションを設定する

React Nativeアプリで使用する Auth0アプリケーションを作成して設定します。

Auth0 Dashboardに移動します
アプリケーション > アプリケーション > アプリケーションを作成 をクリックします
ポップアップでアプリの名前 (例: Auth0 React Native Sample) を入力し、アプリの種類として Native を選択して Create をクリックします
アプリケーションの詳細ページで設定タブに切り替えます
Domain と Client ID の値を控えます

Allowed Callback URLs:

org.reactjs.native.example.auth0reactnativesample.auth0://{yourDomain}/ios/org.reactjs.native.example.auth0reactnativesample/callback,
com.auth0reactnativesample.auth0://{yourDomain}/android/com.auth0reactnativesample/callback

許可されたログアウトURL:

org.reactjs.native.example.auth0reactnativesample.auth0://{yourDomain}/ios/org.reactjs.native.example.auth0reactnativesample/callback,
com.auth0reactnativesample.auth0://{yourDomain}/android/com.auth0reactnativesample/callback

{yourDomain} を実際の Auth0ドメイン (例: dev-abc123.us.auth0.com) に置き換えてください。

Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致するURLがない場合、ログインプロセスは失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。Allowed Logout URLs は、サインアウト時にシームレスなユーザーエクスペリエンスを提供するうえで不可欠です。一致するURLがない場合、ログアウト後にユーザーはアプリケーションへリダイレクトされず、代わりに汎用的な Auth0 のページに遷移します。URLスキームには、コールバックが対象のアプリに確実にルーティングされるよう、bundle identifier の後に .auth0 を含めます。この Quickstart では、bundle identifier は org.reactjs.native.example.auth0reactnativesample です。

重要: コールバックURLスキームには、bundle identifier の後に .auth0 を含める必要があります (例: org.reactjs.native.example.auth0reactnativesample.auth0://) 。これは、SDK が認証コールバックを正しく処理するために必要です。

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

iOS と Android の両方で、認証コールバックを処理できるように設定します。Android の設定:android/app/build.gradle を開き、defaultConfig 内にマニフェストプレースホルダーを追加します。

android/app/build.gradle

android {
    defaultConfig {
        applicationId "com.auth0reactnativesample"
        // ... その他の設定
        
        // Auth0 マニフェストのプレースホルダーを追加する
        manifestPlaceholders = [
            auth0Domain: "{yourDomain}",
            auth0Scheme: "${applicationId}.auth0"
        ]
    }
}

{yourDomain} をご利用の Auth0 ドメイン (例: dev-abc123.us.auth0.com) に置き換えてください。iOS の設定:

AppDelegate.mm (Objective-C)
AppDelegate.swift (Swift)

ios/Auth0ReactNativeSample/AppDelegate.mm を開き、URL を処理するメソッドを追加します。

ios/Auth0ReactNativeSample/AppDelegate.mm

#import <React/RCTLinkingManager.h>

// このメソッドを @implementation ブロック内に追加します
- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

ios/Auth0ReactNativeSample/AppDelegate.swift を開き、URL を処理するメソッドを追加します。

ios/Auth0ReactNativeSample/AppDelegate.swift

import React

// このメソッドを AppDelegate クラス内に追加します
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return RCTLinkingManager.application(app, open: url, options: options)
}

ios/Auth0ReactNativeSample/Info.plist を開き、URL スキームを追加します。閉じる </dict> タグの直前に次を追加してください:

ios/Auth0ReactNativeSample/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>

URL スキームには、.auth0 を付加したバンドル識別子を使用します。これにより、ブラウザーで認証が完了すると、コールバックが該当するアプリに正しくルーティングされます。

App Component のセットアップ

選択した実装方法に応じて、メインのアプリコンポーネントを設定します。

Hooksベース（Providerあり）
クラスベース（Providerなし）

App.tsx の内容を置き換え、アプリケーションを Auth0Provider コンポーネントでラップします。

App.tsx

import React from 'react';
import {Auth0Provider} from 'react-native-auth0';
import {SafeAreaView, StyleSheet} from 'react-native';
import MainScreen from './src/MainScreen';

const App = () => {
  return (
    <Auth0Provider
      domain="{yourDomain}"
      clientId="{yourClientId}">
      <SafeAreaView style={styles.container}>
        <MainScreen />
      </SafeAreaView>
    </Auth0Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

{yourDomain} はご利用の Auth0 domain に、{yourClientId} は Auth0 Dashboard に表示される Client ID に置き換えてください。

Auth0Provider は SDK を初期化し、useAuth0 フックを通じてすべての子コンポーネントで認証コンテキストを利用できるようにします。

App.tsx の内容を、クラスベースのコンポーネント用のシンプルなコンテナに置き換えます。

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import MainScreen from './src/MainScreen';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <MainScreen />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

クラスベースのアプローチでは Auth0 クラスのインスタンスを直接使用するため、Auth0Provider は不要です。Auth0 の設定は MainScreen コンポーネントで行います。

Implement Login と Logout

ログインとログアウトを処理する画面コンポーネントを作成します。フックベースのアプローチ (推奨) またはクラスベースのアプローチのいずれかを選択できます。

フックベース（推奨）
クラスベース

useAuth0 フックを使用して、src/MainScreen.tsx を作成します:

src/MainScreen.tsx

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

const MainScreen = () => {
  const {authorize, clearSession, user, isLoading} = useAuth0();

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

  const logout = async () => {
    try {
      await clearSession();
    } catch (e) {
      console.error(e);
    }
  };

  if (isLoading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0066cc" />
        <Text style={styles.loadingText}>Loading...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Auth0 React Native</Text>

      {user ? (
        <View style={styles.profileContainer}>
          {user.picture && (
            <Image source={{uri: user.picture}} style={styles.avatar} />
          )}
          <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
          <Text style={styles.emailText}>{user.email}</Text>
          <View style={styles.buttonContainer}>
            <Button title="Log Out" onPress={logout} color="#dc3545" />
          </View>
        </View>
      ) : (
        <View style={styles.loginContainer}>
          <Text style={styles.subtitle}>
            Tap the button below to log in
          </Text>
          <View style={styles.buttonContainer}>
            <Button title="Log In" onPress={login} color="#0066cc" />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
    textAlign: 'center',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
  profileContainer: {
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  emailText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  loginContainer: {
    alignItems: 'center',
  },
  buttonContainer: {
    width: 200,
    marginTop: 10,
  },
});

export default MainScreen;

Auth0 クラスを直接使用して src/MainScreen.tsx を作成します：

src/MainScreen.tsx

import React, {Component} from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
  ActivityIndicator,
  Image,
} from 'react-native';
import Auth0, {Credentials} from 'react-native-auth0';

const auth0 = new Auth0({
  domain: '{yourDomain}',
  clientId: '{yourClientId}',
});

interface User {
  name?: string;
  email?: string;
  picture?: string;
}

interface MainScreenState {
  user: User | null;
  isLoading: boolean;
}

class MainScreen extends Component<{}, MainScreenState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      user: null,
      isLoading: true,
    };
  }

  async componentDidMount() {
    await this.checkAuthStatus();
  }

  checkAuthStatus = async () => {
    try {
      const hasValidCredentials = await auth0.credentialsManager.hasValidCredentials();
      if (hasValidCredentials) {
        const credentials = await auth0.credentialsManager.getCredentials();
        const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
        this.setState({user: userInfo, isLoading: false});
      } else {
        this.setState({isLoading: false});
      }
    } catch (e) {
      console.error(e);
      this.setState({isLoading: false});
    }
  };

  login = async () => {
    try {
      const credentials: Credentials = await auth0.webAuth.authorize({
        scope: 'openid profile email',
      });
      
      await auth0.credentialsManager.saveCredentials(credentials);
      const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
      this.setState({user: userInfo});
    } catch (e) {
      console.error(e);
    }
  };

  logout = async () => {
    try {
      await auth0.webAuth.clearSession();
      await auth0.credentialsManager.clearCredentials();
      this.setState({user: null});
    } catch (e) {
      console.error(e);
    }
  };

  render() {
    const {user, isLoading} = this.state;

    if (isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0066cc" />
          <Text style={styles.loadingText}>Loading...</Text>
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <Text style={styles.title}>Auth0 React Native</Text>

        {user ? (
          <View style={styles.profileContainer}>
            {user.picture && (
              <Image source={{uri: user.picture}} style={styles.avatar} />
            )}
            <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
            <Text style={styles.emailText}>{user.email}</Text>
            <View style={styles.buttonContainer}>
              <Button title="Log Out" onPress={this.logout} color="#dc3545" />
            </View>
          </View>
        ) : (
          <View style={styles.loginContainer}>
            <Text style={styles.subtitle}>
              Tap the button below to log in
            </Text>
            <View style={styles.buttonContainer}>
              <Button title="Log In" onPress={this.login} color="#0066cc" />
            </View>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
    textAlign: 'center',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
  profileContainer: {
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  emailText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  loginContainer: {
    alignItems: 'center',
  },
  buttonContainer: {
    width: 200,
    marginTop: 10,
  },
});

export default MainScreen;

{yourDomain} をAuth0ドメインに、{yourClientId} をAuth0 DashboardのクライアントIDに置き換えてください。

authorize() メソッド (hooks) または auth0.webAuth.authorize() (class) は、安全なブラウザー (iOS では ASWebAuthenticationSession、Android では Chrome Custom Tabs) で Auth0 の Universal Login を開きます。clearSession() メソッドは、ユーザーをログアウトし、ブラウザーセッションと保存されている資格情報の両方を消去します。

アプリを実行する

React Native アプリケーションをデバイスまたはエミュレーターでビルドして実行します。iOS の場合 (macOS が必要です) :

npx react-native run-ios

Android をお使いの場合:

npx react-native run-android

想定されるフロー:

アプリが起動し、“Log In” ボタンが表示される
Log In をタップ → ブラウザが開いて Auth0 Universal Login が表示される
ログインを完了する (サインアップまたはサインイン)
ブラウザが閉じる → 自動的にアプリに戻る
名前、メールアドレス、アバターが表示されたユーザープロファイルが表示される

iOS Simulator で ASWebAuthenticationSession を使用するには、有効な Apple Developer アカウントが必要です。アカウントなしで Simulator 上でテストする場合は、代わりに実機または Android Emulator を使用してください。

チェックポイントこれで、お使いの端末またはエミュレーターで、Auth0 のログイン機能が完全に動作するようになっているはずです。アプリでは安全なブラウザー認証を使用し、資格情報も自動的に管理されます。

トラブルシューティングと高度な設定

「Callback URL mismatch」エラー

解決策:

正確な URL (.auth0 サフィックスを含む) が、Auth0 Dashboard の Allowed Callback URLs に含まれていることを確認します
iOS と Android の両方の URL が追加されていることを確認します
{yourDomain} が実際の Auth0 ドメインに置き換えられていることを確認します

ログイン後にアプリへ戻らない (iOS)

修正方法:

Info.plist に $(PRODUCT_BUNDLE_IDENTIFIER).auth0 を含む CFBundleURLSchemes エントリがあることを確認します
AppDelegate.mm に URL を処理するメソッドが含まれていることを確認します
URL スキームが bundle identifier と一致していることを確認します

Android のビルドが失敗する

修正方法:

build.gradle に auth0Domain と auth0Scheme の manifest placeholders を追加します
プロジェクトを Gradle ファイルと同期します
ビルドをクリーンします: ./gradlew clean

「PKCE not allowed」エラー

修正方法:

Auth0 Dashboard → アプリケーション → 対象のアプリケーションに移動します
アプリケーションの種類を Native に変更します
変更を保存して、もう一度試します

Pod install が失敗する (iOS)

修正方法:

CocoaPods を更新します: sudo gem install cocoapods
pod リポジトリを更新します: pod install --repo-update
問題が解消しない場合は、Podfile.lock と ios/Pods フォルダーを削除してから、再度 pod install を実行します

User cancelled エラー

ログイン関数内で適切に処理します:

const login = async () => {
  try {
    await authorize({scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // ユーザーがログイン画面を閉じました - 適切に処理します
      console.log('Login cancelled by user');
    } else {
      console.error('Login failed:', e);
    }
  }
};

iOS のアラートダイアログ

iOS では、ユーザーに “App Name” Wants to Use “auth0.com” to Sign In という許可ダイアログが表示されます。これは ASWebAuthenticationSession の想定どおりの動作です。続行するには、ユーザーが Continue をタップする必要があります。この動作をカスタマイズするには、ephemeral session を使用できます (SSO は無効になります) :

await authorize({scope: 'openid profile email'}, {ephemeralSession: true});

アクセストークンの取得

API 呼び出し用のトークンを取得するには、getCredentials() メソッドを使用します:

import {useAuth0} from 'react-native-auth0';

const MyComponent = () => {
  const {getCredentials} = useAuth0();

  const callApi = async () => {
    try {
      const credentials = await getCredentials();
      const response = await fetch('https://your-api.com/endpoint', {
        headers: {
          Authorization: `Bearer ${credentials.accessToken}`,
        },
      });
      // レスポンスを処理します
    } catch (e) {
      console.error('Failed to get credentials', e);
    }
  };
};

リフレッシュトークンを受け取るには、ログイン時に offline_access scope を含めてください: authorize({scope: 'openid profile email offline_access'})。これにより、トークンの自動更新が有効になります。

アプリ起動時に認証状態を確認する

ユーザーがすでにログインしているかどうかを確認するには、hasValidCredentials() を使用します:

import {useAuth0} from 'react-native-auth0';
import {useEffect} from 'react';

const App = () => {
  const {hasValidCredentials, getCredentials} = useAuth0();

  useEffect(() => {
    const checkAuth = async () => {
      const isLoggedIn = await hasValidCredentials();
      if (isLoggedIn) {
        const credentials = await getCredentials();
        // ユーザーは認証済みです。データを読み込みます
      }
    };
    checkAuth();
  }, []);
};

本番デプロイ

本番環境にデプロイする前に

セキュリティを強化するため、HTTPS のコールバックURLを使用してください。

https://{yourDomain}/ios/{bundleId}/callback
https://{yourDomain}/android/{packageName}/callback

Auth0 Dashboard で Android App Links を設定してください。

Settings → Advanced Settings → Device Settings
アプリの SHA-256 フィンガープリントを追加します

iOS Universal Links を設定してください。

Xcode で Associated Domains capability を追加します
Associated Domains に webcredentials:{yourDomain} を追加します

Auth0Provider の localAuthenticationOptions を使用して、機密性の高いアプリでは生体認証を有効にしてくださいAuth0 Dashboard でセキュリティ設定を確認してください。

Advanced Settings で OIDC Conformant を有効にします
Token Expiration を適切に設定します
ブルートフォース対策を設定します
複数のデバイスと OS バージョンでテストします
ネットワーク障害に備えて適切なエラー処理を実装します

Quickstarts

Auth0 の概要

Auth0 を設定する

アプリケーション

React Native アプリにログイン機能を追加する

はじめに

トラブルシューティングと高度な設定

本番環境にデプロイする前に

​はじめに

​トラブルシューティングと高度な設定

​「Callback URL mismatch」エラー

​ログイン後にアプリへ戻らない (iOS)

​Android のビルドが失敗する

​「PKCE not allowed」エラー

​Pod install が失敗する (iOS)

​User cancelled エラー

​iOS のアラートダイアログ

​本番環境にデプロイする前に

はじめに

トラブルシューティングと高度な設定

「Callback URL mismatch」エラー

ログイン後にアプリへ戻らない (iOS)

Android のビルドが失敗する

「PKCE not allowed」エラー

Pod install が失敗する (iOS)

User cancelled エラー

iOS のアラートダイアログ

本番環境にデプロイする前に