Início rápido

Este guia leva você de uma conta vazia até uma aplicação Next.js (App Router) que faz o login de pessoas pelo login hospedado do Authio e lê no servidor quem elas são. Ele usa o Auth.js v5 e o authio-provider-nextauth, o mesmo provider com que o próprio console do Authio faz login.

Configure o Authio

1. 1

   Crie um realm

   No console, abra Realms e escolha Novo realm. Dê um nome a ele; o ID do realm derivado do nome passa a fazer parte do emissor e não pode ser trocado depois, então escolha algo estável, como acme.

   A visão geral do realm mostra o emissor (issuer), o endereço para o qual todos os clients do realm apontam:

   EmissorTexto simples

   https://authio.api.hyperio.tech/realms/acme

2. 2

   Crie um client para a sua aplicação

   Abra Clientes e escolha Novo cliente. Selecione o realm que você acabou de criar, dê ao client um ID (letras minúsculas, números e hífens, por exemplo acme-web) e um nome de exibição — o nome que os seus usuários veem na tela de login.

   Em redirect URIs, adicione o endereço em que o Auth.js recebe o login:

   Redirect URITexto simples

   http://localhost:3000/api/auth/callback/authio

   O segredo do client aparece uma única vez, logo depois que o client é criado. Copie-o agora; se perder, gere outro pela tela do client.

Conecte a sua aplicação

1. 1

   Instale os pacotes

   TerminalBash

   npm install next-auth@beta authio-provider-nextauth

2. 2

   Adicione as credenciais

   O Auth.js lê as configurações do provider em variáveis com o prefixo AUTH_AUTHIO_. AUTH_SECRET é outra coisa: a chave que cifra o cookie de sessão. Gere-a com npx auth secret e nunca reaproveite o segredo do client para isso.

   .env.local.env

   AUTH_SECRET=gerado-por-npx-auth-secret
   AUTH_AUTHIO_ISSUER=https://authio.api.hyperio.tech/realms/acme
   AUTH_AUTHIO_ID=acme-web
   AUTH_AUTHIO_SECRET=YOUR_CLIENT_SECRET

3. 3

   Configure o Auth.js

   Registre o provider do Authio e exponha os route handlers do Auth.js. Com as variáveis acima no lugar, o provider não precisa de opções.

   auth.tsapp/api/auth/[...nextauth]/route.ts

   auth.tsTypeScript

   import NextAuth from 'next-auth'
   import Authio from 'authio-provider-nextauth/v5'
   
   export const { handlers, signIn, signOut, auth } = NextAuth({
     providers: [Authio],
   })

4. 4

   Adicione entrar e sair

   Leia a sessão no servidor com auth() e use server actions para os dois botões:

   app/page.tsxTypeScript

   import { auth, signIn, signOut } from '@/auth'
   
   export default async function Home() {
     const session = await auth()
   
     if (!session?.user) {
       return (
         <form
           action={async () => {
             'use server'
             await signIn('authio')
           }}
         >
           <button type="submit">Entrar</button>
         </form>
       )
     }
   
     return (
       <form
         action={async () => {
           'use server'
           await signOut()
         }}
       >
         <p>Conectado como {session.user.email}</p>
         <button type="submit">Sair</button>
       </form>
     )
   }

5. 5

   Teste

   Rode npm run dev, abra http://localhost:3000 e escolha Entrar. Você cai no login hospedado do realm. Entre com um usuário que você cadastrou no realm pelo console e você volta à sua aplicação com uma sessão.

Solução de problemas

Próximos passos