> ## 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 le Login à votre application .NET MAUI

> Ce guide explique comment intégrer Auth0 à une application .NET MAUI à l’aide du SDK Auth0.OidcClient.MAUI.

export const HowToSchema = () => <script type="application/ld+json">
    {'{"@context":"https://schema.org","@type":"HowTo"}'}
  </script>;

<HowToSchema />

<Accordion title="Utiliser l’IA pour intégrer Auth0" icon="microchip-ai" iconType="solid" defaultOpen>
  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 des [agent skills](https://agentskills.io/home).

  **Installer :**

  ```bash theme={null}
  npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-maui
  ```

  **Ensuite, demandez à votre assistant IA :**

  ```text theme={null}
  Add Auth0 authentication to my .NET MAUI app
  ```

  Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera le SDK Auth0 OidcClient MAUI, configurera les URL de rappel et mettra en œuvre les flux de Login et de déconnexion. [Documentation complète sur les agent skills →](/fr-CA/docs/quickstart/agent-skills)
</Accordion>

Ce guide explique comment intégrer Auth0 à une application .NET MAUI à l’aide du [SDK Auth0.OidcClient.MAUI](https://github.com/auth0/auth0-oidc-client-net). Au terme de ce guide, votre application prendra en charge le Login, la déconnexion et l’affichage des informations du profil utilisateur sur **Android**, **iOS**, **macOS** et **Windows**, à partir d’une seule base de code.

Ce guide utilise la version **1.x** de `Auth0.OidcClient.MAUI`.

<Note>
  ## Prérequis

  * **SDK .NET 8 ou .NET 9** installé ([télécharger](https://dotnet.microsoft.com/download))
  * **Charge de travail MAUI** installée
  * Un **compte Auth0** ([inscrivez-vous gratuitement](https://auth0.com/signup))
  * **Visual Studio 2022** (17.8+), **JetBrains Rider** ou **VS Code** avec l’extension .NET MAUI
</Note>

Vérifiez votre environnement :

```shellscript theme={null}
dotnet --version        # Devrait être 8.x ou 9.x
dotnet workload list    # Devrait inclure maui
```

Si la charge de travail MAUI n’est pas installée, installez-la :

```shellscript theme={null}
dotnet workload install maui
```

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

<Steps>
  <Step title="Configurez votre application Auth0" stepNumber={1}>
    Configurez votre application Auth0 afin d’avoir les identifiants dont votre application MAUI a besoin.

    1. Accédez à **[Auth0 Dashboard](https://manage.auth0.com/dashboard/) > Applications > Applications**
    2. Sélectionnez **Create Application**
    3. Entrez un nom pour votre application (par exemple, "My MAUI App"), sélectionnez **Native** comme type d’application, puis sélectionnez **Create**
    4. Accédez à l’onglet **Settings** de la page **Application Details**
    5. Prenez en note les valeurs **Domaine** et **ID client** — vous en aurez besoin plus tard

    Dans l’onglet **Settings**, faites défiler la page jusqu’à **Application URIs** et configurez les URL suivantes. Les applications .NET MAUI utilisent un schéma d’URI personnalisé (par exemple, `myapp://callback`) plutôt qu’une URL HTTP.

    **Allowed Callback URLs:**

    ```text theme={null}
    myapp://callback
    ```

    **URL de déconnexion autorisées :**

    ```text theme={null}
    myapp://callback
    ```

    <Tip>
      Choisissez un schéma propre à votre application. Un nom de domaine inversé convient bien, par exemple `com.mycompany.myapp://callback`.
    </Tip>

    Sélectionnez **Enregistrer les modifications**.

    <Check>
      Vous avez une application native dans Auth0 avec votre **Domaine** et votre **ID client** en main, ainsi que les URL de rappel et de déconnexion configurées.
    </Check>
  </Step>

  <Step title="Créez votre projet MAUI" stepNumber={2}>
    Si vous avez déjà un projet .NET MAUI, passez à l’étape 3. Sinon, créez-en un à l’aide de la CLI .NET :

    ```shellscript theme={null}
    dotnet new maui -n MyMauiApp
    cd MyMauiApp
    ```
  </Step>

  <Step title="Installer le SDK MAUI d’Auth0" stepNumber={3}>
    Ajoutez le package NuGet `Auth0.OidcClient.MAUI` à votre projet :

    ```shellscript theme={null}
    dotnet add package Auth0.OidcClient.MAUI
    ```

    <Check>
      Exécutez `dotnet restore` pour confirmer que le package s’est installé sans erreur.
    </Check>
  </Step>

  <Step title="Configurer le traitement du callback propre à la plateforme" stepNumber={4}>
    Les applications .NET MAUI doivent enregistrer un gestionnaire de rappel sur chaque plateforme afin que le navigateur système puisse rediriger l’utilisateur vers votre application après l’authentification. Suivez les instructions pour chaque plateforme ciblée.

    <Tabs>
      <Tab title="Android">
        Créez un nouveau fichier dans `Platforms/Android/WebAuthenticatorActivity.cs` :

        ```csharp Platforms/Android/WebAuthenticatorActivity.cs lines theme={null}
        using Android.App;
        using Android.Content;
        using Android.Content.PM;

        namespace MyMauiApp.Platforms.Android;

        [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
        [IntentFilter(new[] { Intent.ActionView },
                      Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
                      DataScheme = CALLBACK_SCHEME)]
        public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
        {
            const string CALLBACK_SCHEME = "myapp";
        }
        ```

        Remplacez `myapp` par le schéma d’URI que vous avez configuré à l’étape 1.

        <Note>
          La valeur `CALLBACK_SCHEME` doit correspondre exactement au schéma indiqué dans votre `RedirectUri` et dans **Allowed Callback URLs** dans Auth0.
        </Note>
      </Tab>

      <Tab title="Windows">
        Le flux de rappel d’Auth0 sous Windows repose sur l’activation par protocole URI, ce qui exige que votre application soit **packagée** (MSIX). Le modèle .NET MAUI par défaut crée une application packagée; aucune modification n’est donc nécessaire si vous avez utilisé `dotnet new maui` ou le modèle MAUI de Visual Studio.

        <Info>
          Si votre `.csproj` contient `<WindowsPackageType>None</WindowsPackageType>`, votre application n’est **pas packagée** et l’activation par protocole ne fonctionnera pas. Supprimez cette ligne ou définissez-la à `<WindowsPackageType>MSIX</WindowsPackageType>` pour utiliser une application packagée. Pour en savoir plus, consultez la [documentation .NET MAUI sur le packaging Windows](https://learn.microsoft.com/en-us/dotnet/maui/windows/deployment-overview).
        </Info>

        Deux modifications sont requises : enregistrer le protocole URI et gérer son activation.

        **1. Enregistrez le protocole** dans `Platforms/Windows/Package.appxmanifest`. Ajoutez le bloc `<Extensions>` à l’intérieur de l’élément `<Application>` existant :

        ```xml Platforms/Windows/Package.appxmanifest lines theme={null}
        <Applications>
          <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
            <Extensions>
              <uap:Extension Category="windows.protocol">
                <uap:Protocol Name="myapp"/>
              </uap:Extension>
            </Extensions>
          </Application>
        </Applications>
        ```

        **2. Gérez l’activation** dans `Platforms/Windows/App.xaml.cs`. Ajoutez l’appel à `CheckRedirectionActivation` comme **première ligne** du constructeur :

        ```csharp Platforms/Windows/App.xaml.cs lines theme={null}
        public App()
        {
            if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
                return;

            this.InitializeComponent();
        }
        ```
      </Tab>

      <Tab title="iOS / macOS">
        Aucune configuration propre à la plateforme n’est requise. Le SDK utilise automatiquement `ASWebAuthenticationSession` par l’intermédiaire du `WebAuthenticator` de MAUI.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Ajouter la connexion et la déconnexion" stepNumber={5}>
    Vous devez créer ou modifier trois fichiers : un ViewModel avec la logique de connexion et de déconnexion, une page XAML pour l’interface utilisateur et un fichier code-behind pour les relier.

    <Tabs>
      <Tab title="MainPageViewModel.cs">
        Créez le ViewModel dans `ViewModels/MainPageViewModel.cs` :

        ```csharp ViewModels/MainPageViewModel.cs lines theme={null}
        using System.ComponentModel;
        using System.Runtime.CompilerServices;
        using System.Windows.Input;
        using Auth0.OidcClient;

        namespace MyMauiApp.ViewModels;

        public class MainPageViewModel : INotifyPropertyChanged
        {
            private readonly Auth0Client _client;
            private string _name;
            private string _email;
            private bool _isAuthenticated;

            public event PropertyChangedEventHandler PropertyChanged;

            public string Name
            {
                get => _name;
                set { _name = value; OnPropertyChanged(); }
            }

            public string Email
            {
                get => _email;
                set { _email = value; OnPropertyChanged(); }
            }

            public bool IsAuthenticated
            {
                get => _isAuthenticated;
                set
                {
                    _isAuthenticated = value;
                    OnPropertyChanged();
                    OnPropertyChanged(nameof(IsNotAuthenticated));
                }
            }

            public bool IsNotAuthenticated => !IsAuthenticated;

            public ICommand LoginCommand { get; }
            public ICommand LogoutCommand { get; }

            public MainPageViewModel(Auth0Client client)
            {
                _client = client;
                LoginCommand = new Command(async () => await LoginAsync());
                LogoutCommand = new Command(async () => await LogoutAsync());
            }

            private async Task LoginAsync()
            {
                var loginResult = await _client.LoginAsync();

                if (loginResult.IsError)
                {
                    if (loginResult.Error == "UserCancel")
                        return; // L’utilisateur a fermé le navigateur — ce n’est pas une erreur

                    await Shell.Current.DisplayAlert("Échec de la connexion", loginResult.Error, "OK");
                    return;
                }

                // Lire les claims du profil utilisateur à partir de l’ID Token
                Name = loginResult.User.FindFirst(c => c.Type == "name")?.Value;
                Email = loginResult.User.FindFirst(c => c.Type == "email")?.Value;
                IsAuthenticated = true;
            }

            private async Task LogoutAsync()
            {
                await _client.LogoutAsync();

                Name = null;
                Email = null;
                IsAuthenticated = false;
            }

            private void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        ```
      </Tab>

      <Tab title="MainPage.xaml">
        Configurez l’interface utilisateur dans `MainPage.xaml` :

        ```xml MainPage.xaml lines theme={null}
        <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="MyMauiApp.MainPage">

            <VerticalStackLayout Spacing="20" Padding="30" VerticalOptions="Center">

                <!-- Affiché lorsque l’utilisateur est déconnecté -->
                <Button Text="Se connecter"
                        Command="{Binding LoginCommand}"
                        IsVisible="{Binding IsNotAuthenticated}" />

                <!-- Affiché lorsque l’utilisateur est connecté -->
                <Label Text="{Binding Name, StringFormat='Bienvenue, {0}!'}"
                       IsVisible="{Binding IsAuthenticated}"
                       FontSize="24"
                       HorizontalOptions="Center" />

                <Label Text="{Binding Email}"
                       IsVisible="{Binding IsAuthenticated}"
                       HorizontalOptions="Center" />

                <Button Text="Se déconnecter"
                        Command="{Binding LogoutCommand}"
                        IsVisible="{Binding IsAuthenticated}" />

            </VerticalStackLayout>
        </ContentPage>
        ```
      </Tab>

      <Tab title="MainPage.xaml.cs">
        Définissez le BindingContext dans `MainPage.xaml.cs` :

        ```csharp MainPage.xaml.cs lines theme={null}
        namespace MyMauiApp;

        public partial class MainPage : ContentPage
        {
            public MainPage(MainPageViewModel viewModel)
            {
                InitializeComponent();
                BindingContext = viewModel;
            }
        }
        ```
      </Tab>
    </Tabs>

    <Check>
      Votre projet contient maintenant un ViewModel avec des commandes de connexion et de déconnexion, une page XAML avec liaison de données et un code-behind relié.
    </Check>
  </Step>

  <Step title="Enregistrer les services et instancier le client Auth0" stepNumber={6}>
    Maintenant, enregistrez `Auth0Client`, le ViewModel et la page à l’aide de l’injection de dépendances dans `MauiProgram.cs`. Cela connecte le tout de sorte que le client Auth0 soit injecté dans le ViewModel, et que le ViewModel soit injecté dans la page :

    ```csharp MauiProgram.cs lines theme={null}
    using Auth0.OidcClient;
    using MyMauiApp.ViewModels;

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            // Configurer l'application Auth0 avec vos identifiants de l'étape 1
            builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
            {
                Domain = "{yourDomain}",
                ClientId = "{yourClientId}",
                RedirectUri = "myapp://callback",
                PostLogoutRedirectUri = "myapp://callback"
            }));

            // Enregistrer la page et le ViewModel créés à l'étape 5
            builder.Services.AddTransient<MainPage>();
            builder.Services.AddTransient<MainPageViewModel>();

            return builder.Build();
        }
    }
    ```

    Remplacez `{yourDomain}` et `{yourClientId}` par les valeurs indiquées dans les paramètres de votre application Auth0 (étape 1).
    `RedirectUri` et `PostLogoutRedirectUri` sont **obligatoires** pour les applications MAUI. Utilisez la même URL de rappel que celle saisie dans l’Auth0 Dashboard.
  </Step>

  <Step title="Lancez votre application" stepNumber={7}>
    Compilez et exécutez votre application .NET MAUI

    **Flux attendu :**

    1. L’application se lance et affiche le bouton **Se connecter**
    2. Touchez **Se connecter** → le navigateur système s’ouvre sur Universal Login d’Auth0
    3. Terminez l’authentification (créez un compte ou connectez-vous)
    4. Le navigateur vous redirige vers votre application
    5. L’application affiche votre nom et votre courriel avec un bouton **Se déconnecter**
  </Step>
</Steps>

<Check>
  Vous avez maintenant une expérience de connexion Auth0 entièrement fonctionnelle dans votre application .NET MAUI.
</Check>

***

<div id="troubleshooting">
  ## Dépannage
</div>

<AccordionGroup>
  <Accordion title="Incompatibilité de l’URL de rappel">
    **Symptôme** : Le navigateur affiche « Callback URL mismatch. The provided redirect\_uri is not in the list of allowed callback URLs. »

    **Correctif :**

    1. Vérifiez que le **Client ID** dans votre code correspond à l’application que vous avez configurée dans l’Auth0 Dashboard
    2. Videz le champ **Allowed Callback URLs** et retapez `myapp://callback` manuellement — le copier-coller ajoute souvent des espaces ou des sauts de ligne invisibles à la fin
    3. Assurez-vous que la valeur correspond exactement : pas de barre oblique finale, uniquement des minuscules, aucun espace
    4. Sélectionnez **Save Changes** dans l’Auth0 Dashboard et vérifiez que la valeur a bien été enregistrée
    5. Vérifiez le paramètre de requête `redirect_uri` dans la barre d’adresse du navigateur pour voir ce que votre application envoie réellement
  </Accordion>

  <Accordion title="Android : l’application ne revient pas depuis le navigateur">
    **Symptôme** : Le navigateur s’ouvre pour la connexion, mais ne redirige jamais vers l’application.

    **Correctif :**

    1. Vérifiez que `DataScheme` dans `WebAuthenticatorActivity.cs` correspond au schéma de votre `RedirectUri`
    2. Assurez-vous que l’activité a `Exported = true`
    3. Vérifiez que les **Allowed Callback URLs** dans l’Auth0 Dashboard correspondent exactement
  </Accordion>

  <Accordion title="Windows : la connexion semble bloquée">
    **Symptôme** : Le navigateur s’ouvre, mais une deuxième instance de l’application s’ouvre au lieu de reprendre la session.

    **Correctif :** Assurez-vous que `Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation()` est appelée comme **toute première ligne** du constructeur `App` dans `Platforms/Windows/App.xaml.cs`, et que le nom du protocole dans `Package.appxmanifest` correspond au schéma de votre URI de rappel.
  </Accordion>

  <Accordion title="Windows : l’activation du protocole ne fonctionne pas">
    **Symptôme** : Après la connexion, le navigateur affiche une erreur ou rien ne se passe — l’application ne reçoit jamais l’URL de rappel.

    **Correctif :** Votre application doit être une application **packagée** (MSIX). Vérifiez votre fichier `.csproj` pour y trouver un élément `<WindowsPackageType>` :

    * S’il est défini à `None`, l’activation du protocole n’est pas disponible. Supprimez la ligne ou remplacez-la par `<WindowsPackageType>MSIX</WindowsPackageType>`.
    * Si l’élément est absent, votre application est déjà packagée par défaut — vérifiez que `Package.appxmanifest` contient l’extension `<uap:Protocol>` de l’étape 4.
  </Accordion>

  <Accordion title="Claims manquantes dans le profil de l’utilisateur">
    **Symptôme** : Les claims `name`, `email` ou `picture` sont absentes de `loginResult.User`.

    **Correctif :** Vérifiez que `openid profile email` sont inclus dans `Auth0ClientOptions.Scope`. Si vous avez personnalisé le scope, assurez-vous que `openid` est toujours présent.
  </Accordion>
</AccordionGroup>

***

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

Vous disposez maintenant d’une intégration Auth0 fonctionnelle dans votre application .NET MAUI. Explorez les sujets suivants pour approfondir votre implémentation :

<Accordion title="Jetons d’actualisation">
  Le SDK Auth0 MAUI prend en charge les jetons d’actualisation pour renouveler les sessions de façon silencieuse, sans redemander à l’utilisateur de s’authentifier.

  ### Activer les jetons d’actualisation

  Ajoutez `offline_access` à la propriété `Scope` :

  ```csharp expandable lines theme={null}
  builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
  {
      Domain = "{yourDomain}",
      ClientId = "{yourClientId}",
      RedirectUri = "myapp://callback",
      PostLogoutRedirectUri = "myapp://callback",
      Scope = "openid profile email offline_access"
  }));
  ```

  ### Utiliser les jetons d’actualisation

  Après la connexion, stockez le jeton d’actualisation et utilisez-le pour renouveler la session de façon silencieuse :

  ```csharp expandable lines theme={null}
  // Après la connexion
  var refreshToken = loginResult.RefreshToken;

  // Plus tard, renouveler la session
  var refreshResult = await _client.RefreshTokenAsync(refreshToken);

  if (!refreshResult.IsError)
  {
      var newAccessToken = refreshResult.AccessToken;
      var newIdToken = refreshResult.IdentityToken;
  }
  ```

  <Info>
    Si `RefreshToken` est `null` après la connexion, assurez-vous que **Allow Offline Access** est activé dans les paramètres de votre API dans l’Auth0 Dashboard (lorsque vous utilisez un paramètre `audience`).
  </Info>
</Accordion>

<Accordion title="Appeler une API protégée">
  Pour obtenir un jeton d’accès associé à votre API, définissez `Scope` et transmettez un paramètre `audience` à `LoginAsync()` :

  ```csharp expandable lines theme={null}
  var loginResult = await _client.LoginAsync(new
  {
      audience = "https://myapi.example.com"
  });

  // Le jeton d’accès est maintenant associé à votre API
  var accessToken = loginResult.AccessToken;

  var httpClient = new HttpClient();
  httpClient.DefaultRequestHeaders.Authorization =
      new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", accessToken);

  var response = await httpClient.GetAsync("https://myapi.example.com/posts");
  ```
</Accordion>

<Accordion title="Organisations (B2B/entreprise)">
  Authentifiez les utilisateurs au sein d’une organisation Auth0 précise :

  ```csharp expandable lines theme={null}
  var loginResult = await _client.LoginAsync(new
  {
      organization = "org_abc123"
  });
  ```

  Pour en savoir plus, consultez [Organisations](/fr-CA/docs/manage-users/organizations).
</Accordion>

<Accordion title="Forcer une nouvelle authentification">
  Utilisez `MaxAge` pour forcer une nouvelle authentification après un délai défini :

  ```csharp expandable lines theme={null}
  new Auth0ClientOptions
  {
      Domain = "{yourDomain}",
      ClientId = "{yourClientId}",
      RedirectUri = "myapp://callback",
      PostLogoutRedirectUri = "myapp://callback",
      MaxAge = TimeSpan.FromMinutes(30)
  }
  ```
</Accordion>

<Accordion title="Personnaliser Universal Login">
  Adaptez la page de connexion Auth0 à votre image de marque, notamment les couleurs, les logos et le texte.

  Pour en savoir plus, consultez [Personnaliser Universal Login](/fr-CA/docs/customize/universal-login-pages).
</Accordion>

***

<div id="additional-resources">
  ## Ressources supplémentaires
</div>

<CardGroup cols={3}>
  <Card title="Dépôt du SDK" icon="github" href="https://github.com/auth0/auth0-oidc-client-net">
    Code source, exemples et référence de l’API
  </Card>

  <Card title="Bonnes pratiques relatives aux jetons" icon="key" href="/fr-CA/docs/secure/tokens/token-best-practices">
    Bonnes pratiques de sécurité pour les jetons
  </Card>

  <Card title="Flux PKCE" icon="shield" href="/fr-CA/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce">
    Comment les applications natives s’authentifient en toute sécurité
  </Card>

  <Card title="Forum de la communauté" icon="comments" href="https://community.auth0.com/">
    Obtenez de l’aide auprès de la communauté Auth0
  </Card>
</CardGroup>