Essa biblioteca permite que você integre perfeitamente a autenticação do Google em seu aplicativo Next.js, eliminando a necessidade de desenvolvê-lo do zero.

A integração de um sistema de autenticação seguro é uma etapa de desenvolvimento crucial que não apenas fornece um ambiente seguro para os usuários, mas também inspira confiança em seu produto. Este sistema garante que seus dados estejam protegidos e que apenas pessoas autorizadas possam acessar o aplicativo.

Construir uma autenticação segura desde o início pode ser um processo demorado que requer uma análise completa compreensão dos protocolos e processos de autenticação, especialmente ao lidar com autenticação diferente fornecedores.

Usando o NextAuth, você pode mudar seu foco para a construção dos principais recursos. Continue lendo para saber como integrar o login social do Google em seu aplicativo usando o NextAuth.

Como funciona o NextAuth

NextAuth.js é uma biblioteca de autenticação de código aberto que simplifica o processo de adição

instagram viewer
autenticação e autorização funcionalidade para aplicativos Next.js, bem como personalizar fluxos de trabalho de autenticação. Ele fornece uma variedade de recursos, como e-mail, autenticação sem senha e suporte para vários provedores de autenticação, como Google, GitHub e muito mais.

Em alto nível, o NextAuth atua como um middleware, facilitando o processo de autenticação entre sua aplicação e o provedor. Sob o capô, quando um usuário tenta fazer login, ele é redirecionado para a página de login do Google. Após a autenticação bem-sucedida, o Google retorna uma carga útil que inclui os dados do usuário, como nome e endereço de e-mail. Esses dados são usados ​​para autorizar o acesso ao aplicativo e seus recursos.

Usando os dados de carga útil, o NextAuth cria uma sessão para cada usuário autenticado e armazena o token da sessão em um cookie somente HTTP seguro. O token de sessão é usado para verificar a identidade do usuário e manter seu status de autenticação. Esse processo também se aplica a outros provedores com pequenas variações na implementação.

Registre seu aplicativo Next.js no Google Developer Console

NextAuth fornece suporte para o serviço de autenticação do Google. No entanto, para que seu aplicativo interaja com as APIs do Google e permita que os usuários se autentiquem com suas credenciais do Google, você precisará registrar seu aplicativo no console do desenvolvedor do Google e obter um ID do Cliente e Segredo do cliente.

Para fazer isso, navegue até Console do desenvolvedor do Google. Em seguida, faça login com sua conta do Google para acessar o console. Uma vez logado, crie um novo projeto.

Na página de visão geral do projeto, selecione o APIs e serviços guia da lista de serviços no painel de menu esquerdo e, finalmente, o Credenciais opção.

Clique no Criar credenciais botão para gerar seu Client ID e Client Secret. Em seguida, especifique o tipo de aplicativo nas opções fornecidas e forneça um nome para seu aplicativo.

Em seguida, especifique a URL de rota inicial do seu aplicativo e, finalmente, especifique o URI de redirecionamento autorizado para seu aplicativo. Para este caso, deve ser http://localhost: 3000/api/auth/callback/google conforme especificado pelas configurações do provedor Google do NextAuth.

Após o registro bem-sucedido, o Google fornecerá a você um Client ID e Client Secret para uso em seu aplicativo.

Configurar o aplicativo NextJS

Para começar, crie um projeto Next.js localmente:

npx create-next-app next-auth-app

Após a conclusão da configuração, navegue até o diretório do projeto recém-criado e execute este comando para ativar o servidor de desenvolvimento.

npm run dev

Abra seu navegador e navegue até http://localhost: 3000. Este deve ser o resultado esperado.

Você pode encontrar o código deste projeto em seu Repositório GitHub.

Configurando o arquivo .env

Na pasta raiz do seu projeto, crie um novo arquivo e nomeie-o .env para manter seu ID de cliente, segredo e o URL base.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ID do Cliente'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'segredo'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

A URL NextAUTH é usada para especificar a URL base de seu aplicativo, que é usada para redirecionar usuários após a conclusão da autenticação.

Integre NextAuth em seu aplicativo Next.js

Primeiro, instale a biblioteca do NextAuth em seu projeto.

npm install next-auth

A seguir, no /pages diretório, crie uma nova pasta e nomeie-a api. Altere o diretório para o api pasta e crie outra pasta chamada aut. Na pasta auth, adicione um novo arquivo e nomeie-o [...nextauth].js e adicione as seguintes linhas de código.

importar NextAuth de"next-auth/next";
importar GoogleProvider de"next-auth/providers/google";
exportarpadrão NextAuth({
 provedores:[
 GoogleProvider({
 clientId: processo.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Este código configura o Google como o provedor de autenticação. A função NextAuth define o objeto de configuração do provedor Google que recebe duas propriedades: um ID do cliente e um segredo do cliente que inicializa o provedor.

A seguir, abra o páginas/_app.js arquivo e faça as seguintes alterações no código.

importar'../styles/globals.css'
importar { SessionProvider } de"next-auth/react"
funçãoMeuAplicativo({ Componente, pageProps: { sessão, ...pageProps } }) {
retornar (


 </SessionProvider>
 )
}
exportarpadrão MeuAplicativo

NextAuth's SessionProvider O componente fornece funcionalidade de gerenciamento de estado de autenticação para o aplicativo Next.js. leva um sessão prop que contém os dados da sessão de autenticação retornados da API do Google, que inclui detalhes do usuário, como ID, e-mail e token de acesso.

Ao envolver o MeuAplicativo componente com o componente SessionProvider, o objeto de sessão de autenticação com detalhes do usuário é disponibilizado em todo o aplicativo, permitindo que o aplicativo persista e renderize páginas com base em seu estado de autenticação.

Configurar o arquivo index.js

Abra o páginas/index.js arquivo, exclua o código clichê e adicione o código abaixo para criar um botão de login que direcione os usuários para uma página de login.

importar Cabeça de'próximo/cabeça'
importar estilos de'../styles/Home.module.css'
importar { useRouter } de'próximo/roteador';
exportarpadrãofunçãoLar() {
const roteador = useRouter();

retornar (





Criar próximo aplicativo<<span>/title></span><br> <meta name="<span">"descrição" content=<span>"Gerado por criar próximo aplicativo"</span> /> <br> <link rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Bem-vindo ao <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Comece fazendo <span>login</span>{<span>' ' </span>}<br> <c classname="{styles.code}"><span>com</span> sua Conta do Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Login<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></c></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Este código usa o gancho Next.js <strong>useRouter</strong> para manipular o roteamento dentro do aplicativo definindo um objeto roteador. Quando o botão de login é clicado, a função do manipulador chama o método <strong>router.push</strong> para redirecionar o usuário para a página de login.</p> <h3 id="create-a-login-authentication-page">Crie uma autenticação de login Página</h3> <p>No diretório <strong>pages</strong>, crie um novo arquivo <strong>Login.js</strong> e adicione as seguintes linhas de código.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>de</span> <span>"next-auth/react"</span><br><span>importar</span> { useRouter } <span>de</span> <span>'próximo /router'</span>;<br><span>importar</span> estilos <span>de</span> <span>'../styles/Login.module.css'</span><p><span>exportar</span> <span>padrão</span> <span><span>função</span> < span>Login</span>() {<br> <span>const</span> { <span>dados</span>: sessão } = useSession()<br> <span>const</span> roteador = useRouter();<br> <span>if</span> (sessão) {<br> <span>return</span> (<br> </p>
<div classname="{estilos.container}">
<br> <h1 classname="<span">"title">Criar próximo aplicativo<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Assinado < span>em <span>como</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Perfil do usuário<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Sair<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>retorno</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Criar próximo aplicativo<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Você não está conectado <span>no</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Assinar <span>em</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> e <strong>signOut</strong> são ganchos fornecidos por <strong>next-auth</strong>. O gancho <strong>useSession</strong> é usado para acessar o objeto de sessão do usuário atual assim que o usuário entra e é autenticado com sucesso por Google.</p> <p>Isso permite que o Next.js mantenha o estado de autenticação e renderize os detalhes do usuário no lado do cliente do aplicativo, neste caso, o email.</p> <p>Além disso, usando o objeto de sessão, você pode criar facilmente perfis de usuário personalizados para seu aplicativo e armazenar os dados em um banco de dados como como PostgreSQL. Você pode <span>conectar um banco de dados PostgreSQL com seu aplicativo Next.js usando o Prisma</span>.</p> <p>O hook signOut permite que um usuário saia do aplicativo. Este gancho excluirá o objeto de sessão criado durante o processo de login e o usuário será desconectado.</p> <p>Vá em frente e ative o servidor de desenvolvimento para atualize as alterações e vá para o aplicativo Next.js em execução no navegador para testar a funcionalidade de autenticação.</p> <pre> <code>npm run dev</code> </pre> <p>Além disso, você pode <span>usar Tailwind CSS com seu aplicativo Next.js</span> para estilizar os modelos de autenticação.</p> <h2 id="authentication-using-nextauth"> Autenticação usando NextAuth  h2> </h2>
<p>NextAuth oferece suporte a vários serviços de autenticação que podem ser facilmente integrados em seus aplicativos Next.js para lidar com o lado do cliente autenticação.</p> <p>Além disso, você pode integrar um banco de dados para armazenar os dados de seus usuários e o token de acesso para implementar o lado do servidor autenticação para solicitações de autenticação subsequentes, pois o NextAuth fornece suporte para diferentes integrações de banco de dados.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>