> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Ce guide explique comment intégrer Auth0 à une application Web Flutter à l’aide du SDK Auth0 Flutter. # Ajouter la fonctionnalité de connexion à votre application Web Flutter export const HowToSchema = () => ; 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](https://agentskills.io/home). **Installer :** ```bash theme={null} npx skills add auth0/agent-skills --skill auth0 ``` **Ensuite, demandez à votre assistant IA :** ```text theme={null} 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 →](/quickstart/agent-skills) **Prérequis :** Avant de commencer, assurez-vous d’avoir installé les éléments suivants : * **[Flutter](https://flutter.dev/)** 3.0 ou version ultérieure, configuré pour le web * **[Dart](https://dart.dev/)** 2.17 ou version ultérieure * Une connaissance de base du [Flutter CLI](https://docs.flutter.dev/reference/flutter-cli) Vérifiez l’installation : `flutter --version` Si 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éez une nouvelle application Web Flutter pour ce Quickstart : ```shellscript theme={null} flutter create --platforms=web auth0_flutter_web ``` Ouvrez le projet : ```shellscript theme={null} cd auth0_flutter_web ``` Ajoutez l’Auth0 Flutter SDK à votre projet à l’aide de la CLI Flutter : ```shellscript theme={null} 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 ` ``` Le script Auth0 SPA JS est nécessaire au fonctionnement du SDK Flutter Web. Sans lui, l’authentification ne fonctionnera pas. 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 : Exécutez la commande suivante dans le répertoire racine de votre projet pour créer une application Auth0 : ```shellscript Mac theme={null} # 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" ``` ```powershell Windows theme={null} # 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 : 1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter si nécessaire) 2. Créer une application monopage Auth0 configurée pour `http://localhost:3000` 3. Générer `lib/auth_config.dart` avec votre domaine Auth0 et votre Client ID sous forme de constantes Dart 1. Accédez au [Auth0 Dashboard](https://manage.auth0.com/dashboard/) 2. Accédez à **Applications** → **Applications** → **Create Application** 3. Entrez un nom pour votre application (p. ex., "My Flutter Web App") 4. Sélectionnez **Single Page Web Applications**, puis cliquez sur **Create** 5. 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` | 6. Faites défiler la page vers le bas, puis cliquez sur **Save Changes** 7. 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. 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` : ```dart lib/auth0_service.dart lines theme={null} 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. Remplacez le contenu de `lib/main.dart` par le code suivant : ```dart lib/main.dart lines theme={null} 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 createState() => _MainViewState(); } class _MainViewState extends State { final auth0Service = Auth0Service(); Credentials? _credentials; bool _isLoading = true; @override void initState() { super.initState(); _handleAuthCallback(); } Future _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 _login() async { await auth0Service.auth0Web.loginWithRedirect( redirectUrl: 'http://localhost:3000', ); } Future _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 Web Flutter sur le port 3000 : ```shellscript theme={null} 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 : ```shellscript theme={null} flutter run -d chrome --web-port 3000 --wasm ``` **Vérification** Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle à l’adresse [http://localhost:3000](http://localhost:3000). Lorsque vous : 1. Cliquez sur "Se connecter" - vous êtes redirigé vers la page Universal Login d’Auth0 2. Terminez l’authentification - vous êtes redirigé vers votre application 3. Cliquez sur "Voir le profil" - vous voyez les renseignements de votre profil 4. Cliquez sur "Se déconnecter" - vous êtes déconnecté à la fois de votre application et d’Auth0 ***
## Utilisation avancée
Configurez le SDK pour demander un jeton d’accès afin d’appeler des API protégées : ```dart lib/auth0_service.dart theme={null} Auth0Service._internal() { auth0Web = Auth0Web( 'YOUR_AUTH0_DOMAIN', 'YOUR_AUTH0_CLIENT_ID', cacheLocation: CacheLocation.localStorage, ); } Future 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 : ```dart theme={null} Future 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}'); } } ``` Transmettez des paramètres supplémentaires au flux de connexion : ```dart theme={null} Future _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 _loginWithCustomScope() async { await auth0Service.auth0Web.loginWithRedirect( redirectUrl: 'http://localhost:3000', authorizationParams: AuthorizationParams( scope: 'openid profile email read:messages', audience: 'https://your-api.example.com', ), ); } ``` Mettez en place une gestion appropriée des erreurs d’authentification : ```dart theme={null} Future _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'), ), ], ), ); } ``` Vérifiez si l’utilisateur est déjà authentifié sans afficher la page de connexion : ```dart theme={null} Future checkAuthentication() async { try { final credentials = await auth0Service.auth0Web.onLoad(); return credentials != null; } catch (e) { return false; } } Future 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
### 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 : 1. Accédez à Auth0 Dashboard → Applications → Votre application → Settings 2. Vérifiez que **Allowed Callback URLs** inclut `http://localhost:3000` 3. 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` : ```html theme={null} ``` Ce script doit être présent avant la balise fermante ``. ### 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 :** 1. Assurez-vous que **Allowed Web Origins** inclut `http://localhost:3000` dans Auth0 Dashboard 2. Utilisez `cacheLocation: CacheLocation.localStorage` lors de la création de l’instance Auth0Web 3. 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 :** 1. Videz le cache du navigateur et le stockage local 2. Assurez-vous de ne pas ouvrir plusieurs onglets pendant la connexion 3. 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 :** 1. Ajoutez `http://localhost:3000` à **Allowed Web Origins** dans Auth0 Dashboard 2. 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](/docs/fr-ca/quickstart/native/flutter/interactive)** - Créez une application mobile native avec Auth0 * **[Appeler des API protégées](https://auth0.com/docs/secure/tokens/access-tokens)** - Utilisez des jetons d’accès pour envoyer des requêtes à vos API côté serveur * **[Personnaliser Universal Login](https://auth0.com/docs/customize/universal-login-pages)** - Adaptez votre expérience de connexion à votre image de marque * **[Ajouter des connexions sociales](https://auth0.com/docs/connections/social)** - Activez Google, GitHub et d’autres modes de connexion sociale * **[Mettre en œuvre MFA](https://auth0.com/docs/secure/multi-factor-authentication)** - Ajoutez l’authentification multifacteur ***
## Ressources
* **[Auth0 Flutter SDK GitHub](https://github.com/auth0/auth0-flutter)** - Code source et exemples * **[Documentation Flutter](https://docs.flutter.dev/)** - Pour en savoir plus sur Flutter * **[Auth0 Community](https://community.auth0.com/)** - Obtenez de l’aide de la communauté