Fullstackwebapps met Next.js 15 · Les

NextAuth.js integreren

Stel NextAuth.js in voor eenvoudige authenticatie met verschillende providers en inloggen op basis van inloggegevens.

Les 1 van 412 stappen

NextAuth.js integreren is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat is NextAuth.js?

Welkom bij de integratie van NextAuth.js! Deze krachtige bibliotheek vereenvoudigt authenticatie in Next.js-applicaties, zodat je eenvoudig inlogfunctionaliteit kunt toevoegen.

NextAuth.js ondersteunt verschillende authenticatiestrategieën, van inloggen via sociale platforms zoals Google en GitHub tot systemen met aangepaste referenties, en dat met minimale configuratie.

De bibliotheek beheert sessies, JWT's en beveiligde callbacks en neemt zo een groot deel van de complexiteit van het bouwen van een veilig authenticatiesysteem uit handen.

NextAuth.js installeren

Voeg eerst NextAuth.js toe aan je Next.js-project. Open de terminal in de hoofdmap van je project en voer de volgende opdracht uit:

npm install next-auth

De Auth API-route instellen

NextAuth.js heeft een speciale API-route nodig om alle authenticatieverzoeken af te handelen. Maak voor de App Router een bestand aan op app/api/auth/[...nextauth]/route.js.

Dit bestand exporteert een handler die NextAuth.js gebruikt om verzoeken voor aanmelden, afmelden en sessies te verwerken. In eerste instantie configureren we deze zonder 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 };

Een Google OAuth-provider toevoegen

Laten we Google integreren als OAuth-provider. Je moet het specifieke providerpakket installeren en het vervolgens toevoegen aan je authOptions.

Zorg ervoor dat je in de Google Cloud Console een Google OAuth-client-ID en -geheim hebt ingesteld.

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

Referenties beveiligen (.env.local)

Het is essentieel om je API-sleutels en geheimen veilig te bewaren. Sla ze op in een bestand .env.local in de hoofdmap van je project.

Je hebt een NEXTAUTH_SECRET nodig, een lange, willekeurige tekenreeks, om tokens te ondertekenen en cookies te versleutelen, samen met je Google-referenties.

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

Om sessiegegevens beschikbaar te maken voor je clientcomponenten, moet je je applicatie omwikkelen met een SessionProvider. Maak voor de App Router een clientcomponent zoals app/providers.jsx:

"use client";

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

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

AuthProvider integreren

Importeer en gebruik nu je aangepaste AuthProvider in je root-lay-outbestand (app/layout.js). Zo krijgen alle componenten binnen je applicatie toegang tot de sessiecontext.

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

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

Sessiegegevens openen (useSession)

In elk clientonderdeel kun je de hook useSession uit next-auth/react gebruiken om toegang te krijgen tot de sessiegegevens van de huidige gebruiker.

De hook levert het object session (als een gebruiker is ingelogd) en een status (bijvoorbeeld 'loading', 'authenticated' of '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>;
}

Acties voor de authenticatie-interface

Om gebruikers te laten in- en uitloggen, biedt NextAuth.js de functies signIn en signOut. Je kunt deze importeren en gebruiken met knoppen of links.

signIn() kan een provider-ID (bijvoorbeeld 'google') accepteren om de inlogmethode op te geven.

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

Verder dan OAuth: de inloggegevensprovider

Hoewel OAuth-providers handig zijn, ondersteunt NextAuth.js ook een CredentialsProvider voor aangepaste inlogformulieren met gebruikersnaam en wachtwoord.

Hiervoor moet je je eigen functie authorize implementeren om de invoer van de gebruiker te valideren aan de hand van je database. Zo houd je volledige controle over het inlogproces.

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

Quiz over de configuratie van NextAuth.js

Je hebt de belangrijkste stappen geleerd om NextAuth.js te integreren. Laten we snel controleren of je de stof begrijpt.

Beantwoord dit in de interactieve les

Samenvatting: NextAuth.js integreren

Goed gedaan! Je hebt geleerd hoe je NextAuth.js in je Next.js-toepassing integreert:

Het pakket next-auth geïnstalleerd.
De dynamische API-route voor authenticatie ingesteld (app/api/auth/[...nextauth]/route.js).
Een sociale OAuth-provider zoals Google geconfigureerd.
Inloggegevens beveiligd met .env.local.
Je app omwikkeld met SessionProvider voor toegang tot sessies aan de clientzijde.
useSession gebruikt om gebruikersgegevens op te halen en de functies signIn/signOut geïmplementeerd.

NextAuth.js maakt het proces om robuuste authenticatie aan je Next.js-projecten toe te voegen aanzienlijk eenvoudiger!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “NextAuth.js integreren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “NextAuth.js integreren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “NextAuth.js integreren”?

Stel NextAuth.js in voor eenvoudige authenticatie met verschillende providers en inloggen op basis van inloggegevens. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “NextAuth.js integreren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Fullstackwebapps met Next.js 15