next-auth NPM (Como funciona para desenvolvedores)
A autenticação é crucial para as aplicações web modernas, garantindo que os usuários possam acessar seus dados e recursos com segurança e fornecendo suporte à infraestrutura. NextAuth.js é uma biblioteca de autenticação poderosa e flexível, projetada para funcionar perfeitamente com o Next.js. Este artigo irá explorar como você pode configurar e usar o NextAuth.js em um projeto Next.js para proteger os dados do usuário com facilidade. Também mostraremos como este pacote npm pode ser integrado a outras bibliotecas, como a biblioteca IronPDF , para autenticação sem estado intuitiva em seus projetos.
O que é NextAuth.js?
NextAuth.js é uma biblioteca de autenticação de código aberto para aplicações Next.js que oferece uma maneira flexível e segura de implementar autenticação em aplicativos web. Com o NextAuth.js, os desenvolvedores podem integrar facilmente a autenticação em seus projetos Next.js sem precisar lidar com as complexidades da autenticação de usuários e do gerenciamento de sessões.
O pacote é altamente configurável, permitindo que os desenvolvedores personalizem fluxos de autenticação, protejam rotas de API e gerenciem sessões de usuário de forma integrada. Com funcionalidades aprimoradas que permitem criar procedimentos para gerenciar o acesso a contas, criptografar e decodificar JSON Web Tokens e estabelecer políticas de segurança de cookies e atributos de sessão personalizados, você pode regular o acesso às contas e a frequência de verificação da sessão.
Por que escolher o NextAuth.js?
O NextAuth.js oferece diversas vantagens:
- Facilidade de uso: Configuração simples com ajustes mínimos.
- Flexibilidade: Suporta diversos provedores de autenticação, incluindo OAuth, e-mail/senha e muito mais.
- Segurança: Recursos de segurança integrados para proteger os dados do usuário em seu próprio banco de dados.
- Extensibilidade: Facilmente extensível para atender a necessidades de autenticação personalizadas.
Primeiros passos com o NextAuth.js no npm
Primeiro, vamos criar um novo projeto Next.js. Abra o terminal e execute:
npx create-next-app@latest my-next-auth-app
cd my-next-auth-app
npx create-next-app@latest my-next-auth-app
cd my-next-auth-app
Em seguida, instale o NextAuth.js:
npm install next-auth
npm install next-auth
Configurando o NextAuth.js
Crie um novo arquivo para sua rota de API para lidar com a autenticação. No diretório pages/api/auth, crie o seguinte arquivo [...nextauth].js:
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
// Configuring NextAuth to use GitHub and Google providers for authentication
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET, // Secret for encrypting tokens if needed
});
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
// Configuring NextAuth to use GitHub and Google providers for authentication
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET, // Secret for encrypting tokens if needed
});
Variáveis de ambiente
Crie um arquivo .env.local na raiz do seu projeto para armazenar suas variáveis de ambiente:
# Just make sure to fill out the variables with your actual information!
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_nextauth_secret
Adicionando autenticação ao seu aplicativo
Agora, vamos adicionar autenticação ao seu aplicativo. Crie um botão de login e um componente de perfil para exibir as informações do usuário.
// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
const { data: session, status } = useSession();
const loading = status === "loading"; // Used to determine loading state
return (
<div>
{!session && ( // Render sign-in buttons when session is not active
<>
<button onClick={() => signIn('github')}>Sign in with GitHub</button>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</>
)}
{session && ( // Display user info and sign-out option when session is active
<>
<p>Signed in as {session.user.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</>
)}
</div>
);
};
export default LoginButton;
// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
const { data: session, status } = useSession();
const loading = status === "loading"; // Used to determine loading state
return (
<div>
{!session && ( // Render sign-in buttons when session is not active
<>
<button onClick={() => signIn('github')}>Sign in with GitHub</button>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</>
)}
{session && ( // Display user info and sign-out option when session is active
<>
<p>Signed in as {session.user.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</>
)}
</div>
);
};
export default LoginButton;
Explicação do código
O componente LoginButton gerencia a autenticação do usuário em uma aplicação Next.js usando o NextAuth.js. Ele usa o gancho useSession para determinar se um usuário está conectado. Caso o usuário não esteja autenticado, serão exibidos botões que permitem que ele faça login usando o GitHub ou o Google. Se o usuário estiver autenticado, será exibida uma mensagem com seu endereço de e-mail e um botão para sair. Este componente fornece uma interface simples para gerenciar ações de login e logout de usuários através da manipulação de um objeto de sessão.
Proteção de rotas
Para proteger rotas e garantir que apenas usuários autenticados possam acessar determinadas páginas, utilize a função getSession do NextAuth.js.
// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
if (!session) {
return <p>You need to be authenticated to view this page.</p>;
}
return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
const session = await getSession(context); // Fetch session data server-side
return {
props: { session },
};
}
export default ProtectedPage;
// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
if (!session) {
return <p>You need to be authenticated to view this page.</p>;
}
return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
const session = await getSession(context); // Fetch session data server-side
return {
props: { session },
};
}
export default ProtectedPage;
Explicação do código
O componente ProtectedPage em uma aplicação Next.js utiliza o NextAuth.js para restringir o acesso apenas a usuários autenticados. Ele recupera as propriedades da sessão do usuário no lado do servidor usando getServerSideProps e as passa como uma propriedade para o componente. Se o usuário não estiver autenticado, a página exibirá uma mensagem indicando que a autenticação é necessária. Se o usuário estiver autenticado, ele será recebido com a exibição do seu endereço de e-mail. Essa configuração garante que apenas usuários autenticados possam acessar o conteúdo da página.
Apresentando o IronPDF
IronPDF é uma poderosa biblioteca de PDF for Node.js que permite aos desenvolvedores gerar e editar PDFs em seus projetos Node.js Seja para criar PDFs a partir de HTML, manipular PDFs existentes ou converter páginas da web para o formato PDF, o IronPDF tem a solução ideal para você.

Principais características
Conversão de HTML para PDF
Converta conteúdo HTML em documentos PDF sem esforço. Essa funcionalidade é particularmente útil para gerar PDFs dinâmicos a partir de conteúdo da web.
Conversão de URL para PDF
Gere PDFs diretamente a partir de URLs, permitindo capturar o conteúdo de páginas da web e salvá-los como arquivos PDF programaticamente.
Manipulação de PDF
Mescle, divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades como anexar páginas, dividir documentos e muito mais.
Segurança de PDF
Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais. O IronPDF oferece opções para proteger seus documentos confidenciais contra acesso não autorizado.
Saída de alta qualidade
Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação. O IronPDF garante que os PDFs gerados mantenham a fidelidade ao conteúdo original.
Compatibilidade entre plataformas
O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.
Integração simples
Integre facilmente o IronPDF em suas aplicações Node.js usando o pacote npm. A API é bem documentada, o que facilita a incorporação de recursos de geração de PDF em seus projetos.
Instalação
Para instalar o pacote IronPDF , utilize o seguinte comando:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
Gere documentos PDF usando IronPDF e NextAuth.js
Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso) usando o seguinte comando:
npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
Em seguida, navegue até o diretório do seu projeto:
cd nextauth
cd nextauth
Instale os pacotes necessários:
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth
Criar um gerador de PDF
API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma API para ser chamada quando um usuário quiser gerar um PDF. Crie um arquivo no caminho pages/api/pdf.js e adicione o seguinte conteúdo:
// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
try {
const currentDate = new Date();
const formattedDate = format(currentDate, 'MMMM do, yyyy');
// Defining the HTML content for the PDF
let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
content += `<p>Date: ${currentDate}</p>`;
content += `<p>Formatted Date: ${formattedDate}</p>`;
// Convert HTML content to PDF
const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf"
);
res.send(data); // Send the PDF file as a response
} catch (error) {
console.error("Error generating PDF:", error);
res.status(500).end();
}
}
// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
try {
const currentDate = new Date();
const formattedDate = format(currentDate, 'MMMM do, yyyy');
// Defining the HTML content for the PDF
let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
content += `<p>Date: ${currentDate}</p>`;
content += `<p>Formatted Date: ${formattedDate}</p>`;
// Convert HTML content to PDF
const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf"
);
res.send(data); // Send the PDF file as a response
} catch (error) {
console.error("Error generating PDF:", error);
res.status(500).end();
}
}
Isso cria uma rota de API Next.js que gera um arquivo PDF usando a biblioteca IronPDF . Ele cria uma string HTML contendo um cabeçalho e a data atual, formata a data usando date-fns e converte o HTML em um PDF. O PDF gerado é então retornado como um arquivo para download na resposta. Essa abordagem permite a geração dinâmica de PDFs em um ambiente de servidor, tornando-a útil para a criação de relatórios, faturas ou outros documentos instantaneamente.
Agora vamos adicionar um login GIT ao nosso site front-end usando o Next-Auth. Para isso, precisamos obter o GitID e o segredo do usuário. Faça login na sua conta Git e acesse as configurações de desenvolvedor, conforme mostrado abaixo:

Clique em _Novo aplicativo GitHub e adicione os detalhes do seu site:

Guarde o ID do aplicativo e o ID do cliente em um local seguro. Em seguida, crie um arquivo .env.local na raiz do seu projeto para armazenar suas variáveis de ambiente:
# Here you can use the App and Client ID you just got from GitHub
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
NEXTAUTH_SECRET=secret
Crie um novo arquivo para sua rota de API para lidar com a autenticação. No diretório pages/api/auth, crie um arquivo [...nextauth].js da seguinte forma:
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
// Setting up NextAuth with GitHub provider
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
// Setting up NextAuth with GitHub provider
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
E adicione um componente chamado LoginButton.js. Que conterá o seguinte:
// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) { // Display sign-out button and user info when session is active
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return ( // Display sign-in button when not signed in
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) { // Display sign-out button and user info when session is active
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return ( // Display sign-in button when not signed in
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Modifique seu index.js conforme abaixo:
// pages/index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession } from "next-auth/react";
export default function Home() {
const [text, setText] = useState("");
const { data: session } = useSession();
useEffect(() => {
const currentDate = new Date();
const formattedDate = format(currentDate, "MMMM do, yyyy");
setText(formattedDate); // Set initial text state to formatted current date
}, []);
const generatePdf = async () => {
try {
const response = await fetch("/api/pdf-datefns?f=" + text);
const blob = await response.blob();
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "awesomeIron.pdf");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link); // Clean up after downloading
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
setText(event.target.value); // Update the text state with input value
};
return (
<div className={styles.container}>
<Head>
<title>Generate PDF Using IronPDF</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
{!session && <LoginButton />}
{session && (
<>
<p className="w-full text-center">
<span className="px-4 text-xl border-gray-500">
You are logged in enter URL to convert to PDF:
</span>
<input
className="border border-gray-700 w-1/4"
onChange={handleChange}
placeholder="Enter URL here..."
/>
</p>
<button
className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
onClick={generatePdf}
>
Generate PDF
</button>
</>
)}
</main>
<style jsx>{`
main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
margin-left: 0.5rem;
}
footer a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
}
code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
);
}
// pages/index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession } from "next-auth/react";
export default function Home() {
const [text, setText] = useState("");
const { data: session } = useSession();
useEffect(() => {
const currentDate = new Date();
const formattedDate = format(currentDate, "MMMM do, yyyy");
setText(formattedDate); // Set initial text state to formatted current date
}, []);
const generatePdf = async () => {
try {
const response = await fetch("/api/pdf-datefns?f=" + text);
const blob = await response.blob();
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "awesomeIron.pdf");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link); // Clean up after downloading
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
setText(event.target.value); // Update the text state with input value
};
return (
<div className={styles.container}>
<Head>
<title>Generate PDF Using IronPDF</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
{!session && <LoginButton />}
{session && (
<>
<p className="w-full text-center">
<span className="px-4 text-xl border-gray-500">
You are logged in enter URL to convert to PDF:
</span>
<input
className="border border-gray-700 w-1/4"
onChange={handleChange}
placeholder="Enter URL here..."
/>
</p>
<button
className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
onClick={generatePdf}
>
Generate PDF
</button>
</>
)}
</main>
<style jsx>{`
main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
margin-left: 0.5rem;
}
footer a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: inherit;
}
code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
box-sizing: border-box;
}
`}</style>
</div>
);
}
Saída para o exemplo de código
Primeira página

Página de login

Após o login

PDF gerado como saída

Licença IronPDF
IronPDF .
Não se esqueça de inserir a chave de licença que você recebeu no início do seu código, assim:
// Adjust paths as necessary depending on how you import IronPDF
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
// Adjust paths as necessary depending on how you import IronPDF
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
Conclusão
Em resumo, o NextAuth.js simplifica o processo de adicionar autenticação às suas aplicações Next.js. Com suporte para múltiplos provedores e recursos de segurança robustos, é uma ótima opção para lidar com a autenticação de usuários. Você sempre pode explorar a documentação do NextAuth.js para obter configurações e recursos mais avançados. Além disso, o IronPDF Node.js oferece recursos robustos de geração e manipulação de PDFs para sua aplicação e se integra bem ao desenvolvimento de aplicações modernas.




