Rychlý start: Next.js

Přidejte přihlášení do aplikace Next.js, která používá App Router. Sada SDK @usher/nextjs je na cestě; dokud nevyjde, používá tento návod standardní tok OpenID Connect, což je přesně to, co za vás sada SDK bude dělat.

Než začnete

Aplikace Next.js 15 nebo 16, která používá App Router.
Prostředí Usher. V Usher Console otevřete svůj projekt, vyberte prostředí a poznamenejte si hodnotu Vydavatel.

Zaregistrujte aplikaci

V Console přejděte do sekce Aplikace a vytvořte aplikaci typu Webová aplikace. Přidejte přesně toto URI přesměrování:

http://localhost:3000/auth/callback

Zkopírujte ID klienta a tajný klíč klienta. Tajný klíč se zobrazí jen jednou.

Přidejte proměnné prostředí

.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

Nainstalujte klienta OpenID Connect

Funguje jakýkoli certifikovaný klient. Tento návod používá openid-client, který obstará discovery, PKCE i ověření tokenů.

Terminál

pnpm add openid-client

Načtěte údaje vydavatele

Discovery jednou načte koncové body a klíče vydavatele, takže nic není napevno v kódu.

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šlete lidi do Lobby

Obslužná rutina trasy vytvoří ověřovač PKCE a hodnotu state, uloží je do krátkodobé cookie a přesměruje 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)
}

Zpracujte návrat (callback)

Usher pošle člověka zpátky s kódem. Vyměňte ho za tokeny; openid-client za vás zkontroluje state, ověřovač PKCE i podpis ID tokenu.

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('/')
}

Přidejte odhlášení

Ukončete relaci člověka ve své aplikaci a pak ho pošlete na koncový bod pro ukončení relace služby Usher, aby na něj zapomněla i 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)
}

Se sadou SDK

Až vyjde @usher/nextjs, bude stejná aplikace vypadat takto. Náhled níže se může před vydáním změnit.

app/layout.tsx · app/page.tsx (náhled)

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

Další kroky

Jakákoli knihovna OIDCNastavení, pokud používáte jiný jazyk nebo framework. Základní pojmyVydavatelé, Lobby a jak dlouho který token platí.