Nos aprofundamos em Server Components, modificando o botão de login para funcionar com ele. Criamos uma server action para validar o login, reutilizando funções do NextAuth na nossa lógica. Aprendemos como pegar dados de login usando form data e verificamos seu funcionamento.
Fala Fabrizio! Obrigado pela mensagem!
De fato o erro que aparece no canto da tela é o erro que foi lançado pela falha de autenticação. Ele não deve aparecer em produção.
A forma como eu capturei o erro foi usando o error.tsx do próprio next.js. Essa é uma das duas formas recomendadas pela própria documentação - e vai ficar aparecendo o erro ali no canto mesmo 😞. A outra forma (que é mais elegante) é capturando sem "estourar" erro, mas envolveria um hook do Next.js (useFormState / useActionState) que traz um nível de complexidade que não gostaria nesse workshop.
Se você quiser ver como fazer dessa segunda forma, eu fiz exatamente isso na resolução do Mini Projeto de Server Actions (https://codante.io/mini-projetos/server-actions-no-nextjs), dá uma olhada lá!
De fato, talvez eu devesse comunicar de forma mais assertiva isso nesta aula! Um abraço! 😊
Client Componets né? Seria mais simples para manipular as mensagens de erro direto no form (colocar uma mensagem alí) e eu posso usar um Zod no auth.ts para dar mais segurança. Seria isso ou teria alguma outra abordagem melhor?Client components é mais fácil no sentido que já estamos acostumados a lidar com os erros usando React tradicional.
No server components para validarmos dessa forma precisaríamos utilizar esse hook useFormState/useActionState. O problema nem tanto é a complexidade do hook em si, mas ele ainda é muito recente e tem alguns pontos: