So implementieren Sie die Authentifizierung in Next.js 14 mit NextAuth.js, Shadcn/ui, React-Hook-Form und Zod

Ein umfassender Leitfaden: Anmeldeinformationen (E-Mail und Passwort)

Die Gewährleistung der Sicherheit und Privatsphäre der Benutzer ist wichtiger denn je. Dabei spielt die Webauthentifizierung eine entscheidende Rolle und dient als erste Verteidigungslinie zum Schutz der Informationen und Daten der Benutzer.

Heute verfügen wir über Tools wie NextAuth.js, die unsere Arbeit erheblich erleichtern und es uns ermöglichen, verschiedene Arten der Authentifizierung problemlos in unseren Next.js-Anwendungen zu implementieren.

In dieser Reihe von Tutorials werden wir ein vollständiges Authentifizierungssystem in Next.js 14 erstellen, beginnend mit den Grundlagen: Authentifizierung mit E-Mail und Passwort.

Was ist NextAuth.js (Auth.js)?

Innerhalb des JavaScript-Ökosystems und insbesondere in mit Next.js entwickelten Anwendungen ist NextAuth.js eine der bekanntesten Bibliotheken für die Authentifizierung.

Dieses Tool bietet eine einfache und leicht zu implementierende Lösung zum Hinzufügen einer Authentifizierung zu unseren Anwendungen. Das Beste ist seine Flexibilität; Es ermöglicht die Integration verschiedener Authentifizierungsanbieter wie Google, Facebook und Twitter sowie der auf Anmeldeinformationen basierenden Authentifizierung wie der klassischen E-Mail und dem Passwort.

Implementieren der Anmeldeinformationsauthentifizierung

Die Anmeldeinformationsauthentifizierung ist besonders nützlich bei Anwendungen, bei denen Sie vollständige Kontrolle über den Authentifizierungsprozess und die Speicherung von Benutzeranmeldeinformationen benötigen oder wenn Sie sich nicht auf externe Authentifizierungsanbieter verlassen möchten.

Einrichten

1. Erstellen Sie mit dem folgenden Befehl ein neues Next.js-Projekt und befolgen Sie die angegebenen Schritte. Wir werden TypeScript und den Ordner src/ verwenden.

 npx create-next-app@latest

2. Installieren Sie die im Projekt benötigten Abhängigkeiten. Dieses Mal verwenden wir pnpm ; Sie können den Paketmanager Ihrer Wahl verwenden.

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

Für die Benutzeroberfläche verwenden wir Shadcn/ui.

 pnpm dlx shadcn-ui@latest init

• Prisma : ist ein Open-Source-Datenbank-Toolkit. Wir werden es verwenden, um Benutzeranmeldeinformationen zu speichern.

• nächste-Auth : Authentifizierung für Next.js.

• React-Hook-Form : eine Bibliothek, die Ihnen bei der Validierung von Formularen in React hilft.

• zod : ein Datenvalidator.

• bcrypt : um Passwörter zu hashen.

• shadcn/ui : eine Sammlung wiederverwendbarer Komponenten.

  
  

3. Erstellen Sie die folgende Struktur für das Projekt:

 ... ├── 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 │ ... ...

Prisma einrichten

Wir verwenden Prisma, um Benutzer in der Datenbank zu speichern und abzurufen. Prisma ermöglicht die Integration verschiedener Datenbanktypen, sodass Sie jede benötigte Datenbank verwenden können. Wir verwenden SQLite.

1. Prisma wird initialisiert .

   
   

 npx prisma init --datasource-provider sqlite

Dadurch wird der Prism-Ordner mit seinen Schemata erstellt.

2. Erstellen der Modelle.

Um die Modelle zu erstellen, verwenden wir die von @auth/prisma-adapter bereitgestellten und passen sie wie folgt ein wenig an:

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. Erstellen des ersten Migration .

 npx prisma migrate dev --name first-migration

Mit diesem Befehl wurden weitere Dateien im Prisma-Ordner erstellt und die Datenbank mit den Modellen synchronisiert.

4. Prisma-Client

Schließlich erstellen wir einen Prisma-Client.

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;

NextAuth.js einrichten

1. env erstellen.

 # 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. Erstellen der Authentifizierungsroute.

Dieser Pfad ermöglicht die Verarbeitung aller Authentifizierungsanforderungen (z. B. Anmeldung, Abmeldung und Anbieterrückrufe) an einem einzigen Endpunkt.

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

3. Erstellen der Anbieter.

 ... // 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. Erstellen des Authentifizierungsanbieters.

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> }

Diese Komponente fungiert als Sitzungsanbieter für Next.js-Anwendungen, die NextAuth zur Authentifizierung verwenden.

Das Einschließen von Komponenten oder Seiten in diesen Anbieter gewährt ihnen Zugriff auf den Sitzungskontext, sodass untergeordnete Komponenten NextAuth-Hooks und -Funktionen wie useSession verwenden können, um auf den Status der aktuellen Sitzung des Benutzers zuzugreifen oder diesen zu ändern.

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> ) }

Einrichten der Benutzeroberfläche mit Shadcn/ui

1. Installieren Sie shadcn/ui gemäß den Anweisungen Dokumentation (Schritt 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

Sie können das Thema Ihrer Wahl verwenden.

2. Umsetzung Dunkler Modus

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. Installation der folgenden shadcn/ui-Komponenten:

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

Authentifizierungskomponenten erstellen

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> ) }

Diese Komponente zeigt dynamisch Authentifizierungsoptionen basierend auf dem Sitzungsstatus des Benutzers an. Wenn der Benutzer angemeldet ist, wird eine benutzerspezifische Navigation angezeigt. Ansonsten bietet es Schaltflächen zum Anmelden oder Registrieren und nutzt dabei das Routing von Next.js und die Authentifizierungsfunktionen von NextAuth für ein reibungsloses Benutzererlebnis.

Ändern Sie die Startseite und fügen Sie die Authentifizierungsschaltflächen hinzu. So sieht es aus:

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> ) }

Diese Komponente kapselt ein Benutzerregistrierungsformular und nutzt React-Hook-Form für die Formularstatusverwaltung und Zod für die Schemavalidierung.

Obwohl dies kein Tutorial zu diesen Technologien ist, verwenden wir nur die Grundlagen dieser Technologien. Wenn Sie weitere Fragen haben, können Sie sich die Dokumentation ansehen.

Ich habe der Seite einige weitere Stile hinzugefügt und sie sieht so aus:

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.' } } }

Die Funktion registerUser dient dazu, einen neuen Benutzer sicher zu registrieren, indem in der Datenbank ein Datensatz mit den bereitgestellten Benutzerinformationen erstellt wird, mit Ausnahme von Feldern wie id , phone , emailVerified “ und „ image “.

Es verwendet bcrypt, um das Passwort des Benutzers zur sicheren Speicherung zu hashen.

Um unsere Anmeldung zu testen und zu überprüfen, ob sich der Benutzer korrekt registriert, müssen wir einige Rückrufe hinzufügen; Hierbei handelt es sich um Funktionen, mit denen Sie das Verhalten der Authentifizierung und Sitzungsverwaltung anpassen können.

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 }, }, } ...

Rückruf jwt : Dieser Rückruf wird immer dann ausgeführt, wenn während des Authentifizierungslebenszyklus ein JSON Web Token (JWT) erstellt oder aktualisiert wird. Es ermöglicht Ihnen, den Inhalt des Tokens zu ändern, bevor es signiert und an den Client gesendet oder auf dem Server gespeichert wird.

Dies ist nützlich, um dem Token zusätzliche Informationen hinzuzufügen, die für Ihre Anwendungslogik relevant sein können.

session : Dieser Rückruf wird jedes Mal aufgerufen, wenn die Sitzungsdaten gelesen werden, beispielsweise beim serverseitigen Rendern oder bei geschützten API-Anfragen. Es ermöglicht die Änderung von Sitzungsdaten, bevor sie an den Client gesendet werden.

Dies ist besonders nützlich, um Sitzungsdaten basierend auf im JWT gespeicherten Informationen oder anderen Kriterien hinzuzufügen oder zu ändern.

Schließlich müssen wir die NextAuth- Session und JWT Typdefinitionen erweitern, um zusätzliche Benutzerinformationen aufzunehmen.

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 } }

Wenn wir nun das Formular ausfüllen und absenden, können wir den Erfolgstoast sehen. Um zu überprüfen, ob der Benutzer in der Datenbank gespeichert wurde, können wir die von Prisma erstellten Tabellen mit dem folgenden Befehl grafisch anzeigen:

 nxp prisma studio

Wir werden die folgende Route http://localhost:5555 zur Verfügung haben

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> ) } 

🎉 Es ist geschafft!

Wir haben die Implementierung einer Basisauthentifizierung mit NextAuth.js abgeschlossen. Es gibt noch viele Dinge zu tun, um ein vollständiges Authentifizierungssystem zu haben, und wir werden sie in den nächsten Tutorials behandeln.

🔗 Repo hier

Abschluss

Zusammenfassend haben wir untersucht, wie man mit NextAuth ein Authentifizierungssystem in Next.js implementiert und anpasst, wie man Sitzungen und JWTs erweitert, um die Benutzerverwaltung zu bereichern, und wie man Formulare mit effektiver Validierung mithilfe von React-Hook-Form und Zod verarbeitet.

Möchten Sie mit dem Autor in Kontakt treten?

Ich liebe es, mich mit Freunden auf der ganzen Welt zu vernetzen 𝕏 .

Auch hier veröffentlicht