0Pricing
Next.js 15 Fullstack Web Apps · Lekcja

Integracja NextAuth.js

Skonfiguruj NextAuth.js, aby łatwo uwierzytelniać użytkowników za pomocą różnych dostawców i logowania na podstawie danych uwierzytelniających.

Integracja NextAuth.js to bezpłatna lekcja Next.js 15 Fullstack Web Apps na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Next.js 15 Fullstack Web Apps, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

What is NextAuth.js?

Welcome to integrating NextAuth.js! This powerful library simplifies authentication in Next.js applications, making it easy to add login functionality.

NextAuth.js supports various authentication strategies, from social logins (like Google, GitHub) to custom credential-based systems, all with minimal setup.

It handles session management, JWTs, and secure callbacks, abstracting away much of the complexity of building a secure authentication system.

Installing NextAuth.js

First, let's add NextAuth.js to your Next.js project. Open your terminal in your project's root directory and run the following command:

npm install next-auth

Setting up the Auth API Route

NextAuth.js needs a special API route to handle all authentication requests. For the App Router, create a file at app/api/auth/[...nextauth]/route.js.

This file exports a handler that NextAuth.js uses to process sign-in, sign-out, and session requests. Initially, we'll set it up with no providers.

import NextAuth from "next-auth";

export const authOptions = {
  providers: [], // Your authentication providers go here
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Adding a Google OAuth Provider

Let's integrate Google as an OAuth provider. You'll need to install the specific provider package and then add it to your authOptions.

Make sure you've set up a Google OAuth client ID and secret in the Google Cloud Console.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

// Install: npm install @next-auth/google

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Securing Credentials (.env.local)

It's crucial to keep your API keys and secrets secure. Store them in a .env.local file in your project's root directory.

You'll need a NEXTAUTH_SECRET (a long, random string) for signing tokens and encrypting cookies, along with your Google credentials.

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
NEXTAUTH_SECRET=a_very_long_and_random_string_for_security

Client Session Provider

To make session data available to your client components, you need to wrap your application with a SessionProvider. For the App Router, create a client component like app/providers.jsx:

"use client";

import { SessionProvider } from "next-auth/react";

export default function AuthProvider({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}

Integrating AuthProvider

Now, import and use your custom AuthProvider in your root layout file (app/layout.js). This ensures that all components within your application can access the session context.

import AuthProvider from "./providers"; // Adjust path as needed

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Accessing Session Data (useSession)

In any client component, you can use the useSession hook from next-auth/react to access the current user's session data.

It provides the session object (if a user is logged in) and a status (e.g., 'loading', 'authenticated', 'unauthenticated').

"use client";

import { useSession } from "next-auth/react";

export default function UserInfo() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <p>Loading user info...</p>;
  }

  if (session) {
    return (
      <div>
        <p>Welcome, {session.user.name}!</p>
        <p>Email: {session.user.email}</p>
      </div>
    );
  }

  return <p>Please sign in.</p>;
}

Authentication UI Actions

To allow users to sign in and out, NextAuth.js provides the signIn and signOut functions. You can import these and use them with buttons or links.

signIn() can take a provider ID (e.g., 'google') to specify the login method.

"use client";

import { useSession, signIn, signOut } from "next-auth/react";

export default function AuthButtons() {
  const { data: session } = useSession();

  if (session) {
    return (
      <button onClick={() => signOut()} style={{ padding: '10px' }}>
        Sign Out
      </button>
    );
  }
  return (
    <button onClick={() => signIn("google")} style={{ padding: '10px' }}>
      Sign In with Google
    </button>
  );
}

Beyond OAuth: Credentials Provider

While OAuth providers are convenient, NextAuth.js also supports a CredentialsProvider for custom username/password login forms.

This requires you to implement your own authorize function to validate user input against your database, offering full control over the login process.

// ... in your authOptions.providers array
CredentialsProvider({
  name: "Credentials",
  credentials: {
    email: { label: "Email", type: "email" },
    password: { label: "Password", type: "password" }
  },
  async authorize(credentials, req) {
    // Here you'd query your database to validate credentials
    // If valid, return a user object; otherwise, return null
    // Example: const user = await getUserByEmailAndPassword(credentials.email, credentials.password);
    // if (user) { return user; } else { return null; }
    return null; // Placeholder
  }
})

NextAuth.js Setup Quiz

You've learned the core steps to integrate NextAuth.js. Let's quickly check your understanding.

Recap: NextAuth.js Integration

Great job! You've learned how to integrate NextAuth.js into your Next.js application:

  • Installed the next-auth package.
  • Set up the dynamic API route for authentication (app/api/auth/[...nextauth]/route.js).
  • Configured a social OAuth provider like Google.
  • Secured credentials using .env.local.
  • Wrapped your app with SessionProvider for client-side session access.
  • Used useSession to get user data and implemented signIn/signOut functions.

NextAuth.js significantly streamlines the process of adding robust authentication to your Next.js projects!

Często zadawane pytania

Czy lekcja „Integracja NextAuth.js” jest bezpłatna?

Tak — pełny tekst „Integracja NextAuth.js” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Next.js 15 Fullstack Web Apps, przejdź na CoddyKit PRO. Kurs Next.js 15 Fullstack Web Apps zawiera 4 lekcji w sumie.

Co nauczysz się w „Integracja NextAuth.js”?

Skonfiguruj NextAuth.js, aby łatwo uwierzytelniać użytkowników za pomocą różnych dostawców i logowania na podstawie danych uwierzytelniających. Ćwiczysz Next.js 15 Fullstack Web Apps z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Next.js 15 Fullstack Web Apps?

Nie wymagamy żadnego doświadczenia. Next.js 15 Fullstack Web Apps w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Integracja NextAuth.js”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Next.js 15 Fullstack Web Apps?

Tak. Każda lekcja Next.js 15 Fullstack Web Apps zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Integracja NextAuth.js
  2. Zarządzanie sesjami i JWT
  3. Middleware i kontrola dostępu
  4. Kontrola dostępu oparta na rolach (RBAC)
← Powrót do Next.js 15 Fullstack Web Apps