Rýchly štart: Next.js

Pridajte prihlásenie do aplikácie Next.js s App Routerom. SDK @usher/nextjs je na ceste; kým príde, tento návod používa štandardný tok OpenID Connect, presne ten, ktorý bude SDK robiť za vás.

Skôr než začnete

Aplikácia Next.js 15 alebo 16, ktorá používa App Router.
Prostredie Usher. V Usher Console otvorte projekt, vyberte prostredie a poznačte si jeho vydavateľa.

Zaregistrujte aplikáciu

V Console prejdite do časti Aplikácie a vytvorte webovú aplikáciu. Pridajte presne toto URI presmerovania:

http://localhost:3000/auth/callback

Skopírujte ID klienta a tajný kód klienta. Tajný kód sa zobrazí len raz.

Pridajte premenné prostredia

.env.local

USHER_ISSUER=https://acme.usherid.com
USHER_CLIENT_ID=your_client_id
USHER_CLIENT_SECRET=your_client_secret
APP_URL=http://localhost:3000

Nainštalujte klienta OpenID Connect

Funguje akýkoľvek certifikovaný klient. Tento návod používa openid-client, ktorý sa postará o zisťovanie, PKCE aj overenie tokenov.

Terminál

pnpm add openid-client

Zistite údaje svojho vydavateľa

Zisťovanie raz načíta koncové body a kľúče vydavateľa, takže nič nemusí byť zadané napevno.

lib/usher.ts

import * as client from 'openid-client'

let config: Promise<client.Configuration> | undefined

export function usher() {
  config ??= client.discovery(
    new URL(process.env.USHER_ISSUER!),
    process.env.USHER_CLIENT_ID!,
    process.env.USHER_CLIENT_SECRET!,
  )
  return config
}

export const redirectUri = `${process.env.APP_URL}/auth/callback`

Pošlite ľudí do Lobby

Obslužná rutina trasy vytvorí overovač PKCE a hodnotu state, uloží ich do krátko platného súboru cookie a presmeruje do Lobby.

app/auth/sign-in/route.ts

import * as client from 'openid-client'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { redirectUri, usher } from '@/lib/usher'

export async function GET() {
  const config = await usher()
  const codeVerifier = client.randomPKCECodeVerifier()
  const state = client.randomState()

  const jar = await cookies()
  jar.set('usher_flow', JSON.stringify({ codeVerifier, state }), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/auth',
    maxAge: 600,
  })

  const url = client.buildAuthorizationUrl(config, {
    redirect_uri: redirectUri,
    scope: 'openid profile email offline_access',
    code_challenge: await client.calculatePKCECodeChallenge(codeVerifier),
    code_challenge_method: 'S256',
    state,
  })
  redirect(url.href)
}

Spracujte návrat (callback)

Usher pošle človeka späť s kódom. Vymeňte ho za tokeny; openid-client za vás skontroluje state, overovač PKCE aj podpis tokenu ID.

app/auth/callback/route.ts

import * as client from 'openid-client'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { usher } from '@/lib/usher'

export async function GET(request: Request) {
  const config = await usher()
  const jar = await cookies()
  const flow = JSON.parse(jar.get('usher_flow')?.value ?? '{}')
  jar.delete('usher_flow')

  const tokens = await client.authorizationCodeGrant(config, new URL(request.url), {
    pkceCodeVerifier: flow.codeVerifier,
    expectedState: flow.state,
  })
  const claims = tokens.claims()! // sub, email, name, …

  // start your own session here: store claims.sub, and keep the refresh token server-side
  redirect('/')
}

Odhlásenie

Ukončite reláciu človeka vo svojej aplikácii a potom ho pošlite na koncový bod ukončenia relácie služby Usher, aby naň zabudlo aj Lobby.

app/auth/sign-out/route.ts

import * as client from 'openid-client'
import { redirect } from 'next/navigation'
import { usher } from '@/lib/usher'

export async function GET() {
  const config = await usher()
  // clear your own session first
  const url = client.buildEndSessionUrl(config, {
    post_logout_redirect_uri: process.env.APP_URL!,
  })
  redirect(url.href)
}

So SDK

Keď vyjde @usher/nextjs, tá istá aplikácia bude vyzerať takto. Ukážka nižšie sa môže pred vydaním zmeniť.

app/layout.tsx · app/page.tsx (ukážka)

// app/layout.tsx
import { UsherProvider } from '@usher/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UsherProvider>{children}</UsherProvider>
      </body>
    </html>
  )
}

// app/page.tsx
import { SignIn, UserButton, currentUser } from '@usher/nextjs'

export default async function Page() {
  const user = await currentUser()
  return user ? <UserButton /> : <SignIn />
}

Ďalšie kroky

Akákoľvek knižnica OIDCNastavenia, ak používate iný jazyk alebo framework. KonceptyVydavatelia, Lobby a ako dlho ktorý token platí.