> ## 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 la connexion à votre application .NET MAUI

> Ce guide montre 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 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
  ```

  **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 connexion et de déconnexion. [Documentation complète sur Agent Skills →](/docs/fr-ca/quickstart/agent-skills)
</Accordion>

Ce guide montre comment intégrer Auth0 à une application .NET MAUI à l’aide du [SDK Auth0.OidcClient.MAUI](https://github.com/auth0/auth0-oidc-client-net). À la fin, votre application prendra en charge la connexion, la déconnexion et l’affichage des renseignements 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        # Doit être 8.x ou 9.x
dotnet workload list    # Doit 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">
  ## Pour commencer
</div>

<Steps>
  <Step title="Configurer votre application Auth0" stepNumber={1}>
    Configurez votre application Auth0 pour disposer des 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 **Domain** et **Client ID** — 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 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 unique pour votre application. Un nom de domaine inversé fonctionne 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** notés, 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 avec 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 la gestion du callback selon la plateforme" stepNumber={4}>
    Les applications .NET MAUI doivent enregistrer un gestionnaire de callback sur chaque plateforme afin que le navigateur système puisse rediriger vers votre application après l’authentification. Suivez les instructions pour chaque plateforme que vous ciblez.

    <Tabs>
      <Tab title="Android">
        Créez un nouveau fichier à `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 de votre `RedirectUri` et à celui indiqué dans **Allowed Callback URLs** dans Auth0.
        </Note>
      </Tab>

      <Tab title="Windows">
        Le mécanisme de callback Auth0 sous Windows repose sur l’activation du protocole URI, ce qui exige que votre application soit **empaquetée** (MSIX). Le modèle .NET MAUI par défaut crée une application empaquetée; aucun changement 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 est **non empaquetée** et l’activation du protocole ne fonctionnera pas. Supprimez cette ligne ou définissez-la à `<WindowsPackageType>MSIX</WindowsPackageType>` pour utiliser une application empaquetée. Pour en savoir plus, consultez la [documentation .NET MAUI sur l’empaquetage Windows](https://learn.microsoft.com/en-us/dotnet/maui/windows/deployment-overview).
        </Info>

        Deux changements sont requis : enregistrer le protocole URI et gérer l’activation du protocole.

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

    <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("Login failed", loginResult.Error, "OK");
                    return;
                }

                // Lire les claims du profil utilisateur à partir du 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="Log In"
                        Command="{Binding LoginCommand}"
                        IsVisible="{Binding IsNotAuthenticated}" />

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

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

                <Button Text="Log Out"
                        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 comprend maintenant un ViewModel avec des commandes de connexion et de déconnexion, une page XAML liée aux données et un code-behind connecté.
    </Check>
  </Step>

  <Step title="Enregistrer les services et instancier le client Auth0" stepNumber={6}>
    Maintenant, enregistrez `Auth0Client`, le ViewModel et la page dans le système d’injection de dépendances de `MauiProgram.cs`. Cela lie tous les éléments afin que le client Auth0 soit injecté dans le ViewModel, puis 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 le client 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 des 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 que vous avez saisie dans l’Auth0 Dashboard.
  </Step>

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

    **Flux attendu :**

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

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

***

<div id="troubleshooting">
  ## Résolution des problèmes
</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. Confirmez 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 introduit souvent des espaces ou des sauts de ligne invisibles à la fin
    3. Assurez-vous que la valeur correspond exactement : aucune barre oblique finale, uniquement des minuscules, aucun espace
    4. Sélectionnez **Save Changes** dans le Dashboard et vérifiez que la valeur a bien été enregistrée
    5. Vérifiez dans la barre d’adresse du navigateur le paramètre de requête `redirect_uri` pour voir ce que votre application envoie réellement
  </Accordion>

  <Accordion title="Android : l’application ne revient pas du 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’Activity a `Exported = true`
    3. Confirmez 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 là où elle s’était arrêtée.

    **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 il ne se passe rien — l’application ne reçoit jamais le callback.

    **Correctif :** Votre application doit être une application **empaquetée** (MSIX). Vérifiez dans votre fichier `.csproj` la présence d’un élément `<WindowsPackageType>` :

    * S’il est défini sur `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à empaqueté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 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é la 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 mise en œuvre :

<Accordion title="Jetons d’actualisation">
  Le SDK Auth0 MAUI prend en charge les jetons d’actualisation pour renouveler les sessions en arrière-plan, sans redemander à l’utilisateur de se ré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 en arrière-plan :

  ```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 limité à 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 limité à 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="Organizations (B2B/entreprise)">
  Authentifiez les utilisateurs dans une Auth0 Organization précise :

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

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

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

  ```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">
  Personnalisez la page de connexion Auth0 pour qu’elle corresponde à votre image de marque, notamment en ajustant les couleurs, les logos et le texte.

  Pour en savoir plus, consultez [Customize Universal Login](/docs/fr-ca/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="/docs/fr-ca/secure/tokens/token-best-practices">
    Bonnes pratiques de sécurité pour les jetons
  </Card>

  <Card title="Flux PKCE" icon="shield" href="/docs/fr-ca/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>