Auth.js: vlastný poskytovateľ OIDC a príklad pre Next.js

Prihlásenie cez Dazr Identity: bezplatné OpenID Connect hostované v EÚ, s passkeys, kódmi e-mailom a účtami Google alebo Microsoft pod jedným tlačidlom.

Potrebujete tri hodnoty z vývojárskej konzoly: ID klienta, tajný kľúč klienta (len pri webových serverových aplikáciách) a URI presmerovania, ktoré ste zaregistrovali. Všetko ostatné je v dokumente discovery na adrese https://identity.dazr.eu/.well-known/openid-configuration.

Auth.js / NextAuth

Auth.js (NextAuth.js v5) prijíma vlastný objekt poskytovateľa OpenID Connect. Zaregistrujte webovú serverovú aplikáciu, nastavte AUTH_SECRET, AUTH_DAZR_ID a AUTH_DAZR_SECRET a ako URI na presmerovanie použite túto URL spätného volania: https://app.example.eu/api/auth/callback/dazr.

// auth.ts
import NextAuth from "next-auth"

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    {
      id: "dazr",
      name: "Dazr Identity",
      type: "oidc",
      issuer: "https://identity.dazr.eu",
      clientId: process.env.AUTH_DAZR_ID,
      clientSecret: process.env.AUTH_DAZR_SECRET,
      authorization: { params: { scope: "openid profile email" } },
      checks: ["pkce", "state", "nonce"],
      client: { id_token_signed_response_alg: "ES256" },
    },
  ],
})

NextAuth.js v4 používa rovnaký princíp s type: "oauth" a discovery URL:

// pages/api/auth/[...nextauth].ts (NextAuth.js v4), in providers: [ ... ]
{
  id: "dazr",
  name: "Dazr Identity",
  type: "oauth",
  wellKnown: "https://identity.dazr.eu/.well-known/openid-configuration",
  clientId: process.env.DAZR_CLIENT_ID,
  clientSecret: process.env.DAZR_CLIENT_SECRET,
  authorization: { params: { scope: "openid profile email" } },
  idToken: true,
  checks: ["pkce", "state"],
  client: { id_token_signed_response_alg: "ES256" },
  profile(profile) {
    return { id: profile.sub, name: profile.name ?? null, email: profile.email }
  },
}

Next.js App Router

So súborom auth.ts vyššie pridajte obsluhu trasy a prihlasovacie tlačidlo, ktoré spustí serverovú akciu.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth"
export const { GET, POST } = handlers

// app/page.tsx
import { auth, signIn, signOut } from "@/auth"

export default async function Page() {
  const session = await auth()
  if (session?.user) {
    return (
      <form action={async () => { "use server"; await signOut() }}>
        <p>Signed in as {session.user.email}</p>
        <button type="submit">Sign out</button>
      </form>
    )
  }
  return (
    <form action={async () => { "use server"; await signIn("dazr") }}>
      <button type="submit" className="dazr-signin">Sign in with Dazr Identity</button>
    </form>
  )
}

Tlačidlo naštýlujte podľa časti Tlačidlo. V callbackoch je Dazr sub hodnotou account.providerAccountId.

Ďalšie informácie pre vývojárov

Dokumentácia pre vývojárovVšetci sprievodcovia integráciouĽubovoľná knižnica OpenID ConnectCeny