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
Top comments (0)