メインコンテンツへスキップ

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 で手動設定する方法です。
Auth0 の Native アプリケーションを作成し、認証情報を取得します。アプリを作成したら、次の手順で使用する ドメイン と クライアントID の値を控えておきます。
Dashboard でコールバック URL とログアウト URL も設定する必要があります。以下の URL 設定を参照してください。
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

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

コンポーネントファイルを作成する
mkdir -p src/components && touch src/components/LoginButton.vue && touch src/components/LogoutButton.vue && touch 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
次に、ビルド、同期、実行を行います。
ionic build && npx cap sync && npx cap run ios
実行するには、事前に npx cap add でネイティブプラットフォームを追加しておく必要があります。これは各プラットフォームごとに一度だけ行えばかまいません。先に、お使いのプラットフォームのカスタム URL スキームを登録しておいてください。
チェックポイントこれで、Ionic Vue アプリケーションで、ログイン、ログアウト、ユーザープロフィール情報を含む Auth0 のログイン機能が完全に動作するようになっているはずです。

​
高度な使い方

認証後に 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 を実行してください。
認証が必要なルートを保護するには、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 用のアクセストークンをリクエストするには、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 メソッドは、キャッシュからトークンを取得するか、必要に応じてリフレッシュトークンを使って自動的に更新します。
<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 で完全にサポートされています。