Flutter Web アプリケーションにログインを追加

AI を使って Auth0 を統合する

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

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-flutter-web

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

Add Auth0 authentication to my Flutter web app

AI アシスタントは、Auth0 アプリケーションの作成、認証情報の取得、auth0_flutter SDK 依存関係の追加、web/index.html の設定、コールバックURL の設定、ログイン/ログアウトフローの実装を自動的に行います。Agent Skills の完全なドキュメント →

前提条件: 開始する前に、以下がインストールされていることを確認してください。

Flutter 3.0 以降 (Web 向けに設定済み)
Dart 2.17 以降
Flutter CLI の基本的な知識

インストールを確認するには、次を実行します: flutter --versionFlutter Web アプリがない場合は、次のコマンドで作成します: flutter create --platforms=web my_app

はじめに

このクイックスタートでは、Flutter Web アプリケーションに Auth0 認証を追加する方法を説明します。Auth0 Flutter SDK を使用して、ログイン、ログアウト、ユーザープロファイル機能を備えたセキュアなシングルページアプリケーションを構築します。

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

このクイックスタート用に、新しい Flutter Web アプリケーションを作成します。

flutter create --platforms=web auth0_flutter_web

プロジェクトを開く:

cd auth0_flutter_web

Auth0 Flutter SDKをインストールする

Flutter CLI を使用して、Auth0 Flutter SDK をプロジェクトに追加します。

flutter pub add auth0_flutter

SDK を使用するには、Web アプリケーションで Auth0 SPA JS ライブラリを読み込む必要があります。終了の </body> タグの前に、次の <script> タグを web/index.html ファイルに追加します。

web/index.html

<!DOCTYPE html>
<html>
<head>
  <!-- ... 既存のheadコンテンツ ... -->
</head>
<body>
  <!-- ... 既存のbodyコンテンツ ... -->

  <!-- bodyの閉じタグの前に追加してください -->
  <script src="https://cdn.auth0.com/js/auth0-spa-js/2.9/auth0-spa-js.production.js" defer></script>
</body>
</html>

Flutter Web SDK を機能させるには、Auth0 SPA JS スクリプトが必要です。これがないと、認証は動作しません。

Auth0アプリを設定する

次に、Auth0テナントに新しいアプリケーションを作成する必要があります。これは、CLI コマンドを実行して自動で行うことも、Auth0 Dashboard から手動で行うこともできます。

CLI
Dashboard

Auth0 アプリケーションを作成するには、プロジェクトのルートディレクトリで次のシェルコマンドを実行します。macOS / Linux:

AUTH0_APP_NAME="My Flutter Web App" && \
auth0 apps create -n "${AUTH0_APP_NAME}" -t spa \
  --callbacks http://localhost:3000 \
  --logout-urls http://localhost:3000 \
  --origins http://localhost:3000 \
  --json

Windows (PowerShell):

$appName = "My Flutter Web App"
auth0 apps create -n $appName -t spa `
  --callbacks http://localhost:3000 `
  --logout-urls http://localhost:3000 `
  --origins http://localhost:3000 `
  --json

出力から ドメイン と client_id の値をコピーします。これらは次の手順で使用します。

まだ Auth0 CLI をインストールしていない場合は、次を実行します。

brew tap auth0/auth0-cli && brew install auth0

その後、auth0 login でログインします。

Auth0 Dashboard に移動します
Applications → Applications → Create Application に進みます
アプリケーションの名前を入力します (例: “My Flutter Web App”)
Single Page Web Applications を選択し、Create をクリックします
Settings タブで、次のように設定します。

Setting	Value
Allowed Callback URLs	`http://localhost:3000`
Allowed Logout URLs	`http://localhost:3000`
Allowed Web Origins	`http://localhost:3000`

下にスクロールして Save Changes をクリックします
Basic Information セクションから ドメイン と クライアントID の値をコピーします

Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。Allowed Logout URLs は、サインアウト時にスムーズなユーザー体験を提供するうえで重要です。Allowed Web Origins は、サイレント認証に不可欠です。これを設定しないと、ユーザーはページを再読み込みしたときや、後でアプリに戻ったときにログアウトされます。

SDK を設定する

Auth0 の ドメイン と クライアントID の値を使用して、Auth0Web クラスのインスタンスを作成します。新しいファイル lib/auth0_service.dart を作成します。

lib/auth0_service.dart

import 'package:auth0_flutter/auth0_flutter_web.dart';

class Auth0Service {
  static final Auth0Service _instance = Auth0Service._internal();
  late final Auth0Web auth0Web;

  factory Auth0Service() {
    return _instance;
  }

  Auth0Service._internal() {
    auth0Web = Auth0Web(
      'YOUR_AUTH0_DOMAIN',        // Auth0ドメインに置き換えてください
      'YOUR_AUTH0_CLIENT_ID',     // クライアントIDに置き換えてください
      cacheLocation: CacheLocation.localStorage, // セッションを永続化する
    );
  }
}

YOUR_AUTH0_DOMAIN は Auth0 テナントのドメイン (例: dev-abc123.us.auth0.com) に、YOUR_AUTH0_CLIENT_ID はダッシュボードに表示されるアプリケーションのクライアントIDに置き換えてください。

cacheLocation: CacheLocation.localStorage を設定すると、ページを再読み込みしてもセッションが維持されます。

メインビューを作成

lib/main.dart の内容を以下のコードに置き換えてください。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:auth0_flutter/auth0_flutter_web.dart';
import 'auth0_service.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth0 Flutter Web',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainView(),
    );
  }
}

class MainView extends StatefulWidget {
  const MainView({super.key});

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  final auth0Service = Auth0Service();
  Credentials? _credentials;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _handleAuthCallback();
  }

  Future<void> _handleAuthCallback() async {
    try {
      final credentials = await auth0Service.auth0Web.onLoad();
      setState(() {
        _credentials = credentials;
        _isLoading = false;
      });
    } catch (e) {
      print('Error handling auth callback: $e');
      setState(() {
        _isLoading = false;
      });
    }
  }

  Future<void> _login() async {
    await auth0Service.auth0Web.loginWithRedirect(
      redirectUrl: 'http://localhost:3000',
    );
  }

  Future<void> _logout() async {
    await auth0Service.auth0Web.logout(
      returnToUrl: 'http://localhost:3000',
    );
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }

    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF667eea), Color(0xFF764ba2)],
          ),
        ),
        child: Center(
          child: Card(
            elevation: 8,
            margin: const EdgeInsets.all(24),
            child: Container(
              constraints: const BoxConstraints(maxWidth: 500),
              padding: const EdgeInsets.all(48),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Icon(
                    Icons.security,
                    size: 64,
                    color: Color(0xFF667eea),
                  ),
                  const SizedBox(height: 24),
                  Text(
                    'Auth0 Flutter Web',
                    style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 16),
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 12,
                    ),
                    decoration: BoxDecoration(
                      color: _credentials != null
                          ? Colors.green.shade50
                          : Colors.red.shade50,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          _credentials != null ? Icons.check_circle : Icons.cancel,
                          color: _credentials != null ? Colors.green : Colors.red,
                        ),
                        const SizedBox(width: 8),
                        Text(
                          _credentials != null
                              ? 'You are logged in'
                              : 'You are logged out',
                          style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: _credentials != null
                                ? Colors.green.shade900
                                : Colors.red.shade900,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 32),
                  if (_credentials == null)
                    ElevatedButton.icon(
                      onPressed: _login,
                      icon: const Icon(Icons.login),
                      label: const Text('Log In'),
                      style: ElevatedButton.styleFrom(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 32,
                          vertical: 16,
                        ),
                        backgroundColor: const Color(0xFF667eea),
                        foregroundColor: Colors.white,
                      ),
                    )
                  else
                    Column(
                      children: [
                        if (_credentials!.user.pictureUrl != null)
                          CircleAvatar(
                            radius: 50,
                            backgroundImage: NetworkImage(
                              _credentials!.user.pictureUrl!.toString(),
                            ),
                          ),
                        const SizedBox(height: 16),
                        Text(
                          _credentials!.user.name ?? 'User',
                          style: Theme.of(context).textTheme.headlineSmall,
                        ),
                        const SizedBox(height: 8),
                        Text(
                          _credentials!.user.email ?? '',
                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            color: Colors.grey.shade600,
                          ),
                        ),
                        const SizedBox(height: 24),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            ElevatedButton.icon(
                              onPressed: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => ProfileView(
                                      credentials: _credentials!,
                                    ),
                                  ),
                                );
                              },
                              icon: const Icon(Icons.person),
                              label: const Text('View Profile'),
                              style: ElevatedButton.styleFrom(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 24,
                                  vertical: 12,
                                ),
                              ),
                            ),
                            const SizedBox(width: 16),
                            ElevatedButton.icon(
                              onPressed: _logout,
                              icon: const Icon(Icons.logout),
                              label: const Text('Log Out'),
                              style: ElevatedButton.styleFrom(
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 24,
                                  vertical: 12,
                                ),
                                backgroundColor: Colors.red,
                                foregroundColor: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ProfileView extends StatelessWidget {
  final Credentials credentials;

  const ProfileView({super.key, required this.credentials});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Profile'),
        backgroundColor: const Color(0xFF667eea),
        foregroundColor: Colors.white,
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF667eea), Color(0xFF764ba2)],
          ),
        ),
        child: Center(
          child: Card(
            elevation: 8,
            margin: const EdgeInsets.all(24),
            child: Container(
              constraints: const BoxConstraints(maxWidth: 600),
              padding: const EdgeInsets.all(48),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Center(
                    child: Column(
                      children: [
                        if (credentials.user.pictureUrl != null)
                          CircleAvatar(
                            radius: 60,
                            backgroundImage: NetworkImage(
                              credentials.user.pictureUrl!.toString(),
                            ),
                          ),
                        const SizedBox(height: 16),
                        Text(
                          credentials.user.name ?? 'User',
                          style: Theme.of(context).textTheme.headlineMedium,
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 32),
                  const Text(
                    'Profile Information',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Divider(height: 24),
                  _buildInfoRow('メール', credentials.user.email ?? 'N/A'),
                  _buildInfoRow('名前', credentials.user.name ?? 'N/A'),
                  _buildInfoRow('ニックネーム', credentials.user.nickname ?? 'N/A'),
                  _buildInfoRow('ユーザーID', credentials.user.sub),
                  const SizedBox(height: 24),
                  const Text(
                    'Raw User Object',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 12),
                  Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: SelectableText(
                        credentials.user.toString(),
                        style: const TextStyle(
                          fontFamily: 'monospace',
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 120,
            child: Text(
              '$label:',
              style: const TextStyle(
                fontWeight: FontWeight.w600,
                color: Colors.grey,
              ),
            ),
          ),
          Expanded(
            child: SelectableText(
              value,
              style: const TextStyle(fontWeight: FontWeight.w500),
            ),
          ),
        ],
      ),
    );
  }
}

重要なポイント：

認証コールバックを処理するため、initState() 内で onLoad() が呼び出されます
loginWithRedirect() はユーザーを Auth0 の Universal Login ページへリダイレクトします
logout() はセッションをクリアし、アプリに戻るようリダイレクトします
ユーザープロファイル情報には credentials.user からアクセスできます

アプリを実行する

Flutter Web アプリケーションをポート 3000 で起動します:

flutter run -d chrome --web-port 3000

Flutter 3.24.0 以降では、パフォーマンス向上のために WASM コンパイルをサポートしています。

flutter run -d chrome --web-port 3000 --wasm

チェックポイントこれで、http://localhost:3000 で Auth0 のログインページが完全に動作するようになっているはずです。次の操作を行うと、以下のようになります。

「Log In」をクリックすると、Auth0 の Universal Login ページにリダイレクトされます
認証を完了すると、アプリにリダイレクトされます
「View Profile」をクリックすると、ユーザー情報が表示されます
「Log Out」をクリックすると、アプリと Auth0 の両方からログアウトします

高度な使用

保護されたAPIの呼び出し

保護されたAPIを呼び出すためのアクセストークンを要求するように SDK を設定します。

lib/auth0_service.dart

Auth0Service._internal() {
  auth0Web = Auth0Web(
    'YOUR_AUTH0_DOMAIN',
    'YOUR_AUTH0_CLIENT_ID',
    cacheLocation: CacheLocation.localStorage,
  );
}

Future<String?> getAccessToken({String? audience}) async {
  try {
    final token = await auth0Web.getTokenSilently(
      audience: audience ?? 'YOUR_API_IDENTIFIER',
    );
    return token;
  } catch (e) {
    print('Error getting access token: $e');
    return null;
  }
}

アクセストークンを使用して API を呼び出します。

Future<void> callProtectedApi() async {
  final accessToken = await Auth0Service().getAccessToken();

  if (accessToken != null) {
    final response = await http.get(
      Uri.parse('https://your-api.example.com/protected'),
      headers: {
        'Authorization': 'Bearer $accessToken',
      },
    );

    print('API Response: ${response.body}');
  }
}

ログインフローに追加のパラメーターを渡します。

Future<void> _loginWithGoogle() async {
  await auth0Service.auth0Web.loginWithRedirect(
    redirectUrl: 'http://localhost:3000',
    authorizationParams: AuthorizationParams(
      connection: 'google-oauth2', // Google ログインを強制
      screen_hint: 'signup',       // サインアップ画面を表示
    ),
  );
}

Future<void> _loginWithCustomScope() async {
  await auth0Service.auth0Web.loginWithRedirect(
    redirectUrl: 'http://localhost:3000',
    authorizationParams: AuthorizationParams(
      scope: 'openid profile email read:messages',
      audience: 'https://your-api.example.com',
    ),
  );
}

ログインエラーの処理

認証失敗に備えて適切なエラー処理を実装します。

Future<void> _handleAuthCallback() async {
  try {
    final credentials = await auth0Service.auth0Web.onLoad();
    setState(() {
      _credentials = credentials;
      _isLoading = false;
    });
  } on Auth0Exception catch (e) {
    // Auth0 固有のエラーを処理
    print('Auth0 Error: ${e.message}');
    _showErrorDialog(e.message);
    setState(() {
      _isLoading = false;
    });
  } catch (e) {
    // その他のエラーを処理
    print('Error: $e');
    _showErrorDialog('An unexpected error occurred');
    setState(() {
      _isLoading = false;
    });
  }
}

void _showErrorDialog(String message) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('Authentication Error'),
      content: Text(message),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('OK'),
        ),
      ],
    ),
  );
}

サイレント認証

ログインページを表示せずに、ユーザーがすでに認証されているかどうかを確認します。

Future<bool> checkAuthentication() async {
  try {
    final credentials = await auth0Service.auth0Web.onLoad();
    return credentials != null;
  } catch (e) {
    return false;
  }
}

Future<void> silentLogin() async {
  try {
    // サイレントでトークンの取得を試行
    final token = await auth0Service.auth0Web.getTokenSilently();
    if (token != null) {
      // ユーザーは認証済み
      print('User is authenticated');
    }
  } catch (e) {
    // ユーザーはログインが必要
    print('User needs to log in');
  }
}

トラブルシューティング

「Callback URL mismatch」エラー

問題: コールバックURLが Auth0 に設定されているURLと一致していません。解決方法: コード内のコールバックURLが Auth0 Dashboard の設定と完全に一致していることを確認してください。

Auth0 Dashboard → Applications → Your App → Settings に移動します
Allowed Callback URLs に http://localhost:3000 が含まれていることを確認します
URL は完全に一致している必要があります (コード側で指定していない限り、末尾のスラッシュは付けないでください)

認証が機能しない

問題: ログインボタンをクリックしても何も起こらない、または認証に失敗します。解決方法: web/index.html で Auth0 SPA JS スクリプトが読み込まれていることを確認してください。

<script src="https://cdn.auth0.com/js/auth0-spa-js/2.9/auth0-spa-js.production.js" defer></script>

このスクリプトは、閉じタグ </body> の前に配置する必要があります。

ページを更新するとユーザーがログアウトされる

問題: ページを再読み込みするとユーザーセッションが維持されません。解決方法:

Auth0 Dashboard の Allowed Web Origins に http://localhost:3000 が含まれていることを確認します
Auth0Web インスタンスの作成時に cacheLocation: CacheLocation.localStorage を使用します
ウィジェットの initState() で onLoad() が呼び出されていることを確認します

「Invalid state」エラー

問題: 認証コールバック中に state が一致していません。解決方法:

ブラウザのキャッシュとローカルストレージを削除します
ログイン中に複数のタブを開いていないことを確認します
コールバックURLが正しいことを確認します

ブラウザコンソールで CORS エラーが発生する

問題: Cross-Origin Resource Sharing (CORS) エラーが発生しています。解決方法:

Auth0 Dashboard の Allowed Web Origins に http://localhost:3000 を追加します
ポート 3000 で実行していることを確認します (設定と一致している必要があります)

次のステップ

認証が動作するようになったら、次の項目も確認してください。

Flutter Native App Quickstart - Auth0 を使用してネイティブモバイルアプリを構築する
保護されたAPIの呼び出し - アクセストークンを使用してバックエンド API を呼び出す
Customize Universal Login - ブランドに合わせてログイン体験をカスタマイズする
Add Social Connections - Google、GitHub などのソーシャルログインを有効にする
Implement MFA - MFA を追加する

リソース

Auth0 Flutter SDK GitHub - ソースコードとサンプル
Flutter Documentation - Flutter の詳細
Auth0 Community - コミュニティでサポートを得る

Auth0 のオンボーディング

クイックスタート

基本を学ぶ

Auth0 を設定

計画と設計

Flutter Web アプリケーションにログインを追加

はじめに

高度な使用

トラブルシューティング

次のステップ

リソース

​はじめに

​高度な使用

​トラブルシューティング

​「Callback URL mismatch」エラー

​認証が機能しない

​ページを更新するとユーザーがログアウトされる

​「Invalid state」エラー

​ブラウザコンソールで CORS エラーが発生する

​次のステップ

​リソース

はじめに

高度な使用

トラブルシューティング

「Callback URL mismatch」エラー

認証が機能しない

ページを更新するとユーザーがログアウトされる

「Invalid state」エラー

ブラウザコンソールで CORS エラーが発生する

次のステップ

リソース