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

# Ajouter Login à votre application Windows Flutter

> Ce guide explique comment intégrer Auth0 à une application de bureau Windows Flutter à l’aide du SDK Flutter d’Auth0 (bêta).

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

export const envSnippet = `AUTH0_DOMAIN={yourDomain}
AUTH0_CLIENT_ID={yourClientId}`;

<Note>
  **Prérequis :**

  * SDK Flutter 3.24.0+ et Dart 3.5.0+.
  * Windows 10 ou une version ultérieure.
  * Visual Studio 2022 avec la charge de travail **Desktop development with C++**.
  * Compte Auth0 — [inscrivez-vous gratuitement](https://auth0.com/signup).

  Cette fonctionnalité est en **bêta** (`auth0_flutter` 2.1.0-beta.1). L’API pourrait changer avant la disponibilité générale.
</Note>

Ce guide vous montre comment ajouter Login, Logout et l’affichage du profil utilisateur à une application de bureau Flutter pour Windows à l’aide du SDK `auth0_flutter` avec OAuth 2.0 [flux de code d’autorisation + PKCE](/fr-CA/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

<div id="get-started">
  ## Premiers pas
</div>

<Steps>
  <Step title="Créer un projet Flutter pour Windows" stepNumber={1}>
    Créez un nouveau projet Flutter avec prise en charge de Windows.

    ```shellscript theme={null}
    flutter create --platforms=windows my_app
    cd my_app
    ```

    Vérifiez que Windows est disponible :

    ```shellscript theme={null}
    flutter devices
    ```

    Vous devriez voir un appareil Windows de bureau dans la liste.

    <Tip>
      Exécutez `flutter doctor` pour vérifier que votre environnement est correctement configuré et que Visual Studio 2022 avec les outils de développement d’applications de bureau en C++ est détecté.
    </Tip>
  </Step>

  <Step title="Installer le SDK Auth0 Flutter" stepNumber={2}>
    Ajoutez la version bêta du SDK qui prend en charge Windows :

    ```shellscript theme={null}
    flutter pub add auth0_flutter:2.1.0-beta.1
    flutter pub add flutter_dotenv
    ```

    Votre fichier `pubspec.yaml` doit contenir :

    <Snippet file="quickstart/native/flutter-windows/pubspec.yaml.mdx" />

    <Tip>
      Le SDK Flutter d’Auth0 nécessite **Flutter 3.24.0+** et **Dart 3.5.0+**. La plateforme Windows exige aussi **Visual Studio 2022** avec la charge de travail **Développement d’applications de bureau en C++**.
    </Tip>
  </Step>

  <Step title="Configurer Auth0" stepNumber={3}>
    Créez ou configurez une application Auth0 avec les URL de callback requises pour l’authentification d’une application de bureau Windows.

    <Tabs>
      <Tab title="Configuration rapide">
        Créez une application **Native** dans votre Auth0 Dashboard avec les paramètres suivants :

        | Champ                 | Valeur                    |
        | --------------------- | ------------------------- |
        | Allowed Callback URLs | `auth0flutter://callback` |
        | Allowed Logout URLs   | `auth0flutter://callback` |

        Vos identifiants :

        * **Domaine:** `{yourDomain}`
        * **ID client:** `{yourClientId}`
      </Tab>

      <Tab title="CLI">
        ```shellscript theme={null}
        auth0 apps create \
          --name "My Flutter Windows App" \
          --type native \
          --callbacks "auth0flutter://callback" \
          --logout-urls "auth0flutter://callback"
        ```
      </Tab>

      <Tab title="Dashboard">
        1. Accédez à [Auth0 Dashboard](https://manage.auth0.com/) → **Applications > Applications**.
        2. Sélectionnez **Create Application**.
        3. Donnez-lui le nom "My Flutter Windows App" et choisissez **Native** comme type d’application.
        4. Accédez à l’onglet **Settings** de votre nouvelle application.
        5. Définissez **Allowed Callback URLs** sur `auth0flutter://callback`.
        6. Définissez **Allowed Logout URLs** sur `auth0flutter://callback`.
        7. Faites défiler la page vers le bas, puis cliquez sur **Save Changes**.
        8. Copiez les valeurs **Domaine** et **ID client** en haut des paramètres de l’application.
      </Tab>
    </Tabs>

    <Info>
      L’URL `auth0flutter://callback` est un schéma personnalisé qui redirige le callback du navigateur vers votre application de bureau une fois l’authentification terminée.
    </Info>
  </Step>

  <Step title="Configurer les variables d’environnement" stepNumber={4}>
    Créez un fichier `.env` à la racine de votre projet :

    <AuthCodeBlock children={envSnippet} language="shellscript" filename=".env" />

    Ajoutez le fichier `.env` aux ressources de Flutter dans `pubspec.yaml` :

    <Snippet file="quickstart/native/flutter-windows/pubspec-assets.yaml.mdx" />

    <Warning>
      N’ajoutez jamais votre fichier `.env` au contrôle de version. Ajoutez-le à `.gitignore`.
    </Warning>
  </Step>

  <Step title="Configurer le runner Windows" stepNumber={5}>
    Le flux d’authentification sous Windows nécessite la configuration du callback dans le runner de votre application. Le plugin Flutter ne reçoit pas automatiquement les activations de schéma de protocole du système d’exploitation — vous devez donc ajouter la restriction à une seule instance et la redirection des URI.

    Remplacez le contenu de `windows/runner/main.cpp` :

    <Snippet file="quickstart/native/flutter-windows/main.cpp.mdx" />

    Ce code :

    * Force l’exécution en instance unique au moyen d’un mutex Windows.
    * Capture les URI `auth0flutter://callback` transmises comme arguments de ligne de commande.
    * Redirige les URI des lancements secondaires vers l’instance déjà en cours d’exécution au moyen d’un canal nommé.
    * Définit la variable d’environnement `PLUGIN_STARTUP_URL` que le plugin Auth0 lira.
  </Step>

  <Step title="Enregistrez le schéma d’URL personnalisé" stepNumber={6}>
    Enregistrez `auth0flutter` comme schéma d’URL personnalisé pour que Windows achemine les URI de callback vers votre application.

    Créez un fichier `windows/url_scheme.reg` :

    <Snippet file="quickstart/native/flutter-windows/url_scheme.reg.mdx" />

    Remplacez `C:\path\to\your\app.exe` par le chemin réel de votre fichier exécutable généré. Pendant le développement, il s’agit généralement de :

    ```text theme={null}
    build\windows\x64\runner\Debug\my_app.exe
    ```

    Double-cliquez sur le fichier `.reg` pour l’importer dans le registre de Windows.

    <Info>
      Pour un déploiement en production, enregistrez le schéma d’URL personnalisé par programmation dans le programme d’installation de votre application (MSIX, Inno Setup, etc.) plutôt que de vous fier à un fichier `.reg`.
    </Info>

    **Vérifiez que le schéma fonctionne :**

    Ouvrez l’invite de commandes et exécutez :

    ```shellscript theme={null}
    start auth0flutter://test
    ```

    Votre application devrait se lancer (ou s’afficher au premier plan si elle est déjà ouverte).
  </Step>

  <Step title="Implémenter la connexion et la déconnexion" stepNumber={7}>
    Créez `lib/auth_service.dart` pour gérer l’authentification Windows :

    <Snippet file="quickstart/native/flutter-windows/auth_service.dart.mdx" />

    <Info>
      Le SDK Flutter Windows d’Auth0 ne prend actuellement pas en charge la gestion des identifiants. Vous devez stocker manuellement les identifiants si vous avez besoin que les sessions persistent d’un redémarrage de l’application à l’autre.
    </Info>
  </Step>

  <Step title="Afficher les renseignements du profil utilisateur" stepNumber={8}>
    Créez l’interface utilisateur principale de l’application dans le fichier `lib/main.dart` :

    <Snippet file="quickstart/native/flutter-windows/main.dart.mdx" />
  </Step>

  <Step title="Lancez votre application" stepNumber={9}>
    Compilez et exécutez l’application :

    ```shellscript theme={null}
    flutter run -d windows
    ```

    **Flux attendu :**

    1. L’application se lance avec un bouton **Log In**.
    2. Sélectionnez **Log In**. Votre navigateur système ouvre la page Auth0 Universal Login.
    3. Terminez l’authentification dans le navigateur.
    4. Le navigateur redirige vers `auth0flutter://callback` → votre application revient à l’avant-plan.
    5. Le nom, le courriel et la photo de profil de l’utilisateur s’affichent.

    <Warning>
      Assurez-vous que le schéma d’URL personnalisé est enregistré (étape 6) avant de tester. Sinon, le callback du navigateur ne pourra pas joindre votre application.
    </Warning>
  </Step>
</Steps>

<Check>
  **Vérification**

  Vous devriez maintenant disposer d’une expérience de connexion Auth0 entièrement fonctionnelle dans votre application Flutter Windows. L’application ouvre le navigateur système pour Auth0 Universal Login, reçoit le callback au moyen du schéma d’URL personnalisé et affiche le profil de l’utilisateur authentifié.
</Check>

***

<div id="troubleshoot-advanced-use">
  ## Dépannage et utilisation avancée
</div>

<Accordion title="Problèmes courants et solutions">
  ### Le navigateur s’ouvre, mais l’application ne reçoit pas le callback

  **Symptôme** : la connexion Auth0 réussit dans le navigateur, mais l’application ne reçoit jamais les identifiants.

  **Correctif :**

  1. Ouvrez l’Éditeur du Registre → `HKEY_CURRENT_USER\Software\Classes\auth0flutter\shell\open\command` et confirmez le chemin vers votre fichier `.exe`.
  2. Testez avec `start auth0flutter://test` dans l’Invite de commandes — votre application devrait se lancer.
  3. Assurez-vous que `windows/runner/main.cpp` inclut le code du serveur de pipe et du mutex.
  4. Vérifiez qu’aucune ancienne instance n’est encore en cours d’exécution dans le Gestionnaire des tâches.
  5. Recompilez complètement : `flutter clean && flutter run -d windows`.

  ### L’authentification expire après 5 minutes

  **Symptôme** : la connexion semble bloquée et finit par échouer.

  **Correctif :** l’application n’a jamais reçu l’URI de callback. Vérifiez ce qui suit :

  1. L’entrée du registre pointe vers le bon chemin de l’exécutable.
  2. Le nom du mutex `auth0flutter_single_instance_mutex` est cohérent dans `main.cpp`.
  3. Aucun pare-feu ni antivirus ne bloque le pipe nommé.
  4. Fermez toutes les anciennes instances et recompilez.

  ### Une deuxième instance de l’application se lance au lieu de transférer l’URI

  **Symptôme** : une nouvelle fenêtre s’ouvre au lieu que l’application existante reçoive le callback.

  **Correctif :**

  1. Fermez toutes les instances en cours d’exécution dans le Gestionnaire des tâches.
  2. Assurez-vous que le nom du mutex est cohérent dans `main.cpp`.
  3. Recompilez avec la commande suivante : `flutter clean && flutter run -d windows`.

  ### WindowsWebAuthentication introuvable

  **Symptôme** : erreur de compilation faisant référence à `windowsWebAuthentication`.

  **Correctif :** assurez-vous que votre `pubspec.yaml` précise la version bêta :

  ```yaml theme={null}
  dependencies:
    auth0_flutter: 2.1.0-beta.1
  ```

  Exécutez `flutter pub get` pour mettre à jour.

  ### Erreur de non-correspondance de Callback URL

  **Symptôme** : erreur "redirect\_uri\_mismatch" renvoyée par Auth0.

  **Correctif :**

  1. Vérifiez que **Allowed Callback URLs** dans [Auth0 Dashboard](https://manage.auth0.com/) → paramètres de l’application est exactement `auth0flutter://callback`.
  2. Assurez-vous que le paramètre `appCustomURL` dans votre code correspond à : `'auth0flutter://callback'`.
  3. Vérifiez qu’il n’y a pas de barre oblique finale ni d’espace superflu.
</Accordion>

<Accordion title="Utilisation d’un serveur intermédiaire">
  Lorsque Auth0 redirige directement vers un schéma personnalisé, le navigateur peut afficher une invite ou laisser un onglet vide. Pour une expérience plus fluide, utilisez un serveur HTTPS intermédiaire :

  1. Configurez un point de terminaison sur le serveur (par exemple, `https://your-app.example.com/callback`) qui redirige vers `auth0flutter://callback?code=...&state=...`.
  2. Dans [Auth0 Dashboard](https://manage.auth0.com/) → paramètres de l’application, définissez **Allowed Callback URLs** à `https://your-app.example.com/callback`.
  3. Passez les deux URL à la méthode de connexion :

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    redirectUrl: 'https://your-app.example.com/callback',
  );
  ```

  La page du serveur peut afficher "Redirecting..." et se fermer d’elle-même pour une expérience plus propre.
</Accordion>

<Accordion title="Scopes et Audience personnalisés">
  Demandez des scopes supplémentaires ou une audience d’API :

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    scopes: {'openid', 'profile', 'email', 'read:messages'},
    audience: 'https://your-api.example.com',
  );
  ```

  Configurez l’API dans [Auth0 Dashboard](https://manage.auth0.com/) → **Applications > APIs** avant d’utiliser le paramètre `audience`.
</Accordion>

***

<div id="next-steps">
  ## Prochaines étapes
</div>

* [SDK Flutter d’Auth0 sur GitHub](https://github.com/auth0/auth0-flutter) — code source et suivi des problèmes.
* [SDK Flutter d’Auth0 sur pub.dev](https://pub.dev/packages/auth0_flutter) — référence d’API.
* [Guide de démarrage rapide Flutter (Android, iOS, macOS, Web)](https://auth0.com/docs/quickstart/native/flutter) — guides pour d’autres plateformes.
* [Bonnes pratiques de stockage des jetons](https://auth0.com/docs/secure/tokens/token-storage) — gestion sécurisée des informations d’identification.
* [Auth0 Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) — personnaliser l’expérience de connexion.