Ionic Vue と Capacitor アプリケーションにログインを追加する

このガイドでは、Auth0 Vue SDK を使用して、Ionic Vue と Capacitor のアプリケーションに Auth0 を統合する方法を説明します。

AI を使用して Auth0 を統合する

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

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-ionic-vue

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

Add Auth0 authentication to my Ionic Vue app

AI アシスタントは、Auth0 アプリケーションの作成、認証情報の取得、Auth0 Vue SDK と Capacitor プラグインのインストール、ディープリンクの設定、ネイティブブラウザー統合によるログイン/ログアウト フローの実装を自動的に行います。詳しくは、Auth0 agent skills を参照してください。

​

はじめに

このクイックスタートでは、Capacitor を使用して iOS と Android 上で動作する Ionic Vue アプリケーションに Auth0 の認証を追加する方法を説明します。Auth0 Vue SDK と Capacitor のネイティブブラウザープラグインを使用して、ログイン、ログアウト、ユーザープロフィール機能を備えた安全なモバイルアプリを構築します。

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

   Capacitor を使用して新しい Ionic Vue プロジェクトを作成する

   npx ionic start auth0-ionic-vue blank --type=vue --capacitor
   

   プロジェクトを開く

   cd auth0-ionic-vue
   

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

   npm uninstall -g ionic
   npm i -g @ionic/cli
   
2. Auth0 Vue SDKとCapacitorプラグインをインストールする

   npm install @auth0/auth0-vue @capacitor/browser @capacitor/app
   

   @capacitor/browser は、安全に認証できるよう、Auth0 Universal Login ページをデバイスのシステムブラウザー (iOS では SFSafariViewController、Android では Chrome Custom Tabs) で開きます。

   @capacitor/app はディープリンクイベントを監視し、ログイン後に Auth0 がリダイレクトでアプリに戻した際の OAuth callback をアプリで処理できるようにします。

3. Auth0アプリを設定する

   次に、Auth0 テナントに新しいアプリを作成する必要があります。Ionic Capacitor アプリでは、カスタム URL スキームのコールバックを使用する Native アプリケーションタイプを使用します。

   Auth0 アプリを設定する方法は 3 つあります。Quick Setup ツール (推奨) を使用する方法、CLI コマンドを実行する方法、または Dashboard で手動設定する方法です。

   Quick Setup（推奨）

   Auth0 の Native アプリケーションを作成し、認証情報を取得します。

   アプリを作成したら、次の手順で使用する ドメイン と クライアントID の値を控えておきます。

   Dashboard でコールバック URL とログアウト URL も設定する必要があります。以下の URL 設定を参照してください。

   CLI

   プロジェクトのルートディレクトリで次のコマンドを実行して、Auth0 アプリを作成します。

   Mac

   # Auth0 CLI をインストールします（まだインストールしていない場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # ログインして Native アプリケーションを作成します
   auth0 login && auth0 apps create \
     -n "My Ionic Vue App" \
     -t native \
     -o "capacitor://localhost,http://localhost" \
     --no-input
   

   # Auth0 CLI をインストールします（まだインストールしていない場合）
   scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
   scoop install auth0
   
   # ログインして Native アプリケーションを作成します
   auth0 login; auth0 apps create `
     -n "My Ionic Vue App" `
     -t native `
     -o "capacitor://localhost,http://localhost" `
     --no-input
   

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

   1. Auth0 で認証します (必要に応じてログインを求められます)
   2. 許可されたオリジンを設定した Native アプリケーションを作成します
   3. プロジェクトで使用する ドメイン と クライアントID を出力します

   コールバック URL とログアウト URL は、引き続き Dashboard で設定する必要があります。詳しくは以下を参照してください。

   Dashboard

   1. Auth0 Dashboard に移動します
   2. Applications > Applications > Create Application をクリックします
   3. アプリの名前 (例: Ionic Vue App) を入力し、アプリケーションタイプとして Native を選択して Create をクリックします
   4. Settings タブに切り替え、ドメイン と クライアントID の値を控えます

   このガイドでは、YOUR_PACKAGE_ID はアプリケーションのパッケージ ID を指します。これは capacitor.config.ts ファイルの appId フィールドで確認および設定できます。詳細については、Capacitor の Config schema を参照してください。

   Application Details ページの Settings タブで、次の URL を設定します。

   Allowed Callback URLs:

   YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
   

   Allowed Logout URLs:

   YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
   

   Allowed Origins:

   capacitor://localhost, http://localhost
   

   Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がない場合、ログイン処理は失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。

   Allowed Logout URLs は、サインアウト時にシームレスなユーザー体験を提供するために重要です。一致する URL がない場合、ログアウト後にユーザーはアプリケーションへリダイレクトされず、Auth0 の汎用ページに遷移します。

   Allowed Origins には、ネイティブアプリから Auth0 へのリクエストのために capacitor://localhost (iOS) と http://localhost (Android) を含める必要があります。

   Quick Setup または CLI を使用した場合は、Auth0 Dashboard で対象アプリの Settings タブに移動し、上記の Dashboard タブに記載されているコールバック URL とログアウト URL を設定してください。

4. Auth0 プラグインを設定する

   src/main.ts

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import { IonicVue } from '@ionic/vue'
   import { createAuth0 } from '@auth0/auth0-vue'
   import config from '../capacitor.config'
   
   // アプリのパッケージIDを使用してcallback URLを構築する
   const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`
   
   const app = createApp(App)
     .use(IonicVue)
     .use(router)
   
   app.use(
     createAuth0({
       domain: '{yourDomain}',
       clientId: '{yourClientId}',
       useRefreshTokens: true,
       useRefreshTokensFallback: false,
       authorizationParams: {
         redirect_uri,
       },
     })
   )
   
   router.isReady().then(() => {
     app.mount('#app')
   })
   

   • useRefreshTokens: true — モバイルブラウザーではサードパーティ Cookie がブロックされるため、iframe ベースのサイレント認証は機能しません。リフレッシュトークンは /oauth/token エンドポイントを直接呼び出します。
   • useRefreshTokensFallback: false — モバイルでは利用できない iframe ベースのフォールバックを SDK が試行しないようにします。
   • router.isReady().then(...) — SDK が OAuth コールバックを処理する前に Vue Router が完全に初期化されていることを確認し、競合状態を防ぎます。

   アプリケーションを閉じて再度開いた後も認証状態を維持するには、cacheLocation を localstorage に設定することを検討してください。ただし、localstorage にトークンを保存するリスクがある点に注意してください。また、Capacitor アプリではデータが予期せず復元される可能性があるため、localstorage は 一時的 なものとして扱う必要があります。Capacitor ドキュメントのストレージに関するガイダンスも参照してください。

5. 認証コンポーネントを作成

   コンポーネントファイルを作成する

   Mac/Linux

   mkdir -p src/components && touch src/components/LoginButton.vue && touch src/components/LogoutButton.vue && touch src/components/UserProfile.vue
   

   New-Item -ItemType Directory -Force -Path src/components
   New-Item -ItemType File -Path src/components/LoginButton.vue
   New-Item -ItemType File -Path src/components/LogoutButton.vue
   New-Item -ItemType File -Path src/components/UserProfile.vue
   

   以下のコードを新しいコンポーネントに追加し、既存のApp.vueとHomePage.vueを更新してください。

6. アプリを実行する

   まずはブラウザーでテストしてください:

   ionic serve
   

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

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

   npx cap add ios
   npx cap add android
   

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

   iOS

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

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

   実行するには、事前に npx cap add でネイティブプラットフォームを追加しておく必要があります。これは各プラットフォームごとに一度だけ行えばかまいません。先に、お使いのプラットフォームのカスタム URL スキームを登録しておいてください。

チェックポイント

これで、Ionic Vue アプリケーションで、ログイン、ログアウト、ユーザープロフィール情報を含む Auth0 のログイン機能が完全に動作するようになっているはずです。

---

​

高度な使い方

カスタムURLスキームの設定

認証後に OAuth コールバックをアプリに戻せるよう、OS がルーティングできるように、アプリのカスタム URL スキームを登録します。

​

iOS

ios/App/App/Info.plist にカスタム URL スキームを登録します。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_PACKAGE_ID</string>
    </array>
  </dict>
</array>

YOUR_PACKAGE_ID は、capacitor.config.ts の appId に置き換えてください。詳細は、Defining a Custom URL Scheme を参照してください。

​

Android

メインの <activity> タグ内にある android/app/src/main/AndroidManifest.xml に intent filter を追加します。

<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="YOUR_PACKAGE_ID" />
</intent-filter>

詳細は、Create Deep Links to App Content を参照してください。

ネイティブプロジェクトのファイルを変更した後は、変更を確実に反映するために npx cap sync を実行してください。

Vue Router でルートを保護する

認証が必要なルートを保護するには、Auth0 Vue SDK に組み込まれている authGuard を使用します。

src/router/index.ts

import { createRouter, createWebHistory } from '@ionic/vue-router'
import { authGuard } from '@auth0/auth0-vue'
import HomePage from '../views/HomePage.vue'
import ProfilePage from '../views/ProfilePage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage,
  },
  {
    path: '/profile',
    name: 'Profile',
    component: ProfilePage,
    beforeEnter: authGuard,
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

authGuard は、未認証のユーザーを Auth0 の Universal Login ページに自動的にリダイレクトします。ログイン後は、最初に要求したルートに戻ります。

保護されたAPIの呼び出し

API 用のアクセストークンをリクエストするには、createAuth0 の設定で audience パラメーターを構成します。

src/main.ts

app.use(
  createAuth0({
    domain: '{yourDomain}',
    clientId: '{yourClientId}',
    useRefreshTokens: true,
    useRefreshTokensFallback: false,
    authorizationParams: {
      redirect_uri,
      audience: 'YOUR_API_IDENTIFIER',
    },
  })
)

次に、コンポーネントで getAccessTokenSilently を使用してトークンを取得し、認証済みの API 呼び出しを行います。

src/components/ApiCall.vue

<template>
  <ion-button @click="callApi" :disabled="loading">
    {{ loading ? 'Calling...' : 'Call Protected API' }}
  </ion-button>
  <pre v-if="response">{{ JSON.stringify(response, null, 2) }}</pre>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'
import { IonButton } from '@ionic/vue'

const { getAccessTokenSilently } = useAuth0()
const response = ref(null)
const loading = ref(false)

const callApi = async () => {
  try {
    loading.value = true
    const token = await getAccessTokenSilently()

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

    response.value = await res.json()
  } catch (error) {
    console.error('API call failed:', error)
  } finally {
    loading.value = false
  }
}
</script>

getAccessTokenSilently メソッドは、キャッシュからトークンを取得するか、必要に応じてリフレッシュトークンを使って自動的に更新します。

defineComponent パターンを使用する

<script setup> ではなく、明示的な defineComponent パターンを使いたい場合は、LoginButton コンポーネントは次のようになります。

src/components/LoginButton.vue

<template>
  <ion-button @click="login" expand="block">Log in</ion-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'
import { Browser } from '@capacitor/browser'
import { IonButton } from '@ionic/vue'

export default defineComponent({
  components: { IonButton },
  setup() {
    const { loginWithRedirect } = useAuth0()

    const login = async () => {
      await loginWithRedirect({
        openUrl: (url: string) =>
          Browser.open({ url, windowName: '_self' }),
      })
    }

    return { login }
  },
})
</script>

defineComponent パターンでは、子コンポーネントを明示的に登録し、setup() 関数から値を返す必要があります。どちらのパターンも Auth0 Vue SDK で完全にサポートされています。

よくある問題と解決策

​

Callback URL の不一致エラー

解決策: Auth0 Dashboard の callback URL が、アプリケーションで生成される URL と完全に一致していることを確認してください。YOUR_PACKAGE_ID が capacitor.config.ts の appId フィールドと一致していることも確認してください。

​

「PKCE not allowed」エラー

修正方法:

1. Auth0 Dashboard > Applications > Your Application に移動します
2. Application Type を Native に変更します
3. Token Endpoint Authentication Method を None に設定します
4. 変更を保存して、再度試します

​

iOS で SSO が機能しない

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

​

ログインは成功するが、アプリを再起動するとユーザーが未認証のままになる

アプリの再起動後もトークンを保持するには、createAuth0 の設定で cacheLocation: 'localstorage' を有効にしてください。セキュリティ上の影響がある点に注意してください。SDK は、より安全に保存するためのカスタムキャッシュ実装もサポートしています。

​

ログイン後にブラウザーが閉じない

App.vue コンポーネントの appUrlOpen イベントリスナー内で Browser.close() を呼び出していることを確認してください。Android では Browser.close() は no-op のため、ブラウザーは自動的に閉じます。

​

ログインページがデバイスの既定のブラウザーアプリで開く

ログインページがアプリ内ブラウザーのオーバーレイではなく Safari や Chrome で開く場合は、openUrl コールバックを loginWithRedirect と logout に渡していることを確認してください。これを渡さないと、SDK はデフォルトで window.location.href を使用するため、アプリ全体が別の場所に遷移します。