Next.js (NextAuth / Auth.js)

Met NextAuth voeg je BeID toe als OIDC-provider. Je hebt je client_id, client_secret en de discovery-URL nodig.

1. Installeren

Terminal

npm install next-auth

2. Environment

.env.local

BEID_ISSUER=https://id.becyber.nl
BEID_CLIENT_ID=beid_client_xxx
BEID_CLIENT_SECRET=beid_cs_xxx
NEXTAUTH_URL=https://jouw-app.nl
NEXTAUTH_SECRET=<willekeurig geheim>

3. Provider configureren

app/api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth";

const handler = NextAuth({
  providers: [
    {
      id: "beid",
      name: "BeID",
      type: "oauth",
      wellKnown: `${process.env.BEID_ISSUER}/.well-known/openid-configuration`,
      clientId: process.env.BEID_CLIENT_ID,
      clientSecret: process.env.BEID_CLIENT_SECRET,
      authorization: { params: { scope: "openid profile email kyc" } },
      idToken: true,
      checks: ["pkce", "state"],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          // BeID-specifieke claims:
          groups: profile.groups,
          kycStatus: profile.kyc_status,
        };
      },
    },
  ],
});

export { handler as GET, handler as POST };

4. Inlogknop

component.tsx

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

export function LoginButton() {
  const { data: session } = useSession();
  if (session) return <button onClick={() => signOut()}>Uitloggen</button>;
  return <button onClick={() => signIn("beid")}>Inloggen met BeID</button>;
}

NextAuth valideert het ID-token automatisch via de JWKS en gebruikt PKCE en state. Lees groepen en KYC-status uit profile.groups en profile.kyc_status voor je eigen autorisatie.

Redirect-URI

Registreer https://jouw-app.nl/api/auth/callback/beid als redirect-URI bij je OAuth-client in het ontwikkelaarsportaal.