Ajouter la fonctionnalité de connexion à votre application Web Flutter

Utiliser l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter l’authentification Auth0 automatiquement en quelques minutes à l’aide d’Agent Skills.Installer :

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

Ensuite, demandez à votre assistant IA :

Add Auth0 authentication to my Flutter web app

Votre assistant de programmation IA créera automatiquement votre application Auth0, récupérera les identifiants, ajoutera la dépendance SDK auth0_flutter, configurera web/index.html, configurera les URL de rappel et mettra en place les flux de connexion et de déconnexion. Documentation complète d’Agent Skills →

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

Flutter 3.0 ou version ultérieure, configuré pour le web
Dart 2.17 ou version ultérieure
Une connaissance de base du Flutter CLI

Vérifiez l’installation : flutter --versionSi vous n’avez pas d’application web Flutter, créez-en une : flutter create --platforms=web my_app

Pour commencer

Ce Quickstart montre comment ajouter l’authentification Auth0 à une application Web Flutter. Vous créerez une application monopage sécurisée dotée de fonctionnalités de login, de logout et de profil utilisateur à l’aide de l’Auth0 Flutter SDK.

Créer un nouveau projet

Créez une nouvelle application Web Flutter pour ce Quickstart :

flutter create --platforms=web auth0_flutter_web

Ouvrez le projet :

cd auth0_flutter_web

Installez le SDK Flutter d’Auth0

Ajoutez l’Auth0 Flutter SDK à votre projet à l’aide de la CLI Flutter :

flutter pub add auth0_flutter

Le SDK exige que la bibliothèque Auth0 SPA JS soit chargée dans votre application Web. Ajoutez la balise <script> suivante à votre fichier web/index.html, avant la balise de fermeture </body> :

web/index.html

<!DOCTYPE html>
<html>
<head>
  <!-- ... contenu existant de l'en-tête ... -->
</head>
<body>
  <!-- ... contenu existant du corps ... -->

  <!-- Ajouter ceci avant la balise de fermeture body -->
  <script src="https://cdn.auth0.com/js/auth0-spa-js/2.9/auth0-spa-js.production.js" defer></script>
</body>
</html>

Le script Auth0 SPA JS est nécessaire au fonctionnement du SDK Flutter Web. Sans lui, l’authentification ne fonctionnera pas.

Configurez votre Auth0 App

Ensuite, vous devez créer une nouvelle application dans votre tenant Auth0.Vous pouvez choisir de configurer automatiquement votre application Auth0 en exécutant une commande CLI, ou le faire manuellement dans le Dashboard :

CLI
Dashboard

Exécutez la commande suivante dans le répertoire racine de votre projet pour créer une application Auth0 :

# Installer l’Auth0 CLI (si elle n’est pas déjà installée)
brew tap auth0/auth0-cli && brew install auth0

# Configurer l’application Auth0 et générer lib/auth_config.dart
auth0 qs setup --app --type spa --framework flutter-web --port 3000 --name "My Flutter Web App"

# Installer l’Auth0 CLI (si elle n’est pas déjà installée)
scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
scoop install auth0

# Configurer l’application Auth0 et générer lib/auth_config.dart
auth0 qs setup --app --type spa --framework flutter-web --port 3000 --name "My Flutter Web App"

Cette commande va :

Vérifier si vous êtes authentifié (et vous inviter à vous connecter si nécessaire)
Créer une application monopage Auth0 configurée pour http://localhost:3000
Générer lib/auth_config.dart avec votre domaine Auth0 et votre Client ID sous forme de constantes Dart

Accédez au Auth0 Dashboard
Accédez à Applications → Applications → Create Application
Entrez un nom pour votre application (p. ex., “My Flutter Web App”)
Sélectionnez Single Page Web Applications, puis cliquez sur Create
Dans l’onglet Settings, configurez les éléments suivants :

Paramètre	Valeur
Allowed Callback URLs	`http://localhost:3000`
Allowed Logout URLs	`http://localhost:3000`
Allowed Web Origins	`http://localhost:3000`

Faites défiler la page vers le bas, puis cliquez sur Save Changes
Copiez les valeurs Domain et Client ID de la section Basic Information

Allowed Callback URLs est une mesure de sécurité essentielle qui garantit que les utilisateurs sont redirigés de façon sécuritaire vers votre application après l’authentification.Allowed Logout URLs est essentiel pour offrir une expérience utilisateur fluide lors de la déconnexion.Allowed Web Origins est essentiel pour l’authentification silencieuse. Sans cela, les utilisateurs seront déconnectés lorsqu’ils actualiseront la page ou reviendront plus tard dans votre application.

Configurer le SDK

Créez une instance de la classe Auth0Web avec les valeurs domain et client ID de votre compte Auth0.Créez un nouveau fichier 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',        // Remplacez par votre domaine Auth0
      'YOUR_AUTH0_CLIENT_ID',     // Remplacez par votre Client ID
      cacheLocation: CacheLocation.localStorage, // Enregistrer les sessions
    );
  }
}

Remplacez YOUR_AUTH0_DOMAIN par le domaine de votre tenant Auth0 (p. ex. dev-abc123.us.auth0.com) et YOUR_AUTH0_CLIENT_ID par le Client ID de votre application dans le Dashboard.

Définir cacheLocation: CacheLocation.localStorage permet de conserver des sessions persistantes lors du rechargement des pages.

Créer la vue principale

Remplacez le contenu de lib/main.dart par le code suivant :

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),
            ),
          ),
        ],
      ),
    );
  }
}

Points clés :

onLoad() est appelé dans initState() pour gérer le callback d’authentication
loginWithRedirect() redirige les utilisateurs vers la page Universal Login d’Auth0
logout() met fin à la session et redirige vers votre application
Les renseignements du profil utilisateur sont accessibles par credentials.user

Lancez votre application

Lancez votre application Web Flutter sur le port 3000 :

flutter run -d chrome --web-port 3000

Flutter 3.24.0 et les versions plus récentes prennent en charge la compilation WASM pour améliorer les performances :

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

VérificationVous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle à l’adresse http://localhost:3000. Lorsque vous :

Cliquez sur “Se connecter” - vous êtes redirigé vers la page Universal Login d’Auth0
Terminez l’authentification - vous êtes redirigé vers votre application
Cliquez sur “Voir le profil” - vous voyez les renseignements de votre profil
Cliquez sur “Se déconnecter” - vous êtes déconnecté à la fois de votre application et d’Auth0

Utilisation avancée

Appeler des API protégées

Configurez le SDK pour demander un jeton d’accès afin d’appeler des API protégées :

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('Erreur lors de l’obtention du jeton d’accès : $e');
    return null;
  }
}

Utilisez le jeton d’accès pour appeler votre 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('Réponse de l’API : ${response.body}');
  }
}

Paramètres de connexion personnalisés

Transmettez des paramètres supplémentaires au flux de connexion :

Future<void> _loginWithGoogle() async {
  await auth0Service.auth0Web.loginWithRedirect(
    redirectUrl: 'http://localhost:3000',
    authorizationParams: AuthorizationParams(
      connection: 'google-oauth2', // Forcer la connexion avec Google
      screen_hint: 'signup',       // Afficher l’écran d’inscription
    ),
  );
}

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

Gestion des erreurs de connexion

Mettez en place une gestion appropriée des erreurs d’authentification :

Future<void> _handleAuthCallback() async {
  try {
    final credentials = await auth0Service.auth0Web.onLoad();
    setState(() {
      _credentials = credentials;
      _isLoading = false;
    });
  } on Auth0Exception catch (e) {
    // Gérer les erreurs propres à Auth0
    print('Erreur Auth0 : ${e.message}');
    _showErrorDialog(e.message);
    setState(() {
      _isLoading = false;
    });
  } catch (e) {
    // Gérer les autres erreurs
    print('Erreur : $e');
    _showErrorDialog('Une erreur inattendue s’est produite');
    setState(() {
      _isLoading = false;
    });
  }
}

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

Authentification silencieuse

Vérifiez si l’utilisateur est déjà authentifié sans afficher la page de connexion :

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

Future<void> silentLogin() async {
  try {
    // Tenter d’obtenir un jeton sans interaction
    final token = await auth0Service.auth0Web.getTokenSilently();
    if (token != null) {
      // L’utilisateur est authentifié
      print('L’utilisateur est authentifié');
    }
  } catch (e) {
    // L’utilisateur doit se connecter
    print('L’utilisateur doit se connecter');
  }
}

Dépannage

Problèmes courants et solutions

Erreur « Callback URL mismatch »

Problème : L’URL de rappel ne correspond pas à celle configurée dans Auth0.Solution : Assurez-vous que l’URL de rappel dans votre code correspond exactement à celle configurée dans Auth0 Dashboard :

Accédez à Auth0 Dashboard → Applications → Votre application → Settings
Vérifiez que Allowed Callback URLs inclut http://localhost:3000
L’URL doit correspondre exactement (sans barre oblique à la fin, sauf si vous l’incluez dans le code)

L’authentification ne fonctionne pas

Problème : Le bouton de connexion ne fait rien ou l’authentification échoue.Solution : Vérifiez que le script Auth0 SPA JS est chargé dans web/index.html :

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

Ce script doit être présent avant la balise fermante </body>.

L’utilisateur est déconnecté après le rechargement de la page

Problème : La session utilisateur n’est pas conservée lors du rechargement de la page.Solutions :

Assurez-vous que Allowed Web Origins inclut http://localhost:3000 dans Auth0 Dashboard
Utilisez cacheLocation: CacheLocation.localStorage lors de la création de l’instance Auth0Web
Vérifiez que onLoad() est appelé dans le initState() de votre widget

Erreur « Invalid state »

Problème : Le paramètre state ne correspond pas lors du callback d’authentification.Solutions :

Videz le cache du navigateur et le stockage local
Assurez-vous de ne pas ouvrir plusieurs onglets pendant la connexion
Vérifiez que votre URL de rappel est correcte

Erreurs CORS dans la console du navigateur

Problème : Erreurs de Cross-Origin Resource Sharing.Solution :

Ajoutez http://localhost:3000 à Allowed Web Origins dans Auth0 Dashboard
Assurez-vous d’utiliser le port 3000 (conformément à votre configuration)

Étapes suivantes

Maintenant que l’authentification fonctionne, pensez à explorer :

Quickstart pour application native Flutter - Créez une application mobile native avec Auth0
Appeler des API protégées - Utilisez des jetons d’accès pour envoyer des requêtes à vos API côté serveur
Personnaliser Universal Login - Adaptez votre expérience de connexion à votre image de marque
Ajouter des connexions sociales - Activez Google, GitHub et d’autres modes de connexion sociale
Mettre en œuvre MFA - Ajoutez l’authentification multifacteur

Ressources

Auth0 Flutter SDK GitHub - Code source et exemples
Documentation Flutter - Pour en savoir plus sur Flutter
Auth0 Community - Obtenez de l’aide de la communauté

Quickstarts

Aperçu d’Auth0

Configurer Auth0

Applications

Ajouter la fonctionnalité de connexion à votre application Web Flutter

Pour commencer

Utilisation avancée

Dépannage

Erreur « Callback URL mismatch »

L’authentification ne fonctionne pas

L’utilisateur est déconnecté après le rechargement de la page

Erreur « Invalid state »

Erreurs CORS dans la console du navigateur

Étapes suivantes

Ressources

​Pour commencer

​Utilisation avancée

​Dépannage

​Erreur « Callback URL mismatch »

​L’authentification ne fonctionne pas

​L’utilisateur est déconnecté après le rechargement de la page

​Erreur « Invalid state »

​Erreurs CORS dans la console du navigateur

​Étapes suivantes

​Ressources

Pour commencer

Utilisation avancée

Dépannage

Erreur « Callback URL mismatch »

L’authentification ne fonctionne pas

L’utilisateur est déconnecté après le rechargement de la page

Erreur « Invalid state »

Erreurs CORS dans la console du navigateur

Étapes suivantes

Ressources