Português (Brasil)
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Constuir autenticação Expo (React Native) com Logto

Aprenda a criar um fluxo de autenticação de usuário com Expo (React Native) integrando o SDK do Logto.

Gao
Gao
Founder

Comece agora

Introdução

  • Logto é uma alternativa de código aberto ao Auth0 para construir infraestruturas de identidade. Suporta vários métodos de login, incluindo nome de usuário, e-mail, número de telefone e logins sociais populares como Google e GitHub.
  • Expo (React Native) é um ecossistema de ferramentas que ajudam você a criar aplicativos nativos universais com React que funcionam no Android, iOS e na web.

Neste tutorial, vamos mostrar como construir um fluxo de autenticação de usuário com Expo (React Native) integrando o Logto SDK. O tutorial usa TypeScript como a linguagem de programação.

Pré-requisitos

Antes de começar, certifique-se de que tem o seguinte:

  • Uma conta Logto. Se não tiver uma, pode se inscrever gratuitamente.
  • Ambiente de desenvolvimento An Expo (React Native) e um projeto.

Criar uma aplicação Logto

Para começar, crie uma aplicação Logto com o tipo "Native". Siga estes passos para criar uma aplicação Logto:

  1. Faça login no Logto Console.
  2. Na barra de navegação à esquerda, clique em Aplicações.
  3. Clique em Criar aplicação.
  4. Na página aberta, encontre a seção "Native" e localize o cartão "Expo (React Native)".
  5. Clique em Começar a construir e insira o nome da sua aplicação.
  6. Clique em Criar.

Depois você deve ver um guia interativo que o orienta no processo de integração do Logto SDK com sua aplicação Expo (React Native). O conteúdo a seguir pode ser uma referência para uso futuro.

Experimente o guia interativo do Logto Cloud

Integrar com o SDK do Logto

Instalação

Instale o SDK do Logto e as dependências pares através do seu gerenciador de pacotes favorito:

O pacote @logto/rn é o SDK para Logto. Os pacotes restantes são suas dependências pares. Eles não puderam ser listados como dependências diretas porque o CLI do Expo exige que todas as dependências para módulos nativos sejam instaladas diretamente no package.json do projeto raiz.

Inicializar o provedor Logto

Importe e use LogtoProvider para fornecer um contexto do Logto:

Implementar login e logout

Vá para a página de detalhes da aplicação no Logto Console. Adicione um URI de redirecionamento nativo (por exemplo, io.logto://callback), então clique em "Salvar".

  • Para iOS, o esquema de URI de redirecionamento não importa realmente, já que a classe ASWebAuthenticationSession ouvirá o URI de redirecionamento independentemente de estar registrado.

  • Para Android, o esquema de URI de redirecionamento deve ser preenchido no arquivo app.json do Expo, por exemplo:

Agora, de volta ao seu aplicativo, você pode usar o hook useLogto para fazer login e logout:

Exibir informações do usuário

Para exibir as informações do usuário, você pode usar o método getIdTokenClaims():

Ponto de verificação: Execute o aplicativo

Agora você pode executar a aplicação e tentar iniciar sessão/terminar sessão com o Logto:

  1. Abra a aplicação no seu navegador, você deve ver o botão "Iniciar sessão".
  2. Clique no botão "Iniciar sessão" e você deve ser redirecionado para a página de login do Logto.
  3. Depois de iniciar sessão, você deve ser redirecionado de volta para a aplicação e deve ver os dados do usuário e o botão "Terminar sessão".
  4. Clique no botão "Terminar sessão" e você deve ser redirecionado para a página de logout do Logto, e depois redirecionado de volta para a aplicação em estado de não iniciado sessão.

Se encontrar algum problema durante a integração, não hesite em juntar-se ao nosso servidor Discord para conversar com a comunidade e a equipe Logto!

Leituras adicionais

Experimente Logto Hoje