Жылдам бастау: Next.js

App Router бар Next.js қолданбасына кіруді қосыңыз. @usher/nextjs SDK жақында шығады; ол шыққанша, бұл нұсқаулық стандартты OpenID Connect ағынын пайдаланады — SDK сіз үшін дәл соны жасайды.

Бастамас бұрын

App Router пайдаланатын Next.js 15 немесе 16 қолданбасы.
Usher ортасы. Usher Console ішінде жобаңызды ашып, ортаны таңдаңыз және оның эмитентін жазып алыңыз.

Қолданбаңызды тіркеңіз

Console ішінде Қолданбалар бөліміне өтіп, веб-қолданба жасаңыз. Мына қайта бағыттау URI мекенжайын дәл қосыңыз:

http://localhost:3000/auth/callback

Клиент ID мен клиент құпиясын көшіріңіз. Құпия бір рет көрсетіледі.

Орта айнымалыларын қосыңыз

.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

OpenID Connect клиентін орнатыңыз

Кез келген сертификатталған клиент жарайды. Бұл нұсқаулық discovery, PKCE және токендерді тексеруді өзі атқаратын openid-client кітапханасын пайдаланады.

Терминал

pnpm add openid-client

Эмитентіңізді анықтаңыз

Discovery эмитенттің нүктелері мен кілттерін бір рет оқиды, сондықтан ештеңе кодқа қатаң жазылмайды.

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`

Адамдарды Lobby бетіне жіберіңіз

Маршрут өңдеушісі PKCE верификаторы мен state мәнін жасап, оларды қысқа мерзімді cookie файлында сақтайды және 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)
}

Кері шақыруды өңдеңіз

Usher адамды кодпен кері жібереді. Оны токендерге айырбастаңыз; openid-client state мәнін, PKCE верификаторын және 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('/')
}

Шығу

Адамның қолданбаңыздағы сеансын аяқтап, содан кейін Lobby де оны ұмытуы үшін оны Usher-дің сеансты аяқтау нүктесіне жіберіңіз.

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

SDK арқылы

@usher/nextjs жарияланғанда, сол қолданба былай көрінеді. Төмендегі алдын ала нұсқа шығарылымға дейін өзгеруі мүмкін.

app/layout.tsx · app/page.tsx (алдын ала нұсқа)

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

Келесі қадамдар

Кез келген OIDC кітапханасыБасқа тіл немесе фреймворк пайдалансаңыз, параметрлер. Негізгі ұғымдарЭмитенттер, Lobby және әр токен қанша уақыт жарамды.