Guia de autenticação do Next.Js com Github e Typescript

O Next.js é um framework para React incrível com foco em eficiência, totalmente pré-configurado, que reúne diversas funcionalidades.

Nesse artigo irei abordar uma das funcionalidades no Next.Js, que é a autenticação de usuários com o provedor do Github. Ao final desse artigo você será capaz de criar um sistema de autenticação de usuário completo.

Criação do projeto

A primeira coisa que precisamos fazer é criar uma pasta em nossa máquina para o projeto.

Para criar nosso projeto precisamos primeiro acessar o diretório da pasta pelo terminal ou pelo editor de texto, como o exemplo abaixo:

Agora basta que rodemos o comando abaixo para criar um novo projeto Next:

yarn create next-app --typescript

No campo em que aparece em seu terminal informe o nome do projeto:

Precisamos agora acessar a pasta do projeto em nosso terminal:

cd .\next-auth-with-github\

Insira o comando abaixo no terminal para acessar nosso projeto no navegador:

yarn dev

Agora basta que acessemos a URL abaixo no navegador de preferência:

http://localhost:3000

Criação do OAuth

Agora que já estamos com o projeto criado precisamos criar um aplicativo OAuth em nosso Github para podermos consumi-lo posteriormente.

Clicando aqui seremos redirecionados para o painel de aplicativos OAuth do nosso Github. Agora clique no botão "New OAuth App" para criarmos um novo aplicativo OAuth.

A primeira coisa que precisamos fazer é informar o nome:

Com o nome informado agora iremos informar a URL do projeto:

E por último, informar a rota de callback do projet:

A rota deve ter exatamente essa URL!

Agora que os dados necessários já estão devidamente preenchidos clique no botão "Register application".

Veja que agora obtivemos dois dados importantes:

• Client ID
• Client secrets

Mão na massa

Agora que já criamos nosso projeto e também criamos um aplicativo OAuth podemos de fato "colocar a mão na massa".

Criando variável ambiente

Na raiz de seu projeto, crie o arquivo .env.local. Esse arquivo será responsável por conter todas as chaves de configurações com serviços externos ao nosso projeto.

Com o arquivo criado, vamos criar as variáveis e atribuí-las os seus devidos valores.

Declare essas duas variáveis em seu arquivo .env.local:

CLIENT_ID=
CLIENT_SECRET=

Agora basta que atribuímos a essas variáveis seus valores de acordo com o Github OAuth:

Tendo como resultado final:

Estruturando página index e aplicando-a estilos

Acesse o arquivo index.tsx dentro da pasta pages e vamos estruturar nossa página:

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <div className={styles.box}>
        <button className={`${styles.button}`}>
          Fazer login
        </button>
      </div>
    </div>
  )
}

export default Home

No arquivo global.css dentro da pasta styles adicione os seguintes estilos globais:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --white: #fff;
  --gray-100: #e1e1e6;
  --gray-300: #a8a8b3;
  --gray-800: #29292e;
  --gray-850: #212529;
  --gray-900: #121214;
  --green-900: #3e8914;
  --yellow-500: #eba417;
}

@media (max-width: 1080px) {
  html {
    font-size: 93.75%;
  }
}

@media (max-width: 720px) {
  html {
    font-size: 87.5%;
  }
}

body {
  background: var(--gray-900);
  color: var(--white);
  overflow-x: hidden;
}

body,
input,
textarea,
select,
button {
  font: 400 1rem sans-serif;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul{
  list-style-type: none;
}

No arquivo Home.module.css dentro da pasta styles adicione os seguintes estilos:

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  padding: 2rem 4rem;
  border-radius: 0.25rem;
  background-color: var(--gray-800);
}

.button {
  padding: 0.5rem 2rem;
  border-radius: 0.25rem;
  background-color: var(--yellow-500);
  border: 0;
  color: var(--gray-800);
  font-size: 1rem;
  transition: 0.2s;
}

.button:hover {
  filter: brightness(0.8);
}



.button.active {
  background-color: var(--green-900);
}

Configurando provedor do Github

Em nosso projeto existe uma pasta chamada api, essa pasta é responsável por interpretar arquivos do lado do servidor, nela crie uma pasta chamada auth e dentro dessa pasta, crie o arquivo [...nextauth].ts. Esse arquivo será responsável pelas configurações de provedores.

Agora que o arquivo [...nextauth].ts iremos instalar o pacote de autenticação do Next:

yarn add next-auth

Agora iremos configurar o provedor do Github em nosso arquivivo [...nextauth].ts:

import NextAuth from 'next-auth'
import GithubProvider from 'next-auth/providers/github'

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.CLIENT_ID!,
      clientSecret: process.env.CLIENT_SECRET!
    })
  ]
}

export default NextAuth(authOptions)

Criando contexto de sessão

Em nosso arquivo _app.tsx dentro da pasta pages, iremos criar um contexto com a sessão de usuário:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'
import { Session } from 'next-auth'

function MyApp({
  Component,
  pageProps: { session, ...pageProps }
}: AppProps<{
  session: Session
}>) {
  return (
    <SessionProvider session={session} basePath="/api/auth/callback">
      <Component {...pageProps} />
    </SessionProvider>
  )
}

export default MyApp

Consumindo contxto

Agora iremos verificar se nossa sessão está ativa ou não. No arquivo index.tsx dentro da pasta pages insira o seguinte código:

import type { NextPage } from 'next'
import { useSession, signIn, signOut } from 'next-auth/react'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  const { data: session } = useSession()

  return (
    <div className={styles.container}>
      <div className={styles.box}>
        {!session ? (
          <button className={styles.button} onClick={() => signIn('github')}>
            Fazer login
          </button>
        ) : (
          <button
            className={`${styles.button} ${styles.active}`}
            onClick={() => signOut()}
          >
            {session.user?.name}
          </button>
        )}
      </div>
    </div>
  )
}

export default Home

Finalizando...

Agora que já configuramos tudo iremos testar. O Next recomenda que quando utilizamos variáveis ambiente é sempre importante que reiniciemos o servidor após configura-las, então, vá até o seu terminal, pare o servidor e o suba novamente utilizando o comando abaixo:

yarn dev

Então, se você fez tudo corretamente, agora é só clicar no botão de login e realizar o seu login com o Github!

Feito com ❤ por Pablo Ferrari