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

# Añade Login a tu aplicación .NET MAUI

> Esta guía muestra cómo integrar Auth0 con una aplicación .NET MAUI mediante el SDK Auth0.OidcClient.MAUI.

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

<HowToSchema />

<Accordion title="Usa IA para integrar Auth0" icon="microchip-ai" iconType="solid" defaultOpen>
  Si usas un asistente de programación con IA como Claude Code, Cursor o GitHub Copilot, puedes añadir la autenticación de Auth0 automáticamente en minutos con [agent skills](https://agentskills.io/home).

  **Instala:**

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

  **Luego pídele a tu asistente de IA:**

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

  Tu asistente de IA creará automáticamente tu aplicación de Auth0, obtendrá las credenciales, instalará el SDK Auth0 OidcClient MAUI, configurará las URL de devolución de llamada e implementará los flujos de Login y Logout. [Documentación completa de agent skills →](/es/docs/quickstart/agent-skills)
</Accordion>

Esta guía muestra cómo integrar Auth0 con una aplicación .NET MAUI mediante el [SDK Auth0.OidcClient.MAUI](https://github.com/auth0/auth0-oidc-client-net). Al finalizar, tu aplicación admitirá Login, Logout y la visualización de la información del perfil de usuario en **Android**, **iOS**, **macOS** y **Windows** desde una única base de código.

Esta guía usa la versión **1.x** de `Auth0.OidcClient.MAUI`.

<Note>
  ## Requisitos previos

  * **SDK de .NET 8 o .NET 9** instalado ([descargar](https://dotnet.microsoft.com/download))
  * **Carga de trabajo de MAUI** instalada
  * Una **cuenta de Auth0** ([regístrate gratis](https://auth0.com/signup))
  * **Visual Studio 2022** (17.8+), **JetBrains Rider** o **VS Code** con la extensión de .NET MAUI
</Note>

Verifica tu entorno:

```shellscript theme={null}
dotnet --version        # Debe ser 8.x o 9.x
dotnet workload list    # Debe incluir maui
```

Si no tiene instalada la carga de trabajo de MAUI, instálela:

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

<div id="get-started">
  ## Primeros pasos
</div>

<Steps>
  <Step title="Configure la aplicación de Auth0" stepNumber={1}>
    Configura tu aplicación de Auth0 para obtener las credenciales que necesita tu aplicación MAUI.

    1. Ve a **[Auth0 Dashboard](https://manage.auth0.com/dashboard/) > Applications > Applications**
    2. Selecciona **Create Application**
    3. Escribe un nombre para tu aplicación (por ejemplo, "My MAUI App"), selecciona **Native** como tipo de aplicación y, a continuación, selecciona **Create**
    4. Ve a la pestaña **Settings** en la página **Application Details**
    5. Toma nota de los valores de **Dominio** e **ID de cliente**; los necesitarás más adelante

    En la pestaña **Settings**, desplázate hasta **Application URIs** y configura las siguientes URL. Las aplicaciones .NET MAUI usan un esquema de URI personalizado (por ejemplo, `myapp://callback`) en lugar de una URL HTTP.

    **Allowed Callback URLs:**

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

    **Allowed Logout URLs:**

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

    <Tip>
      Elija un esquema único para su aplicación. Un nombre de dominio invertido funciona bien; por ejemplo, `com.mycompany.myapp://callback`.
    </Tip>

    Seleccione **Guardar cambios**.

    <Check>
      Tiene una aplicación nativa en Auth0 con el **dominio** y el **ID de cliente** anotados, y las URL de callback y de cierre de sesión configuradas.
    </Check>
  </Step>

  <Step title="Crea tu proyecto MAUI" stepNumber={2}>
    Si ya tiene un proyecto de .NET MAUI, vaya al paso 3. De lo contrario, cree uno con la CLI de .NET:

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

  <Step title="Instalar el SDK de Auth0 para MAUI" stepNumber={3}>
    Agrega el paquete NuGet `Auth0.OidcClient.MAUI` a tu proyecto:

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

    <Check>
      Ejecuta `dotnet restore` para confirmar que el paquete se haya instalado sin errores.
    </Check>
  </Step>

  <Step title="Configurar el manejo del callback específico para cada plataforma" stepNumber={4}>
    Las aplicaciones .NET MAUI deben registrar un controlador de callback en cada plataforma para que el navegador del sistema pueda redirigir a la aplicación después de la autenticación. Siga las instrucciones correspondientes a cada plataforma de destino.

    <Tabs>
      <Tab title="Android">
        Cree un archivo en `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";
        }
        ```

        Reemplace `myapp` por el esquema de URI que configuró en el paso 1.

        <Note>
          El valor de `CALLBACK_SCHEME` debe coincidir exactamente con el esquema de su `RedirectUri` y con **Allowed Callback URLs** en Auth0.
        </Note>
      </Tab>

      <Tab title="Windows">
        El flujo de callback de Auth0 en Windows depende de la activación del protocolo URI, lo que requiere que la aplicación esté **empaquetada** (MSIX). La plantilla predeterminada de .NET MAUI crea una aplicación empaquetada, por lo que no es necesario hacer cambios si usó `dotnet new maui` o la plantilla MAUI de Visual Studio.

        <Info>
          Si su archivo `.csproj` contiene `<WindowsPackageType>None</WindowsPackageType>`, la aplicación está **sin empaquetar** y la activación del protocolo no funcionará. Elimine esa línea o establézcala como `<WindowsPackageType>MSIX</WindowsPackageType>` para usar una aplicación empaquetada. Para obtener más información, consulte la [documentación de empaquetado de Windows para .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/windows/deployment-overview).
        </Info>

        Se requieren dos cambios: registrar el protocolo URI y controlar la activación del protocolo.

        **1. Registre el protocolo** en `Platforms/Windows/Package.appxmanifest`. Agregue el bloque `<Extensions>` dentro del elemento `<Application>` existente:

        ```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. Controle la activación** en `Platforms/Windows/App.xaml.cs`. Agregue la llamada `CheckRedirectionActivation` como la **primera línea** del constructor:

        ```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">
        No se requiere ninguna configuración específica de la plataforma. El SDK usa `ASWebAuthenticationSession` automáticamente a través del `WebAuthenticator` de MAUI.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Añadir login y logout" stepNumber={5}>
    Debes crear o modificar tres archivos: un ViewModel con la lógica de inicio y cierre de sesión, una página XAML para la interfaz de usuario y un archivo de code-behind para conectarlos.

    <Tabs>
      <Tab title="MainPageViewModel.cs">
        Crea el ViewModel en `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; // El usuario cerró el navegador; no es un error

                    await Shell.Current.DisplayAlert("Error de inicio de sesión", loginResult.Error, "Aceptar");
                    return;
                }

                // Lee las claim del perfil de usuario desde el 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">
        Configura la interfaz de usuario en `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">

                <!-- Se muestra cuando no se ha iniciado sesión -->
                <Button Text="Iniciar sesión"
                        Command="{Binding LoginCommand}"
                        IsVisible="{Binding IsNotAuthenticated}" />

                <!-- Se muestra cuando se ha iniciado sesión -->
                <Label Text="{Binding Name, StringFormat='¡Bienvenido, {0}!'}"
                       IsVisible="{Binding IsAuthenticated}"
                       FontSize="24"
                       HorizontalOptions="Center" />

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

                <Button Text="Cerrar sesión"
                        Command="{Binding LogoutCommand}"
                        IsVisible="{Binding IsAuthenticated}" />

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

      <Tab title="MainPage.xaml.cs">
        Establece el BindingContext en `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>
      Tu proyecto ahora tiene un ViewModel con comandos para iniciar y cerrar sesión, una página XAML con enlace de datos y el code-behind conectado.
    </Check>
  </Step>

  <Step title="Registrar los servicios e instanciar el cliente de Auth0" stepNumber={6}>
    Ahora registra `Auth0Client`, el ViewModel y la página mediante inyección de dependencias en `MauiProgram.cs`. Esto enlaza todo para que el cliente de Auth0 se inyecte en el ViewModel y el ViewModel se inyecte en la página:

    ```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");
                });

            // Configura el cliente Auth0 con tus credenciales del Paso 1
            builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
            {
                Domain = "{yourDomain}",
                ClientId = "{yourClientId}",
                RedirectUri = "myapp://callback",
                PostLogoutRedirectUri = "myapp://callback"
            }));

            // Registra la página y el ViewModel creados en el Paso 5
            builder.Services.AddTransient<MainPage>();
            builder.Services.AddTransient<MainPageViewModel>();

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

    Sustituye `{yourDomain}` y `{yourClientId}` por los valores de la configuración de tu aplicación de Auth0 (paso 1).
    `RedirectUri` y `PostLogoutRedirectUri` son **obligatorios** para las aplicaciones MAUI. Usa la misma URL de devolución de llamada que introdujiste en el Auth0 Dashboard.
  </Step>

  <Step title="Ejecute la aplicación" stepNumber={7}>
    Compila y ejecuta tu aplicación de .NET MAUI

    **Flujo esperado:**

    1. La aplicación se inicia y muestra el botón **Iniciar sesión**
    2. Toca **Iniciar sesión** → se abre el navegador del sistema con Universal Login de Auth0
    3. Completa la autenticación (regístrate o inicia sesión)
    4. El navegador redirige de nuevo a tu aplicación
    5. La aplicación muestra tu nombre y correo electrónico con un botón **Cerrar sesión**
  </Step>
</Steps>

<Check>
  Ahora tiene una experiencia de Login de Auth0 plenamente funcional en su aplicación .NET MAUI.
</Check>

***

<div id="troubleshooting">
  ## Solución de problemas
</div>

<AccordionGroup>
  <Accordion title="Incompatibilidad de URL de devolución de llamada">
    **Síntoma**: El navegador muestra "Callback URL mismatch. The provided redirect\_uri is not in the list of allowed callback URLs."

    **Solución:**

    1. Confirme que el **ID de cliente** en su código coincida con la aplicación que configuró en el Auth0 Dashboard
    2. Borre el campo **Allowed Callback URLs** y vuelva a escribir `myapp://callback` manualmente; al copiar y pegar suelen introducirse espacios finales o saltos de línea invisibles
    3. Asegúrese de que la coincidencia sea exacta: sin barra diagonal final, solo en minúsculas y sin espacios en blanco
    4. Seleccione **Save Changes** en el Dashboard y verifique que el valor se haya guardado
    5. Revise la barra de direcciones del navegador para ver el parámetro de consulta `redirect_uri` y comprobar qué está enviando realmente su aplicación
  </Accordion>

  <Accordion title="Android: la aplicación no vuelve desde el navegador">
    **Síntoma**: El navegador se abre para iniciar sesión, pero nunca redirige de vuelta a la aplicación.

    **Solución:**

    1. Verifique que `DataScheme` en `WebAuthenticatorActivity.cs` coincida con el esquema de su `RedirectUri`
    2. Asegúrese de que la Activity tenga `Exported = true`
    3. Confirme que **Allowed Callback URLs** en Auth0 Dashboard coincidan exactamente
  </Accordion>

  <Accordion title="Windows: el inicio de sesión parece quedarse bloqueado">
    **Síntoma**: El navegador se abre, pero en lugar de reanudar la aplicación se abre una segunda instancia.

    **Solución:** Asegúrese de que `Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation()` se llame como la **primera línea** del constructor de `App` en `Platforms/Windows/App.xaml.cs`, y de que el nombre del protocolo en `Package.appxmanifest` coincida con el esquema de su URI de callback.
  </Accordion>

  <Accordion title="Windows: la activación del protocolo no funciona">
    **Síntoma**: Después de iniciar sesión, el navegador muestra un error o no ocurre nada; la aplicación nunca recibe el callback.

    **Solución:** Su aplicación debe ser una aplicación **empaquetada** (MSIX). Revise su archivo `.csproj` para comprobar si contiene un elemento `<WindowsPackageType>`:

    * Si está establecido en `None`, la activación del protocolo no está disponible. Elimine la línea o cámbiela por `<WindowsPackageType>MSIX</WindowsPackageType>`.
    * Si el elemento no está presente, su aplicación ya está empaquetada de forma predeterminada; verifique que `Package.appxmanifest` contenga la extensión `<uap:Protocol>` del paso 4.
  </Accordion>

  <Accordion title="Faltan claims en el perfil de usuario">
    **Síntoma**: Los claims `name`, `email` o `picture` no aparecen en `loginResult.User`.

    **Solución:** Verifique que `openid profile email` estén incluidos en `Auth0ClientOptions.Scope`. Si ha personalizado el scope, asegúrese de que `openid` esté siempre presente.
  </Accordion>
</AccordionGroup>

***

<div id="next-steps">
  ## Próximos pasos
</div>

Ahora tienes una integración de Auth0 funcional en tu aplicación .NET MAUI. Explora estos temas para ampliar tu implementación:

<Accordion title="Tokens de actualización">
  El SDK de Auth0 para MAUI admite tokens de actualización para renovar sesiones de forma silenciosa sin volver a pedir intervención al usuario.

  ### Habilitar tokens de actualización

  Agrega `offline_access` a la propiedad `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"
  }));
  ```

  ### Usar tokens de actualización

  Después de iniciar sesión, almacena el token de actualización y úsalo para renovar la sesión de forma silenciosa:

  ```csharp expandable lines theme={null}
  // Después de iniciar sesión
  var refreshToken = loginResult.RefreshToken;

  // Más tarde, renueva la sesión
  var refreshResult = await _client.RefreshTokenAsync(refreshToken);

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

  <Info>
    Si `RefreshToken` es `null` después de iniciar sesión, asegúrate de que **Allow Offline Access** esté habilitado en la configuración de tu API en el Auth0 Dashboard (cuando uses un parámetro `audience`).
  </Info>
</Accordion>

<Accordion title="Llamar a una API protegida">
  Para obtener un token de acceso para tu API, establece `Scope` y pasa un parámetro `audience` a `LoginAsync()`:

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

  // El token de acceso ahora es para tu 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="Organizaciones (B2B/empresas)">
  Autentica a los usuarios dentro de una Organización de Auth0 específica:

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

  Para obtener más información, consulta [Organizaciones](/es/docs/manage-users/organizations).
</Accordion>

<Accordion title="Forzar la reautenticación">
  Usa `MaxAge` para forzar la reautenticación después de un tiempo determinado:

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

<Accordion title="Personalizar Universal Login">
  Adapta la página de inicio de sesión de Auth0 para que coincida con tu marca, incluidos los colores, los logotipos y el texto.

  Para obtener más información, consulta [Personalizar Universal Login](/es/docs/customize/universal-login-pages).
</Accordion>

***

<div id="additional-resources">
  ## Recursos adicionales
</div>

<CardGroup cols={3}>
  <Card title="Repositorio del SDK" icon="github" href="https://github.com/auth0/auth0-oidc-client-net">
    Código fuente, ejemplos y referencia de API
  </Card>

  <Card title="Prácticas recomendadas para tokens" icon="key" href="/es/docs/secure/tokens/token-best-practices">
    Prácticas recomendadas de seguridad para los tokens
  </Card>

  <Card title="Flujo con PKCE" icon="shield" href="/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce">
    Cómo se autentican de forma segura las aplicaciones nativas
  </Card>

  <Card title="Foro de la comunidad de Auth0" icon="comments" href="https://community.auth0.com/">
    Obtén ayuda de la comunidad de Auth0
  </Card>
</CardGroup>