Autenticação com NextAuth (Auth.js) e Github
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.
- Essa página deverá exibir informações básicas da conta do GitHub do usuário - incluindo nome e avatar.
- 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
- Falha na autenticação
Dica
Obs. será necessário criar um App OAuth no GitHub.
Obs1. A estratégia de login do NextAuth deverá ser a dejwt
(e nãodatabase
). 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:
- A página de Apps OAuth está nesse link
- Veja detalhes nesse guia do 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
👉🏽 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
Aulas
- Introdução
- 1.
Introdução do Projeto
00:34 - 2.
Detalhando os Requisitos
03:53 - 3.
Iniciando o Projeto com Next.js
04:27 - HTML e Estilização
- 4.
A estrutura HTML da Aplicação
07:44 - 5.
Estilizando a Home
07:08 - 6.
Estilizando a Página Logada
10:05 - Implementando NextAuth
- 7.
Adicionando o NextAuth no projeto
05:32 Criando um App OAuth Github
03:30Configurando o Github no NextAuth
05:42Botões de Login e Logout
08:49Fazendo o redirecionamento de páginas
04:22Populando a página com os dados da sessão
02:39Dados adicionais do Github na sessão
13:54- Finalização
Finalização
00:36