Integra autenticação Logto à sua aplicação Next.js usando Server Actions.
Server Actions apresenta uma abordagem renovada para criar aplicações web robustas sem a necessidade de APIs REST tradicionais. Já discutimos isso anteriormente em nosso artigo.
Hoje, estamos empolgados em anunciar o suporte oficial para Server Actions em nosso SDK Next.js, apesar de ser um recurso experimental.
Para uma visão geral rápida, confira este exemplo e siga enquanto detalhamos como integrar o Logto com Server Actions neste guia.
Para começar, certifique-se de ter o seguinte:
Se você está hospedando o Logto por conta própria, consulte a documentação "Primeiros passos" do Logto para configurar sua instância Logto.
Abra o Console Logto digitando a URL https://cloud.logto.io/ se você estiver usando o Logto Cloud, ou o endpoint que você configurou para hospedagem própria.
Em seguida, navegue até a aba "Applications" e clique em "Create application".
No modal que aparece, escolha "Next.js (App Router)" e forneça um nome para a aplicação, como "Next.js App". Em seguida, clique em "Create application”.
Você será direcionado para uma página de tutorial no Logto. Clique em "Finish and done" para prosseguir para a página de detalhes da Aplicação.
Na seção "Redirect URIs", insira o seguinte valor:
Por exemplo, se você estiver hospedando o Next.js em http://localhost:3000, o valor deve ser:
Clique no botão "Save Changes" na parte inferior. Uma vez bem-sucedido, mantenha esta página aberta, pois será útil para a configuração do Next.js.
Certifique-se de ter um projeto com a versão mais recente do Next.js. Se você ainda não tiver um, siga o guia de instalação oficial para criar um.
No momento em que escrevemos este guia, o recurso é experimental e requer ativação no next.config.js
Comece instalando o módulo @logto/next usando o npm da seguinte forma:
Você também pode usar yarn ou pnpm.
Em seguida, vamos criar algumas funções como "server actions”, crie o novo arquivo libraries/logto.ts:
Neste arquivo, exportamos quatro funções para fins de autenticação. Observe que a primeira linha, "use server", indica que o código no arquivo só pode ser executado no lado do servidor. Usamos "next/headers" para gerenciar sessões baseadas em cookies.
"user server": https://react.dev/reference/react/use-server"next/headers" para gerenciar cookies: https://nextjs.org/docs/api-reference/next/headersAs funções acima que exportamos podem ser chamadas diretamente do componente React no lado do cliente. Essa é a principal vantagem de usar Server Actions. Vamos para o próximo capítulo para ver como usar essas funções.
Com as funções de autenticação em funcionamento, vamos construir a página. Criaremos dois componentes de cliente para iniciar as ações de login e logout.
/app/sign-in.tsx:
Aqui importamos a função signIn que foi definida no capítulo anterior. Embora o código seja executado no lado do servidor, esta função ainda pode ser invocada diretamente pelo componente <button> quando um usuário clica no botão de login. Ao fazer isso, eliminamos a necessidade de escrever qualquer API REST para lidar com o processo de login. De fato, o Next.js lida com os detalhes do despachante de requisição "POST" para nós. Ao receber o redirectUrl, podemos chamar router.push para redirecionar para a página de login do Logto.
/app/sign-out.tsx:
O processo de logout é semelhante ao processo de login.
Como um provedor de identidade OIDC padrão, o Logto redireciona os usuários para uma URL de callback após a autenticação. Portanto, devemos preparar uma página de callback para lidar com o resultado do login.
/app/callback/page.tsx
Aqui usamos um componente cliente com useEffect, o que facilita exibir uma página de "carregando" para uma melhor experiência do usuário.
Agora, vamos fazer uma página inicial mínima para exibir a utilidade do SDK do Logto. Se necessário, proteja qualquer recurso de usuários desconhecidos verificando o valor isAuthenticated e redirecionando para a página de login ou exibindo mensagens de erro.
app/page.tsx
Como você pode observar, este é um server component que elimina a necessidade de useEffect e gerenciamento de mudanças complexas de estado.
Server actions oferecem uma maneira simplificada e direta de implementar autenticação em comparação com aplicações Next.js tradicionais que dependem de APIs REST.
O exemplo completo de código pode ser encontrado neste repositório: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
Por que não experimentar o Logto Cloud e ver a facilidade na prática?