0Pricing
React Academy · Lekcja

Konfiguracja Auth.js w Next.js App Router

Instalacja Auth.js, konfiguracja handlerów tras i dodanie dostawcy OAuth GitHub.

Konfiguracja Auth.js w Next.js App Router to bezpłatna lekcja React Academy 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest Auth.js?

Auth.js (wcześniej NextAuth.js v5) to rozbudowana biblioteka uwierzytelniania dla Next.js. Od razu obsługuje dostawców OAuth, dane logowania, sesje i JWT.

Instalacja

Zainstaluj wersję beta Auth.js i zainicjalizuj plik konfiguracji.

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

Tworzenie konfiguracji uwierzytelniania

Zdefiniuj konfigurację uwierzytelniania w pliku auth.ts w katalogu głównym projektu, podając dostawców i callbacki.

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

Konfiguracja handlera trasy

Utwórz handler trasy catch-all w pliku app/api/auth/[...nextauth]/route.ts, który przekazuje obsługę do handlerów Auth.js.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

Zmienne środowiskowe

Ustaw wymagane zmienne środowiskowe dla dostawców OAuth. AUTH_SECRET jest wymagane do podpisywania JWT.

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

Dodawanie przycisków logowania i wylogowania

Importuj signIn i signOut z auth.ts i używaj ich w formularzach Server Components.

import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('github'); }}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => { 'use server'; await signOut(); }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Odczytywanie sesji w Server Components

Wywołaj auth() z auth.ts w dowolnym Server Componencie lub handlerze trasy, aby pobrać bieżącą sesję.

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

Ochrona stron za pomocą middleware

Użyj middleware Auth.js do ochrony tras na brzegu sieci bez uruchamiania logiki serwera przy każdym żądaniu.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Sesje bazodanowe

Dodaj adapter bazy danych (np. @auth/prisma-adapter), aby przechowywać sesje, użytkowników i konta w bazie danych zamiast w JWT.

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

Dostosowywanie typu sesji

Rozszerz typy sesji Auth.js o niestandardowe pola, takie jak identyfikator użytkownika lub rola.

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

Obsługa błędów

Auth.js domyślnie przekierowuje na /error w przypadku niepowodzenia uwierzytelniania. Utwórz app/error/page.tsx, aby dostosować stronę błędu.

Szybki test

Jaki plik należy utworzyć, aby udostępnić handlery GET i POST Auth.js w Next.js App Router?

Podsumowanie

Zainstaluj next-auth@beta, utwórz auth.ts z dostawcami i callbackami, udostępnij handlery w app/api/auth/[...nextauth]/route.ts, ustaw AUTH_SECRET oraz zmienne środowiskowe dostawców i odczytuj sesję za pomocą auth() w Server Components.

Często zadawane pytania

Czy lekcja „Konfiguracja Auth.js w Next.js App Router” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Auth.js w Next.js App Router” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja Auth.js w Next.js App Router”?

Instalacja Auth.js, konfiguracja handlerów tras i dodanie dostawcy OAuth GitHub. Ćwiczysz React Academy 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy 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 „Konfiguracja Auth.js w Next.js App Router”?

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 React Academy?

Tak. Każda lekcja React Academy 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. Konfiguracja Auth.js w Next.js App Router
  2. Zarządzanie sesją i hook useSession
  3. Dostawca Credentials i niestandardowe logowanie
  4. Ochrona tras oparta na middleware
← Powrót do React Academy