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

AI を使って Auth0 を統合する

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

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

次に、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 --version を実行します。Flutter の Web アプリがない場合は、次のコマンドで作成してください: flutter create --platforms=web my_app

はじめに

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

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

このQuickstart向けに、新しい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 を使用するには、Auth0 SPA JS ライブラリを Web アプリケーションに読み込む必要があります。閉じる </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 Appを設定する

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

CLI
Dashboard

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

# Auth0 CLI をインストールする（まだインストールしていない場合）
brew tap auth0/auth0-cli && brew install auth0

# Auth0 App を設定し、lib/auth_config.dart を生成する
auth0 qs setup --app --type spa --framework flutter-web --port 3000 --name "My Flutter Web App"

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

# Auth0 App を設定し、lib/auth_config.dart を生成する
auth0 qs setup --app --type spa --framework flutter-web --port 3000 --name "My Flutter Web App"

このコマンドにより、以下が実行されます：

認証済みかどうかを確認します (必要に応じてログインを求められます)
http://localhost:3000 用に設定された Auth0 Single Page Application を作成します
Auth0 ドメインとクライアント ID を Dart 定数として含む lib/auth_config.dart を生成します

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

設定	値
Allowed Callback URLs	`http://localhost:3000`
Allowed Logout URLs	`http://localhost:3000`
Allowed Web Origins	`http://localhost:3000`

下にスクロールして Save Changes をクリックします
Basic Information セクションから Domain と Client ID の値をコピーします

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

SDKを設定する

Auth0 の domain と client 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 はダッシュボードに表示されるアプリケーションの Client 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('Email', credentials.user.email ?? 'N/A'),
                  _buildInfoRow('Name', credentials.user.name ?? 'N/A'),
                  _buildInfoRow('Nickname', credentials.user.nickname ?? 'N/A'),
                  _buildInfoRow('User 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),
            ),
          ),
        ],
      ),
    );
  }
}

重要なポイント：

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

アプリを実行する

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

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');
  }
}

トラブルシューティング

よくある問題と解決策

「コールバック URL の不一致」エラー

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

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

認証が機能しない

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

<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 の不一致が発生しています。解決策:

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

ブラウザーコンソールでの CORS エラー

問題: クロスオリジンリソース共有エラーが発生しています。解決策:

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

次のステップ

認証が動作するようになったので、次の内容もぜひご確認ください。

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

リソース

Auth0 Flutter SDK GitHub - ソースコードとサンプル
Flutter Documentation - Flutter について詳しく学ぶ
Auth0 Community - コミュニティでサポートを受ける

Quickstarts

Auth0 の概要

Auth0 を設定する

アプリケーション

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

はじめに

高度な使い方

トラブルシューティング

「コールバック URL の不一致」エラー

認証が機能しない

ページを再読み込みするとユーザーがログアウトされる

「Invalid state」エラー

ブラウザーコンソールでの CORS エラー

次のステップ

リソース

​はじめに

​高度な使い方

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

​「コールバック URL の不一致」エラー

​認証が機能しない

​ページを再読み込みするとユーザーがログアウトされる

​「Invalid state」エラー

​ブラウザーコンソールでの CORS エラー

​次のステップ

​リソース

はじめに

高度な使い方

トラブルシューティング

「コールバック URL の不一致」エラー

認証が機能しない

ページを再読み込みするとユーザーがログアウトされる

「Invalid state」エラー

ブラウザーコンソールでの CORS エラー

次のステップ

リソース