Usando a SDK do Auth0 com o Next.JS

Todo mundo sabe que a Auth0 é uma excelente ferramenta para gerenciamento de Identidades, ou seja, possui uma série de recursos que facilitam e tornam seguras as aplicações com as quais são integradas. Recentemente me deparei com um projeto onde precisava integrar a autenticação do Auth0 com uma aplicação Next.JS e, neste caso, utilizamos a SDK (Github) desenvolvida pela própria Auth0 para integrar ao nosso projeto.

Com algumas poucas linhas de código podemos proteger páginas e componentes da nossa aplicação Next, adicionando rotas de login, logout e perfil do usuário. Para isso você precisa criar uma aplicação tradicional através do dashboard do Auth0. Adicione a sua aplicação as configurações abaixo:

Allowed CallBack URLs: http://localhost:3000/api/auth/callback
Allowed Logout URLs: http://localhost:3000/

Aproveite que está na página de configuração e tome nota das seguintes informações: Client ID, Client Secret e Domain. Precisaremos dessas informações nos próximos passos.

Instalando a SDK:

$ yarn add @auth0/nextjs-auth0

No diretório raiz do seu projeto, caso não exista, crie um arquivo .env.local e adicione os dados a seguir com as informações que tomamos nota anteriormente:

AUTH0_SECRET=QUALQUER_STRING_ALEATORIA

AUTH0_BASE_URL=http://localhost:3000

AUTH0_ISSUER_BASE_URL=https://DOMINIO_QUE_COPIOU_ANTERIORMENTE

AUTH0_CLIENT_ID=CLIENT_ID_QUE_COPIOU_ANTERIORMENTE

AUTH0_CLIENT_SECRET=CLIENT_SECRET_QUE_COPIOU_ANTERIORMENTE

Agora criaremos uma rota dinâmica em /api/auth/[...auth0].js. Esta rota será responsável por receber os caminhos /api/auth/login, /api/auth/logout, /api/auth/me e /api/auth/callback. Dentro deste arquivo [...auth0].js adicione o seguinte conteúdo:

// api/auth/[...auth0].js

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

Vamos agora encapsular nosso componente principal no arquivo pages/_app.js adicionando o componente UserProvider, conforme a seguir:

// pages/_app.js

import React from 'react';

import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {

return (

<UserProvider>

<Component {...pageProps} />

</UserProvider>

);

}

Por fim, adicionamos as condições de verificação se o usuário está conectado ou não na nossa página index.js. Este ponto pode ser replicado e adicionado especificamente nas páginas que necessitarem ser restritas dentro da sua aplicação:

// pages/index.js

import { useUser } from '@auth0/nextjs-auth0';

export default () => {

const { user, error, isLoading } = useUser();

if (isLoading) return <div>Loading...</div>;

if (error) return <div>{error.message}</div>;

if (user) {

return (

<div>

Welcome {user.name}! <a href="/api/auth/logout">Logout</a>

</div>

);

}

return <a href="/api/auth/login">Login</a>;

};

Agora podemos executar nosso servidor Next com o comando yarn dev e verificar se os caminhos estão funcionando, acessando no navegador o link http://localhost:3000

$ yarn dev

Caso tenha interesse, veja o artigo original da Auth0 com o QuickStart e também o repositório do GitHub com exemplos.

Um grande abraço!

Usando a SDK do Auth0 com o Next.JS

Registre-se na nossa newsletter