Capacitor を使用した Ionic React アプリケーションにログインを追加する

AI を使って Auth0 を組み込む

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

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

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

Add Auth0 authentication to my Ionic React app

AI アシスタントが、Auth0アプリケーションの作成、資格情報の取得、Auth0 React SDK と Capacitor プラグインのインストール、ディープリンクの設定、さらにネイティブブラウザー連携によるログイン/ログアウトフローの実装まで自動で行います。詳しくは、Auth0 agent skills をご覧ください。

はじめに

このクイックスタートでは、Capacitor を使用する Ionic React アプリケーションに Auth0認証を追加する方法を紹介します。Auth0 React SDK と Capacitor のネイティブブラウザー連携を使って、ログイン、ログアウト、ユーザープロファイル機能を備えたモバイル対応アプリを構築します。

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

Capacitor を使って新しい Ionic React アプリを作成する

npx ionic start auth0-ionic-react tabs --type=react --capacitor

プロジェクトを開く

cd auth0-ionic-react

@ionic/cli パッケージ (非推奨の ionic パッケージではなく) を使用していることを確認してください。プロジェクトの作成時に --npm-client に関するエラーが表示される場合は、CLI を更新してください。

npm uninstall -g ionic
npm i -g @ionic/cli

すでに Ionic React アプリがある場合は、Capacitor が有効になっていることを確認してください。ionic integrations enable capacitor を実行し、続けて npx cap init を実行すると追加できます。

Auth0 React SDK と Capacitor プラグインのインストール

Ionic のスターターテンプレートでは react@19.0.0 が作成されることがありますが、これは Auth0 React SDK と互換性がありません。まず、サポートされている React バージョンを使用していることを確認してください。

npm install react@^19.0.1 react-dom@^19.0.1

次に、Auth0 SDK と Capacitor プラグインをインストールします。

npm install @auth0/auth0-react @capacitor/browser @capacitor/app && npx cap sync

@auth0/auth0-react: Auth0認証向けの React フックとコンポーネントを提供します
@capacitor/browser: デバイスのシステムブラウザーでログインページを開きます (iOS では SFSafariViewController、Android では Chrome Custom Tabs)
@capacitor/app: Auth0 がアプリにリダイレクトして戻る際のディープリンクのコールバックを処理します

iOS の Capacitor Browser プラグインは SFSafariViewController を使用しますが、iOS 11 以降ではデバイス上の Safari と Cookie を共有しません。つまり、それらのデバイスでは SSO は動作しません。SSO が必要な場合は、ASWebAuthenticationSession を使用する互換性のあるプラグインを使用してください。

Auth0 Appを設定する

次に、Auth0 テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。Auth0アプリを設定する方法は3つあります。Quick Setupツールを使用する (推奨) 、CLIコマンドを実行する、またはAuth0 Dashboardから手動で設定する方法です。

このQuickstartでは、YOUR_PACKAGE_ID はアプリケーションのパッケージ ID を指します。これは capacitor.config.ts ファイル内の appId フィールドです (例: io.ionic.starter) 。詳しくは、Capacitor の Config schema をご覧ください。

クイック設定（推奨）
CLI
Auth0 Dashboard

Auth0 App を作成し、適切な設定値があらかじめ入力された .env ファイルをコピーします。アプリを作成したら、Auth0 Dashboard で設定を開き、Allowed Callback URLs と Allowed Logout URLs を更新して、YOUR_PACKAGE_ID を実際のパッケージ ID に、YOUR_AUTH0_DOMAIN をご利用の Auth0 ドメインに置き換えます。

YOUR_PACKAGE_ID://YOUR_AUTH0_DOMAIN/capacitor/YOUR_PACKAGE_ID/callback

また、アプリケーションの種類 が Native に、トークンエンドポイント認証方式 が None に設定されていることも確認してください。

Auth0アプリケーションを作成し、.env ファイルを生成するには、プロジェクトのルートディレクトリで次のコマンドを実行します。

# Auth0 CLIをインストールします（未インストールの場合）
brew tap auth0/auth0-cli && brew install auth0

# Auth0アプリを設定し、.envファイルを生成します
auth0 qs setup --app --type native --framework ionic-react --build-tool vite --name "My Ionic React App"

# Auth0 CLIをインストールします（未インストールの場合）
scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
scoop install auth0

# Auth0アプリを設定し、.envファイルを生成します
auth0 qs setup --app --type native --framework ionic-react --build-tool vite --name "My Ionic React App"

このコマンドでは、次の処理が実行されます。

認証済みかどうかを確認し、必要に応じてログインを求めます
Auth0 Native アプリケーションを作成します
VITE_AUTH0_DOMAIN と VITE_AUTH0_CLIENT_ID を含む .env ファイルを生成します

CLI の出力値を使って .env ファイルを作成します。

始める前に、プロジェクトのルートディレクトリに .env ファイルを作成してください

.env

VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID

Auth0 Dashboardに移動します
Applications > Applications > Create Application をクリックします
ポップアップでアプリ名を入力し、アプリの種類として Native を選択して Create をクリックします
アプリケーションの詳細ページで Settings タブに切り替えます
.env ファイル内の YOUR_AUTH0_APP_DOMAIN と YOUR_AUTH0_APP_CLIENT_ID を、Auth0 Dashboard の Domain と Client ID の値に置き換えます
Token Endpoint Authentication Method を None に設定します

最後に、アプリケーションの詳細ページの Settings タブで次の URL を設定します (YOUR_PACKAGE_ID は capacitor.config.ts の appId に置き換えてください) :Allowed Callback URLs:

YOUR_PACKAGE_ID://YOUR_AUTH0_DOMAIN/capacitor/YOUR_PACKAGE_ID/callback

許可済みのログアウト URL:

YOUR_PACKAGE_ID://YOUR_AUTH0_DOMAIN/capacitor/YOUR_PACKAGE_ID/callback

許可されたオリジン:

capacitor://localhost, http://localhost

Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がない場合、ログインプロセスは失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。Allowed Logout URLs は、サインアウト時にシームレスなユーザーエクスペリエンスを実現するうえで不可欠です。一致する URL がない場合、ログアウト後にユーザーはアプリケーションへリダイレクトされず、代わりに汎用的な Auth0 のページが表示されます。Allowed Origins (capacitor://localhost for iOS and http://localhost for Android) は、Native アプリが Auth0 API と通信できるようにするために必要です。

.env ファイルが存在することを確認してください: cat .env (Mac/Linux) または type .env (Windows)

Auth0Providerを設定する

src/main.tsx を開き、App コンポーネントを Auth0Provider でラップします。useRefreshTokens と useRefreshTokensFallback はモバイル向けの設定で、iOS および Android の Ionic アプリでは必要です。

src/main.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

// capacitor.config.ts の appId と一致させてください
const appId = 'io.ionic.starter';

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      useRefreshTokens={true}
      useRefreshTokensFallback={false}
      authorizationParams={{
        redirect_uri: `${appId}://${import.meta.env.VITE_AUTH0_DOMAIN}/capacitor/${appId}/callback`
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

useRefreshTokens: Android と iOS の Ionic では必須です。モバイルブラウザーではサードパーティ Cookie がブロックされるため、SDK は iframe ベースのサイレント認証ではなく、リフレッシュトークンを使用します。
useRefreshTokensFallback: モバイルでは iframe ベースのサイレント認証を利用できないため、SDK がそれを試行しないよう、false に設定する必要があります。
authorizationParams.redirect_uri: OS が Auth0 のコールバックをアプリに戻せるように、パッケージ ID をカスタム URL スキームとして使用します。

アプリケーションを閉じて再度開いたあとも認証を維持するには、cacheLocation を localstorage に設定したくなるかもしれません。ただし、localstorage にトークンを保存するリスクには注意してください。Capacitor では、localstorage は一時的なものとして扱う必要があります。OS によって予期せず消去される可能性があります。ストレージに関する Capacitor のガイダンスを参照してください。Capacitor の Preferences プラグインをトークンの保存に使用することは推奨しません。これは UserDefaults (iOS) と SharedPreferences (Android) を基盤としており、暗号化されていないうえ、クラウドに同期される可能性があるためです。より安全で永続的な保存の仕組みが必要な場合は、SDK でカスタムキャッシュ実装をサポートしています。

ファイルを作成する

touch src/LoginButton.tsx && touch src/LogoutButton.tsx && touch src/Profile.tsx

New-Item -ItemType File -Path src/LoginButton.tsx
New-Item -ItemType File -Path src/LogoutButton.tsx
New-Item -ItemType File -Path src/Profile.tsx

次のコードスニペットを追加してくださいLoginButtonとLogoutButtonのopenUrlコールバックは、Capacitorのブラウザプラグインを使用して、アプリを完全に離れることなく、デバイスのシステムブラウザコンポーネント内でAuth0のログインページとログアウトページを開きます。App コンポーネントは appUrlOpen イベントをリッスンしており、Auth0 がカスタム URL スキームを使用してアプリにリダイレクトする際に発火します。handleRedirectCallback を呼び出して認可コードをトークンに交換し、その後ブラウザを閉じます。

デフォルトでは、SDK の loginWithRedirect メソッドは window.location.href を使用してログインページに移動するため、デバイスの既定のブラウザーアプリケーションが開きます。openUrl が Browser.open を使うように設定すると、認証フローをアプリ内で完結でき、ユーザー体験が向上します。

アプリを起動する

まずはブラウザでテストする

ionic serve

ブラウザーで ionic serve を実行する場合、ブラウザーはカスタム URL スキームを処理できないため、カスタム URL スキームのリダイレクト (io.ionic.starter://...) は機能しません。ブラウザーでテストするには、一時的に src/main.tsx の redirect_uri を http://localhost:8100 に変更し、http://localhost:8100 を Auth0 Dashboard の Allowed Callback URLs と Allowed Logout URLs に追加してください。Native 向けにビルドする前に、この変更を元に戻すことを忘れないでください。

デバイスまたはシミュレーターで実行するには、まず Native プラットフォームを追加します。

npx cap add ios
npx cap add android

次に、ビルド、同期、実行を行います。

ionic build && npx cap sync && npx cap run ios

ionic build && npx cap sync && npx cap run android

実行する前に、npx cap add を使ってネイティブプラットフォームを追加する必要があります。これは各プラットフォームにつき一度だけ行えば済みます。以降、npx cap sync を実行すると、ビルド済みの Web アセットがコピーされ、ネイティブプラグインが更新されます。

チェックポイントこれで、Ionic アプリで Auth0 login が完全に動作するようになっているはずです。デバイス上で実行している場合は、「Log in」をタップするとシステムブラウザーで Auth0 Universal Login ページが開き、認証後、ユーザーのプロファイルが表示された状態でアプリにリダイレクトされます。

高度な使い方

カスタム URL スキームの設定（iOS と Android）

デバイスで Auth0 のコールバックを機能させるには、各プラットフォームでパッケージ ID をカスタム URL スキームとして登録します。iOS — ios/App/App/Info.plist に追加します。

ios/App/App/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>io.ionic.starter</string>
    </array>
  </dict>
</array>

Android — android/app/src/main/AndroidManifest.xml のメイン <activity> 内にインテントフィルターを追加します。

android/app/src/main/AndroidManifest.xml

<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:scheme="io.ionic.starter" />
</intent-filter>

io.ionic.starter は、capacitor.config.ts の実際の appId に置き換えてください。

詳しくは、iOS は Defining a Custom URL Scheme、Android は Create Deep Links to App Content をご覧ください。

Ionic Router でルートを保護する

Auth0 の認証状態を使って、Ionic アプリケーション内の特定のルートを保護できます。

src/App.tsx

import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react';
import { IonReactRouter } from '@ionic/react-router';
import { IonRouterOutlet } from '@ionic/react';
import { Route, Redirect } from 'react-router-dom';
import HomePage from './pages/Home';
import DashboardPage from './pages/Dashboard';

const ProtectedRoute = ({ component, ...args }: any) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <div className="ion-padding">Loading...</div>,
  });
  return <Route {...args} render={() => <Component />} />;
};

const App: React.FC = () => {
  // ... 前の手順のコールバック ハンドラー

  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/home" component={HomePage} />
          <ProtectedRoute exact path="/dashboard" component={DashboardPage} />
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

withAuthenticationRequired HOC は、未認証のユーザーが保護されたルートにアクセスしようとすると、自動的に Auth0 のログインページにリダイレクトします。

保護された API を呼び出す

Auth0Provider を設定して API の audience を含め、getAccessTokenSilently メソッドを使ってバックエンド用のアクセストークンを取得します。

src/main.tsx

<Auth0Provider
  domain={import.meta.env.VITE_AUTH0_DOMAIN}
  clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
  useRefreshTokens={true}
  useRefreshTokensFallback={false}
  authorizationParams={{
    redirect_uri: `${appId}://${import.meta.env.VITE_AUTH0_DOMAIN}/capacitor/${appId}/callback`,
    audience: "YOUR_API_IDENTIFIER"
  }}
>
  <App />
</Auth0Provider>

次に、コンポーネントから認証付きの API 呼び出しを行います。

src/ApiCall.tsx

import { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { IonButton, IonText } from '@ionic/react';

const ApiCall: React.FC = () => {
  const { getAccessTokenSilently } = useAuth0();
  const [result, setResult] = useState<string | null>(null);

  const callApi = async () => {
    try {
      const token = await getAccessTokenSilently();

      const response = await fetch('https://your-api.example.com/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });

      const data = await response.json();
      setResult(JSON.stringify(data, null, 2));
    } catch (error) {
      console.error('API call failed:', error);
    }
  };

  return (
    <div className="ion-padding">
      <IonButton onClick={callApi}>Call Protected API</IonButton>
      {result && (
        <IonText>
          <pre>{result}</pre>
        </IonText>
      )}
    </div>
  );
};

export default ApiCall;

Quickstarts

Auth0 の概要

Auth0 を設定する

アプリケーション

Capacitor を使用した Ionic React アプリケーションにログインを追加する

はじめに

高度な使い方

​はじめに

​高度な使い方

はじめに

高度な使い方