Guia de autenticação do Next.Js com Github e Typescript
Tags: nextjs, github, typescript, braziliandevs
Published: 2022-10-05 19:54:30

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ng20joi12ezvkyknm5u.png)

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfgbp9hxb0ragqkvtdv1.png)

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](https://github.com/settings/developers) 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h24b81do3ybx5ibh2cc9.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzt1s7ag9zoi1x7ztd5a.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h9tgwm5pmgwguip7qpc.png)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh1mohcv4jp0qwfij0wm.png)

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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo2c607ldeyb8c3mupba.png)

Tendo como resultado final: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t08jm4it8sphimuccpjp.png)

### 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](https://www.linkedin.com/in/pablo-caliari-ferrari-32bb7a1a8/)