Ajouter la connexion à votre application Web Flutter

Prérequis : Avant de commencer, assurez-vous d’avoir installé ce qui suit :

Flutter 3.0 ou une version ultérieure, configuré pour le Web
Dart 2.17 ou une version ultérieure
Une connaissance de base de l’interface de ligne de commande Flutter

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 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éer un nouveau projet

Créez une nouvelle application Flutter Web pour ce guide de démarrage rapide :

flutter create --platforms=web auth0_flutter_web

Ouvrez le projet :

cd auth0_flutter_web

Installer le SDK Flutter d’Auth0

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

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 <script> suivante dans 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 application Auth0

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 :

CLI
Dashboard

Exécutez la commande shell suivante à la racine de votre projet pour créer une application 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

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 :

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

Ensuite, ouvrez une session avec auth0 login.

Accédez au Dashboard Auth0
Allez à 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 :

Setting	Value
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 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.

Configurer le SDK

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 :

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 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.

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 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

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

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

Cliquez sur “Log In” - vous êtes redirigé vers la page Universal Login d’Auth0
Terminez l’authentification - vous êtes redirigé vers votre application
Cliquez sur “View Profile” - vous voyez les renseignements de votre compte
Cliquez sur “Log Out” - vous êtes déconnecté à la fois de votre application et d’Auth0

Utilisation avancée

Appel d’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 en cas d’échec de l’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 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

Problèmes courants et solutions

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 :

Accédez à Auth0 Dashboard → Applications → Your App → Settings
Vérifiez que Allowed Callback URLs inclut http://localhost:3000
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 :

<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 l’actualisation de la page

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

Assurez-vous que Allowed Web Origins inclut http://localhost:3000 dans le tableau de bord Auth0
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 « État invalide »

Problème : L’état ne correspond pas pendant le rappel 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 partage de ressources entre origines croisées.Solution :

Ajoutez http://localhost:3000 à Allowed Web Origins dans le tableau de bord Auth0
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 - Créez une application mobile native avec Auth0
Appeler des API protégées - Utilisez des jetons d’accès pour appeler vos API d’arrière-plan
Personnaliser Universal Login - Adaptez l’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 l’AMF - Ajoutez l’authentification multifacteur

Ressources

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

​Pour commencer

​Utilisation avancée

​Dépannage

​Erreur « URL de rappel non conforme »

​L’authentification ne fonctionne pas

​L’utilisateur est déconnecté après l’actualisation de la page

​Erreur « État invalide »

​Erreurs CORS dans la console du navigateur

​Prochaines étapes

​Ressources

Pour commencer

Utilisation avancée

Dépannage

Erreur « URL de rappel non conforme »

L’authentification ne fonctionne pas

L’utilisateur est déconnecté après l’actualisation de la page

Erreur « État invalide »

Erreurs CORS dans la console du navigateur

Prochaines étapes

Ressources