Tutorial

Autenticação com NextAuth (Auth.js) e Github

Nível
14 aulas
1h18

Assistir agora

1. Introdução do Projeto

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Autenticação com NextAuth.js e Github.

Descrição do projeto

Você está desenvolvendo um novo App, que tem a habilidade de fazer um analytics no GitHub de seus usuários. Essa aplicação é "passwordless", ou seja, faz a autenticação do usuário apenas utilizando o OAuth do github.com. Experimente o poder - e a facilidade - de um sistema de login com NextAuth.js utilizando o GitHub para autenticação em uma aplicação Next.js.

🔨 Requisitos

  • Utilize o Next.js e claro, NextAuth.js para a autenticação.
  • Crie uma Landing Page para sua aplicação que contenha um botão de login com o GitHub.
  • Crie a página que o usuário será redirecionado após a autenticação (página logada).
    • Essa página deverá exibir informações básicas da conta do GitHub do usuário - incluindo nome e avatar.
      • Essa página deverá exibir um botão de logout.
  • O usuário deverá ser redirecionado para a Landing Page nos seguintes casos:
    • Falha na autenticação
      • Usuário deslogado tentando acessar a página logada
      • Após o logout
DicaDica

Obs. será necessário criar um App OAuth no GitHub.
Obs1. A estratégia de login do NextAuth deverá ser a de jwt (e não database). Isso significa que as informações do usuário logado serão persistidas no token, e não na base de dados.

Criando um App OAuth no GitHub:

Informações adicionais do GitHub

Por padrão o NextAuth.js traz apenas algumas informações do usuário na sessão: name, image, email. Mas ao analisarmos o figma do nosso projeto, algumas informações adicionais são necessárias, como quantidade de repositórios, gists e seguidores. Para que você consiga acessar essas informações será necessário utilizar as callbacks do NextAuth.js. Mais infos aqui.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

Http e Internet

  • Sessão
  • Cookies
  • Protocolo OAuth2

Next.js

  • NextAuth.js
  • Login e Logout usando NextAuth.js
  • Habilidade 2

Pré requisitos

  • Conhecimentos básicos de React

Seu Instrutor

Roberto Cestari

Codante.io

Aulas

  1. Introdução
  2. 1.

    Introdução do Projeto

    00:34
  3. 2.

    Detalhando os Requisitos

    03:53
  4. 3.

    Iniciando o Projeto com Next.js

    04:27
  5. HTML e Estilização
  6. 4.

    A estrutura HTML da Aplicação

    07:44
  7. 5.

    Estilizando a Home

    07:08
  8. 6.

    Estilizando a Página Logada

    10:05
  9. Implementando NextAuth
  10. 7.

    Adicionando o NextAuth no projeto

    05:32
  11. Criando um App OAuth Github

    03:30
  12. Configurando o Github no NextAuth

    05:42
  13. Botões de Login e Logout

    08:49
  14. Fazendo o redirecionamento de páginas

    04:22
  15. Populando a página com os dados da sessão

    02:39
  16. Dados adicionais do Github na sessão

    13:54
  17. Finalização
  18. Finalização

    00:36