Español
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Crear autenticación de Build Expo (React Native) con Logto

Aprende cómo crear un flujo de autenticación de usuario con Expo (React Native) integrando el SDK de Logto.

Gao
Gao
Founder

Empezar

Introducción

  • Logto es una alternativa de código abierto a Auth0 para construir infraestructuras de identidad. Soporta varios métodos de inicio de sesión, incluyendo nombre de usuario, correo electrónico, número de teléfono y los inicios de sesión sociales populares como Google y GitHub.
  • Expo (React Native) es un ecosistema de herramientas que te ayudan a crear aplicaciones nativas universales con React que se ejecutan en Android, iOS y la web.

En este tutorial, le mostraremos cómo construir un flujo de autenticación de usuario con Expo (React Native) integrando el SDK de Logto. El tutorial utiliza TypeScript como el lenguaje de programación.

Requisitos previos

Antes de comenzar, asegúrese de tener lo siguiente:

  • Una cuenta de Logto. Si no tiene una, puede registrarse gratis.
  • Entorno de desarrollo de An Expo (React Native) y un proyecto.

Crear una aplicación de Logto

Para comenzar, cree una aplicación de Logto con el tipo "Native". Siga estos pasos para crear una aplicación de Logto:

  1. Inicie sesión en la Consola de Logto.
  2. En la barra de navegación izquierda, haga clic en Aplicaciones.
  3. Haga clic en Crear aplicación.
  4. En la página abierta, encuentre la sección "Native" y localice la tarjeta "Expo (React Native)".
  5. Haga clic en Comenzar a construir e ingrese el nombre de su aplicación.
  6. Haga clic en Crear.

Luego debería ver una guía interactiva que lo guía a través del proceso de integración del SDK de Logto con su aplicación Expo (React Native). El siguiente contenido puede ser una referencia para uso futuro.

Pruebe la guía interactiva de Logto Cloud

Integrar con Logto SDK

Instalación

Instala Logto SDK y las dependencias mediante tu gestor de paquetes favorito:

El paquete @logto/rn es el SDK para Logto. Los paquetes restantes son sus dependencias. No pudieron ser listadas como dependencias directas porque el CLI de Expo requiere que todas las dependencias para módulos nativos sean instaladas directamente dentro del package.json del proyecto raíz.

Inicializar proveedor de Logto

Importa y utiliza LogtoProvider para proporcionar un contexto de Logto:

Implementar iniciación y cierre de sesión

Cambia a la página de detalles de la aplicación en el Logto Console. Agrega un URI de redirección nativo (por ejemplo, io.logto://callback), luego haz clic en "Guardar".

  • Para iOS, el esquema del URI de redirección realmente no importa ya que la clase ASWebAuthenticationSession escuchará al URI de redirección independientemente de si está registrado.

  • Para Android, el esquema del URI de redirección debe completarse en el archivo app.json de Expo, por ejemplo:

Ahora, de vuelta en tu aplicación, puedes usar el hook useLogto para iniciar sesión y cerrar sesión:

Mostrar información del usuario

Para mostrar la información del usuario, puedes usar el método getIdTokenClaims():

Punto de control: Ejecutar la aplicación

Ahora puede ejecutar la aplicación e intentar iniciar/cerrar sesión con Logto:

  1. Abra la aplicación en su navegador, debería ver el botón "Iniciar sesión".
  2. Haga clic en el botón "Iniciar sesión" y debería ser redirigido a la página de inicio de sesión de Logto.
  3. Después de iniciar sesión, debería ser redirigido de vuelta a la aplicación y debería ver los datos del usuario y el botón "Cerrar sesión".
  4. Haga clic en el botón "Cerrar sesión" y debería ser redirigido a la página de cierre de sesión de Logto y luego redirigido de vuelta a la aplicación con un estado no iniciado.

Si encuentra algún problema durante la integración, no dude en unirse a nuestro servidor de Discord para chatear con la comunidad y el equipo de Logto!

Lecturas adicionales

Prueba Logto Hoy