> ## 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 montre comment intégrer Auth0 à une application Web Flutter à l’aide du SDK Flutter d’Auth0. # Ajouter la connexion à votre application Web Flutter export const HowToSchema = () => ; Si vous utilisez un assistant de codage 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-quickstart --skill auth0-flutter-web ``` **Demandez ensuite à votre assistant IA :** ```text theme={null} Add Auth0 authentication to my Flutter web app ``` Votre assistant IA créera automatiquement votre application Auth0, récupérera les informations d’identification, ajoutera la dépendance au SDK auth0\_flutter, configurera web/index.html, définira les URL de callback et implémentera les flux de connexion et de déconnexion. [Documentation complète d’Agent Skills →](/fr-CA/quickstart/agent-skills) **Prérequis :** Avant de commencer, assurez-vous d’avoir installé ce qui suit : * **[Flutter](https://flutter.dev/)** 3.0 ou une version ultérieure, configuré pour le Web * **[Dart](https://dart.dev/)** 2.17 ou une version ultérieure * Une connaissance de base de l’[interface de ligne de commande Flutter](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 guide de démarrage rapide montre comment ajouter l’authentification Auth0 à une application Web Flutter. Vous créerez une application monopage sécurisée avec des fonctionnalités de connexion, de déconnexion et de profil d’utilisateur à l’aide du SDK Flutter d’Auth0. Créez une nouvelle application Flutter Web pour ce guide de démarrage rapide : ```shellscript theme={null} flutter create --platforms=web auth0_flutter_web ``` Ouvrez le projet : ```shellscript theme={null} cd auth0_flutter_web ``` Ajoutez le SDK Flutter d’Auth0 à votre projet à l’aide de la CLI Flutter : ```shellscript theme={null} flutter pub add auth0_flutter ``` Le SDK nécessite 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 sur votre tenant Auth0. Vous pouvez le faire automatiquement en exécutant une commande CLI, ou manuellement dans le Dashboard : Exécutez la commande shell suivante à la racine de votre projet pour créer une application Auth0 : **macOS / Linux :** ```bash theme={null} 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) :** ```powershell theme={null} $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 ``` Copiez les valeurs **domain** et **client\_id** dans la sortie. Vous en aurez besoin à l’étape suivante. Si vous n’avez pas encore installé l’Auth0 CLI, exécutez : ```bash theme={null} brew tap auth0/auth0-cli && brew install auth0 ``` Ensuite, ouvrez une session avec `auth0 login`. 1. Accédez au [Dashboard Auth0](https://manage.auth0.com/dashboard/) 2. Allez à **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 : | Setting | Value | | --------------------- | ----------------------- | | 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** dans la section **Basic Information** Les **Allowed Callback URLs** constituent une mesure de sécurité essentielle pour s’assurer que les utilisateurs sont redirigés de façon sécuritaire vers votre application après l’authentification. Les **Allowed Logout URLs** sont essentielles pour offrir une expérience fluide au moment de la déconnexion. Les **Allowed Web Origins** sont indispensables à l’authentification silencieuse. Sans ce paramètre, 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` à l’aide des valeurs de **domaine** et d’**ID client** d’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 ID client cacheLocation: CacheLocation.localStorage, // Maintenir les sessions ); } } ``` Remplacez `YOUR_AUTH0_DOMAIN` par le domaine de votre locataire Auth0 (p. ex. `dev-abc123.us.auth0.com`) et `YOUR_AUTH0_CLIENT_ID` par l’ID client de votre application dans le tableau de bord. Définir `cacheLocation: CacheLocation.localStorage` permet de conserver les sessions après le 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 traiter le callback d’authentification * `loginWithRedirect()` redirige les utilisateurs vers la page de connexion universelle d’Auth0 * `logout()` supprime la session et redirige vers votre application * Les informations 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 ``` **Point de 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 "Log In" - vous êtes redirigé vers la page Universal Login d’Auth0 2. Terminez l’authentification - vous êtes redirigé vers votre application 3. Cliquez sur "View Profile" - vous voyez les renseignements de votre compte 4. Cliquez sur "Log Out" - 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 en cas d’échec de l’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 silencieusement 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 « URL de rappel non conforme » **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 indiquée dans le tableau de bord Auth0 : 1. Accédez à Auth0 Dashboard → Applications → Your App → Settings 2. Vérifiez que **Allowed Callback URLs** inclut `http://localhost:3000` 3. L’URL doit correspondre exactement (sans barre oblique finale, sauf si elle est aussi incluse 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 bien 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 l’actualisation de la page **Problème :** La session de l’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 le tableau de bord Auth0 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 « État invalide » **Problème :** L’état ne correspond pas pendant le rappel 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 partage de ressources entre origines croisées. **Solution :** 1. Ajoutez `http://localhost:3000` à **Allowed Web Origins** dans le tableau de bord Auth0 2. Assurez-vous d’utiliser le port 3000 (conformément à votre configuration) ***
## Prochaines étapes
Maintenant que l’authentification fonctionne, pensez à explorer les options suivantes : * **[Démarrage rapide de l’application native Flutter](/fr-CA/docs/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 appeler vos API d’arrière-plan * **[Personnaliser Universal Login](https://auth0.com/docs/customize/universal-login-pages)** - Adaptez l’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 l’AMF](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 * **[Communauté Auth0](https://community.auth0.com/)** - Obtenez de l’aide auprès de la communauté