Como implementar autenticação em Next.js 14 com NextAuth.js, Shadcn/ui, react-hook-form e Zod

Um guia completo: credenciais (e-mail e senha)

Garantir a segurança e a privacidade dos usuários é mais importante do que nunca. A autenticação Web desempenha um papel crucial neste aspecto, servindo como primeira linha de defesa para proteger as informações e dados dos utilizadores.

Hoje, temos ferramentas como NextAuth.js que facilitam muito nosso trabalho, nos permitindo implementar facilmente diferentes tipos de autenticação em nossas aplicações Next.js.

Nesta série de tutoriais vamos construir um sistema de autenticação completo em Next.js 14, começando pelo básico: autenticação com e-mail e senha.

O que é NextAuth.js (Auth.js)?

Dentro do ecossistema JavaScript e, mais especificamente, em aplicações desenvolvidas com Next.js, uma das bibliotecas mais proeminentes para lidar com autenticação é NextAuth.js.

Esta ferramenta oferece uma solução simples e fácil de implementar para adicionar autenticação às nossas aplicações. O melhor é a sua flexibilidade; permite a integração de diferentes provedores de autenticação como Google, Facebook e Twitter, além da autenticação baseada em credenciais, como os clássicos e-mail e senha.

Implementando Autenticação de Credenciais

A autenticação de credenciais é especialmente útil em aplicativos onde você precisa de controle total sobre o processo de autenticação e armazenamento de credenciais de usuário ou quando não deseja depender de provedores de autenticação externos.

Configurando

1. Crie um novo projeto Next.js com o seguinte comando e siga as etapas indicadas. Usaremos TypeScript e a pasta src/ .

 npx create-next-app@latest

2. Instale as dependências necessárias no projeto. Desta vez usaremos pnpm ; você pode usar o gerenciador de pacotes de sua escolha.

 pnpm install next-auth prisma react-hook-form zod, bcrypt

Para a UI, usaremos Shadcn/ui.

 pnpm dlx shadcn-ui@latest init

• prisma : é um kit de ferramentas de banco de dados de código aberto. Iremos usá-lo para armazenar credenciais do usuário.

• próxima autenticação : Autenticação para Next.js.

• forma de gancho de reação : uma biblioteca que ajuda a validar formulários no React.

• zod : um validador de dados.

• bcrypt : para hash de senhas.

• shadcn/ui : uma coleção de componentes reutilizáveis.

  
  

3. Crie a seguinte estrutura para o projeto:

 ... ├── prisma/ ... ├── src/ │ ├── actions/ │ │ └── auth-actions.tsx │ ├── app/ │ │ ├── api/auth/[...nextauth] │ │ │ └── route.ts │ │ ├── auth/ │ │ │ ├── signin │ │ │ │ └── page.tsx │ │ │ └── signup │ │ │ └── page.tsx │ │ │ ... │ ├── components/ │ │ ├── auth/ │ │ │ ├── auth-buttons.tsx │ │ │ ├── signin-form.tsx │ │ │ ├── signup-form.tsx │ │ │ └── user-nav.ts │ │ ├── ui/ │ │ │ ... │ │ ├── auth-provider.tsx │ │ ├── icons.tsx │ │ └── theme-provider.tsx │ ├── lib/ │ │ ├── prisma.ts │ │ ├── types.d.ts │ │ └── utils.ts │ ... ...

Configurando o Prisma

Usaremos o Prisma para armazenar e recuperar usuários no banco de dados. O Prisma permite a integração de diferentes tipos de banco de dados para que você possa utilizar qualquer banco de dados que precisar, usaremos SQLite.

1. Inicializando o Prisma .

   
   

 npx prisma init --datasource-provider sqlite

Isso cria a pasta prisma com seus esquemas.

2. Criando os modelos.

Para criar os modelos, usaremos os fornecidos por @auth/prisma-adapter e personalizá-los um pouco da seguinte forma:

prisma/schema.prisma :

 generator client { provider = "prisma-client-js" output = "../../node_modules/.prisma/client" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } ... model User { id String @id @default(cuid()) username String password String email String @unique emailVerified DateTime? phone String? image String? } ...

3. Criando o primeiro migração .

 npx prisma migrate dev --name first-migration

Com este comando foram criados mais arquivos na pasta Prisma e o banco de dados foi sincronizado com os modelos.

4. Cliente Prisma

Finalmente, criamos um cliente Prisma.

lib/prisma.ts :

 import { PrismaClient } from "@prisma/client"; const globalForPrisma = global as unknown as { prisma: PrismaClient; }; export const prisma = globalForPrisma.prisma || new PrismaClient(); if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma; export default prisma;

Configurando NextAuth.js

1. Criando variáveis env .

 # Secret key for NextAuth.js, used for encryption and session security. It should be a long, # random string unique to your application. NEXTAUTH_SECRET=XXX3B2CC28F123456C6934531CXXXXX # Base URL for your Next.js app, used by NextAuth.js for redirects and callbacks. NEXTAUTH_URL=http://localhost:3000/

2. Criando a rota de autenticação.

Este caminho permite lidar com todas as solicitações de autenticação (como login, logout e retornos de chamada de fornecedor) em um único endpoint.

src/app/api/auth/[...nextauth]

3. Criando os provedores.

 ... // Imports the Prisma User type for typing. import { User } from '@prisma/client' // Configuration of authentication options for NextAuth. export const authOptions: AuthOptions = { ... // Defines authentication providers, in this case, only credentials. providers: [ CredentialsProvider({ name: 'Credentials', // Defines the required fields for authentication. credentials: { email: { label: 'Email', type: 'text' }, password: { label: 'Password', type: 'password' }, }, // Function to authenticate the user with the provided credentials. async authorize(credentials) { // Searches for the user in the database by email. const user = await prisma.user.findUnique({ where: { email: credentials?.email, }, }) // Checks if the user exists and if the password is correct. if (!user) throw new Error('User name or password is not correct') if (!credentials?.password) throw new Error('Please Provide Your Password') const isPasswordCorrect = await bcrypt.compare(credentials.password, user.password) if (!isPasswordCorrect) throw new Error('User name or password is not correct') // Returns the user without including the password. const { password, ...userWithoutPass } = user return userWithoutPass }, }), ], } // Exports the configured NextAuth handler to handle GET and POST requests. const handler = NextAuth(authOptions) export { handler as GET, handler as POST }

4. Criando o Provedor de Autenticação.

src/components/auth-provider.tsx :

 'use client' import { SessionProvider } from 'next-auth/react' export default function AuthProvider({ children }: { children: React.ReactNode }) { return <SessionProvider>{children}</SessionProvider> }

Este componente atua como um provedor de sessão para aplicativos Next.js que usam NextAuth para autenticação.

O agrupamento de componentes ou páginas neste provedor concede-lhes acesso ao contexto da sessão, permitindo que componentes filhos usem ganchos e funcionalidades NextAuth, como useSession , para acessar ou modificar o estado da sessão atual do usuário.

src/app/layout.tsx :

 /* All imports */ export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang='en' suppressHydrationWarning > <body className={`${inter.className} relative`}> <AuthProvider> <main>{children}</main> </AuthProvider> </body> </html> ) }

Configurando a IU com Shadcn/ui

1. Instalando shadcn/ui seguindo o documentação (etapa 2) .

 Would you like to use TypeScript (recommended)? yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is your global CSS file? › src/app/globals.css Do you want to use CSS variables for colors? › yes Are you using a custom tailwind prefix eg. tw-? Leave blank Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components Configure the import alias for utils: › @/lib/utils Are you using React Server Components? › yes

Você pode usar o tema de sua preferência.

2. Implementação Modo escuro

src/app/layout.tsx :

 /* All imports */ export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang='en' suppressHydrationWarning > <body className={`${inter.className} relative`}> <AuthProvider> <ThemeProvider attribute='class' defaultTheme='dark' enableSystem disableTransitionOnChange > <main>{children}</main> <Toaster /> </ThemeProvider> </AuthProvider> </body> </html> ) }

2. Instalando os seguintes componentes shadcn/ui:

 pnpm dlx shadcn-ui@latest add avatar button dropdown-menu form input label tabs toast

Criando Componentes de Autenticação

src/components/auth-buttons.tsx :

 'use client' import Link from 'next/link' import { signIn, useSession } from 'next-auth/react' import { Button } from '../ui/button' import { UserNav } from './user-nav' export default function AuthButtons() { // Use the useSession hook to access session data const { data: session } = useSession() return ( <div className='flex justify-end gap-4'> {session && session.user ? ( <UserNav user={session.user} /> ) : ( <> <Button size={'sm'} variant={'secondary'} onClick={() => signIn()} > Sign In </Button> <Button size={'sm'} asChild className='text-foreground' > <Link href='/auth/signup'>Sign Up</Link> </Button> </> )} </div> ) }

Este componente exibe dinamicamente opções de autenticação com base no status da sessão do usuário. Se o usuário estiver logado, mostra a navegação específica do usuário. Caso contrário, ele oferece botões para entrar ou inscrever-se, fazendo uso do roteamento do Next.js e dos recursos de autenticação do NextAuth para uma experiência de usuário tranquila.

Modifique a página inicial e adicione os botões de autenticação. Isto é o que parece:

src/components/auth/signup-form.tsx :

 'use client' /* all imports */ // Function to register a new user import { registerUser } from '@/actions/auth-actions' // Define the validation schema for the signup form using Zod const formSchema = z .object({ username: z .string({ required_error: 'Username is required', }) .min(2, 'User name must have at least 2 characters') .max(12, 'Username must be up to 12 characters') .regex(new RegExp('^[a-zA-Z0-9]+$'), 'No special characters allowed!'), email: z.string({ required_error: 'Email is required' }).email('Please enter a valid email address'), password: z .string({ required_error: 'Password is required' }) .min(6, 'Password must have at least 6 characters') .max(20, 'Password must be up to 20 characters'), confirmPassword: z .string({ required_error: 'Confirm your password is required' }) .min(6, 'Password must have at least 6 characters') .max(20, 'Password must be up to 20 characters'), }) .refine(values => values.password === values.confirmPassword, { message: "Password and Confirm Password doesn't match!", path: ['confirmPassword'], }) // Type inference for form inputs based on the Zod schema type InputType = z.infer<typeof formSchema> export function SignUpForm() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() // Hook to show toast notifications // Initialize form handling with React Hook Form and Zod for validation const form = useForm<InputType>({ resolver: zodResolver(formSchema), }) // Handles form submission async function onSubmit(values: InputType) { try { setIsLoading(true) const { confirmPassword, ...user } = values // Exclude confirmPassword from data to be sent const response = await registerUser(user) // Register the user if ('error' in response) { toast({ title: 'Something went wrong!', description: response.error, variant: 'success', }) } else { toast({ title: 'Account Created!', description: 'Your account has been created successfully! You can now login.', }) } } catch (error) { console.error(error) toast({ title: 'Something went wrong!', description: "We couldn't create your account. Please try again later!", variant: 'destructive', }) } finally { setIsLoading(false) } } return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> <div className='grid gap-2'> // Each FormField validates and displays an input <FormField control={form.control} name='username' render={({ field }) => ( <FormItem> <FormControl> <div className='flex items-center gap-2'> <Icons.user className={`${form.formState.errors.username ? 'text-destructive' : 'text-muted-foreground'} `} /> <Input placeholder='Your Username' className={`${form.formState.errors.username && 'border-destructive bg-destructive/30'}`} {...field} /> </div> </FormControl> <FormMessage /> </FormItem> )} /> // Repeated structure for email, password, and confirmPassword with respective validations and icons <Button className='text-foreground mt-4' disabled={isLoading} // Disable button during form submission > {isLoading && <Icons.spinner className='mr-2 h-4 w-4 animate-spin' />} // Show loading icon if isLoading is true Sign Up </Button> </div> </form> </Form> ) }

Este componente encapsula um formulário de registro de usuário, utilizando react-hook-form para gerenciamento de estado de formulário e Zod para validação de esquema.

Embora este não seja um tutorial sobre essas tecnologias, estamos usando apenas o básico delas, se você tiver mais dúvidas, pode consultar a documentação delas.

Adicionei mais alguns estilos à página e ficou assim:

src/actions/auth-action/ts :

 'use server' /* all imports */ export async function registerUser(user: Omit<User, 'id' | 'phone' | 'emailVerified' | 'image'>) { try { // Attempt to create a new user record in the database const result = await prisma.user.create({ data: { ...user, // Hash the password before storing it password: await bcrypt.hash(user.password, 10), }, }) return result } catch (error) { console.log(error) // Handle known request errors from Prisma if (error instanceof Prisma.PrismaClientKnownRequestError) { // Check for unique constraint failure (eg, email already exists) if (error.code === 'P2002') { return { error: 'Email already exists.' } } } // Return a generic error message for any other errors return { error: 'An unexpected error occurred.' } } }

A função registerUser foi projetada para registrar com segurança um novo usuário, criando um registro no banco de dados com as informações do usuário fornecidas, excluindo campos como id , phone , emailVerified e image .

Ele usa bcrypt para fazer hash da senha do usuário para armazenamento seguro.

Para testar nosso cadastro e validar se o usuário está se cadastrando corretamente, precisamos adicionar alguns callbacks; são funções que permitem personalizar o comportamento de autenticação e gerenciamento de sessão.

src/app/api/auth/[...nextauth] :

 ... export const authOptions: AuthOptions = { // Define custom pages for authentication flow pages: { signIn: '/auth/signin', // Custom sign-in page }, // Configure session management to use JSON Web Tokens (JWT) session: { strategy: 'jwt', }, // JWT configuration, including secret for token signing jwt: { secret: process.env.NEXTAUTH_SECRET, // Secret used to sign the JWT, stored in environment variables }, ... // Callbacks for customizing JWT and session behaviors callbacks: { // Callback to modify the JWT content. Adds user information if available. async jwt({ token, user }) { if (user) token.user = user as User // Cast user object to User type and assign to token return token }, // Callback to modify session content. Adds user information to the session. async session({ token, session }) { session.user = token.user // Assign user information from token to session return session }, }, } ...

Callback jwt : esse callback é executado sempre que um JSON Web Token (JWT) é criado ou atualizado durante o ciclo de vida da autenticação. Ele permite modificar o conteúdo do token antes de ele ser assinado e enviado ao cliente ou armazenado no servidor.

Isso é útil para adicionar informações adicionais ao token, que podem ser relevantes para a lógica do seu aplicativo.

session de retorno de chamada: esse retorno de chamada é chamado sempre que os dados da sessão são lidos, como durante a renderização do lado do servidor ou em solicitações de API protegidas. Ele permite que os dados da sessão sejam modificados antes de serem enviados ao cliente.

Isso é especialmente útil para adicionar ou modificar dados de sessão com base nas informações armazenadas no JWT ou em outros critérios.

Finalmente, precisamos estender as definições de tipo NextAuth Session e JWT para incluir informações adicionais do usuário.

src/lib/types.d.ts :

 import { User } from '@prisma/client' declare module 'next-auth' { interface Session { user: User } } declare module 'next-auth/jwt' { interface JWT { user: User } }

Agora, se preenchermos o formulário e enviarmos, poderemos ver o brinde do sucesso. Para verificar se o usuário foi salvo no banco de dados, podemos ver graficamente as tabelas criadas pelo Prisma com o seguinte comando:

 nxp prisma studio

Teremos disponível a seguinte rota http://localhost:5555

src/components/auth/user-nav.tsx :

 /* all imports */ interface Props { user: User // Expect a user object of type User from Prisma client } export function UserNav({ user }: Props) { return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant='ghost' className='relative h-8 w-8 rounded-full' > <Avatar className='h-9 w-9'> <AvatarImage src='/img/avatars/01.png' alt='' /> <AvatarFallback>UU</AvatarFallback> </Avatar> </Button> </DropdownMenuTrigger> <DropdownMenuContent className='w-56' align='end' forceMount > <DropdownMenuLabel className='font-normal'> <div className='flex flex-col space-y-1'> <p className='text-sm font-medium leading-none'>{user.username}</p> <p className='text-xs leading-none text-muted-foreground'>{user.email}</p> </div> </DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem> <Link href={'/api/auth/signout'} // Link to the signout API route className='w-full' > Sign Out </Link> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } 

src/components/auth/signin-form.tsx :

 /* all imports */ // Schema definition for form validation using Zod const formSchema = z.object({ email: z.string({ required_error: 'Please enter your email' }).email('Please enter a valid email address'), password: z.string({ required_error: 'Please enter your password', }), }) // Type inference for form inputs based on the Zod schema type InputType = z.infer<typeof formSchema> // Props definition, optionally including a callback URL interface Props { callbackUrl?: string } export function SignInForm({ callbackUrl }: Props) { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const router = useRouter() // Hook to control routing const form = useForm<InputType>({ resolver: zodResolver(formSchema), // Set up Zod as the form validation resolver }) // Function to handle form submission async function onSubmit(values: InputType) { try { setIsLoading(true) // Attempt to sign in using the 'credentials' provider const response = await signIn('credentials', { redirect: false, // Prevent automatic redirection email: values.email, password: values.password, }) // Handle unsuccessful sign in attempts if (!response?.ok) { toast({ title: 'Something went wrong!', description: response?.error, variant: 'destructive', }) return } toast({ title: 'Welcome back! ', description: 'Redirecting you to your dashboard!', }) router.push(callbackUrl ? callbackUrl : '/') // Redirect to the callback URL or home page } catch (error) { toast({ title: 'Something went wrong!', description: "We couldn't create your account. Please try again later!", variant: 'destructive', }) } finally { setIsLoading(false) } } return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> <div className='grid gap-2'> <div className='grid gap-1'> <FormField control={form.control} name='email' render={({ field }) => ( <FormItem> <FormControl> <div className='flex items-center gap-2'> <Icons.email className={`${form.formState.errors.email ? 'text-destructive' : 'text-muted-foreground'} `}/> <Input type='email' placeholder='Your Email' className={`${form.formState.errors.email && 'border-destructive bg-destructive/30'}`} {...field} /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* Password field */} {/* Similar structure to email field, customized for password input */} </div> <Button className='text-foreground mt-4' disabled={isLoading} // Disable button while loading > {isLoading && <Icons.spinner className='mr-2 h-4 w-4 animate-spin' />} // Show loading spinner when processing Sign In </Button> </div> </form> </Form> ) } 

🎉 Está feito!

Concluímos a implementação de uma autenticação básica com NextAuth.js. Ainda há muitas coisas a fazer para ter um sistema de autenticação completo e iremos abordá-las nos próximos tutoriais.

🔗 Reponha aqui

Conclusão

Em resumo, exploramos como implementar e personalizar um sistema de autenticação em Next.js usando NextAuth, como estender sessões e JWTs para enriquecer o gerenciamento de usuários e como lidar com formulários com validação eficaz usando react-hook-form e Zod.

Quer se conectar com o autor?

Adoro me conectar com amigos de todo o mundo em 𝕏 .

Também publicado aqui