NextAuth.js integrieren
Richten Sie NextAuth.js für eine einfache und sichere Authentifizierung in Ihrer Next.js-Anwendung ein und konfigurieren Sie es.
NextAuth.js integrieren ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 1 von 6. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 6 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Auth with Next.js 15
Welcome to Integrating NextAuth.js! In modern web applications, user authentication is crucial. It allows users to sign in, proves their identity, and grants them access to personalized content.
Implementing authentication from scratch can be complex and error-prone, involving secure password hashing, session management, and protecting against various attacks.
Introducing NextAuth.js
NextAuth.js (now often referred to as Auth.js) is a complete open-source authentication solution for Next.js applications. It simplifies adding authentication to your project significantly.
- Easy Setup: Get authentication working quickly with minimal configuration.
- Multiple Providers: Supports various authentication methods like Google, GitHub, Email, or custom credentials.
- Secure: Handles many security best practices for you.
- Flexible: Works seamlessly with both Client and Server Components.
Installation
First, let's install the next-auth package in your Next.js project. Open your terminal in the project root and run:
You'll also need to configure environment variables for security and proper functioning.
npm install next-authNextAuth.js Configuration
In Next.js 15 (App Router), NextAuth.js uses a configuration file, typically auth.ts, to define how authentication works. This file exports a configuration object that includes your authentication providers.
You also need to set an environment variable, AUTH_SECRET, which is used to sign and encrypt session tokens. It should be a long, random string.
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
username: { label: "Username", type: "text", placeholder: "jsmith" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
// Logic to verify user credentials
// Return user object if successful, null otherwise
return null;
}
})
],
pages: {
signIn: '/auth/signin',
}
});Credentials Provider
The Credentials Provider allows users to sign in with a username/email and password. You define the input fields (credentials) and provide an authorize function.
The authorize function is where you'll verify the user's input against your database. For this example, we'll use a simple hardcoded check.
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
username: { label: "Username", type: "text", placeholder: "test" },
password: { label: "Password", type: "password" }
},
async authorize(credentials) {
if (credentials?.username === "user" && credentials?.password === "pass") {
return { id: "1", name: "Test User", email: "test@example.com" };
}
return null; // Authentication failed
}
})
],
pages: {
signIn: '/auth/signin',
}
});Sign-in Page Component
Now, let's create a client component that provides a sign-in form. We'll use the signIn function exported from our auth.ts file (or next-auth/react if preferred for client components).
This component will handle user input and trigger the authentication flow using the Credentials Provider we configured.
// app/auth/signin/page.tsx (Client Component)
'use client';
import { signIn } from "next-auth/react";
import { useState } from "react";
export default function SignInPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const result = await signIn('credentials', {
username,
password,
redirect: false, // Don't redirect automatically
});
if (result?.error) {
alert(result.error);
} else {
window.location.href = '/'; // Redirect on success
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username (user)"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password (pass)"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Sign In</button>
</form>
);
}Displaying Session Data
Once a user is signed in, you can access their session information. In Server Components, you can directly use the auth() function from auth.ts to get the session data.
This is great for rendering UI based on the logged-in user or fetching user-specific data on the server.
// app/page.tsx (Server Component)
import { auth, signOut } from "@/auth"; // Adjust path if needed
export default async function HomePage() {
const session = await auth();
return (
<div>
<h1>Welcome!</h1>
{session?.user ? (
<div>
<p>Signed in as {session.user.name || session.user.email}</p>
{/* SignOut button would be in a Client Component */}
</div>
) : (
<p>Not signed in. <a href="/auth/signin">Sign In</a></p>
)}
</div>
);
}Implementing Sign Out
Allowing users to sign out is just as important as signing in. You can use the signOut function from next-auth/react in a Client Component.
When called, signOut clears the user's session and typically redirects them to a specified page (like the homepage or a sign-in page).
// app/components/SignOutButton.tsx (Client Component)
'use client';
import { signOut } from "next-auth/react";
export default function SignOutButton() {
return (
<button onClick={() => signOut({ callbackUrl: '/' })}>
Sign Out
</button>
);
}NextAuth.js Options
NextAuth.js offers many configuration options to customize behavior. In your auth.ts, you can define:
pages: Custom URLs for sign-in, sign-out, error pages.callbacks: Functions to control what happens when a user signs in, updates their session, or creates a JWT.session: Configure session storage (JWT or database).secret: TheAUTH_SECRETenvironment variable.
These options provide powerful control over the authentication flow and user experience.
Quick Check
Which file is primarily used to configure NextAuth.js providers and callbacks in a Next.js 15 App Router project?
Recap & Next Steps
You've successfully learned the basics of integrating NextAuth.js into your Next.js 15 application!
- We installed NextAuth.js.
- Configured
auth.tswith a Credentials Provider. - Created client components for sign-in and sign-out.
- Accessed session data in server components.
In the next lesson, we'll explore how to protect routes and data based on user authentication status using Next.js middleware and server-side checks.
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „NextAuth.js integrieren“ kostenlos?
Ja — der vollständige Text von „NextAuth.js integrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 6 Lektionen.
Was lerne ich in „NextAuth.js integrieren“?
Richten Sie NextAuth.js für eine einfache und sichere Authentifizierung in Ihrer Next.js-Anwendung ein und konfigurieren Sie es. Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 6.
Wie lange dauert die Lektion „NextAuth.js integrieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- NextAuth.js integrieren
- Implementierung einer JWT-Strategie
- Routen und Daten schützen
- Guards und Rollen
- Benutzerdefinierte Authentifizierungsstrategien
- Passport.js integrieren