కంటెంట్‌కు వెళ్లు
డాక్యుమెంటేషన్ · Next.js

క్విక్‌స్టార్ట్: Next.js

App Router ఉన్న Next.js యాప్‌కు సైన్-ఇన్‌ను జోడించండి. @usher/nextjs SDK రాబోతోంది; అది వచ్చే వరకు, ఈ గైడ్ ప్రామాణిక OpenID Connect ఫ్లోను ఉపయోగిస్తుంది, SDK మీ కోసం చేసేది సరిగ్గా ఇదే.

మొదలుపెట్టే ముందు

  • App Routerను ఉపయోగించే Next.js 15 లేదా 16 యాప్.
  • ఒక Usher ఎన్విరాన్‌మెంట్. Usher Consoleలో, మీ ప్రాజెక్ట్‌ను తెరిచి, ఒక ఎన్విరాన్‌మెంట్‌ను ఎంచుకుని, దాని ఇష్యూయర్ను గుర్తుంచుకోండి.

మీ యాప్‌ను నమోదు చేయండి

Consoleలో, Applicationsకు వెళ్లి ఒక web applicationను సృష్టించండి. ఈ రీడైరెక్ట్ URIని సరిగ్గా ఇలాగే జోడించండి:

http://localhost:3000/auth/callback

client ID, client secretలను కాపీ చేసుకోండి. సీక్రెట్ ఒక్కసారే చూపబడుతుంది.

మీ ఎన్విరాన్‌మెంట్ వేరియబుల్‌లను జోడించండి

.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 క్లయింట్‌ను ఇన్‌స్టాల్ చేయండి

ఏ సర్టిఫైడ్ క్లయింట్ అయినా పనిచేస్తుంది. ఈ గైడ్ openid-clientను ఉపయోగిస్తుంది, అది డిస్కవరీ, PKCE, టోకెన్ ధృవీకరణను నిర్వహిస్తుంది.

టెర్మినల్
pnpm add openid-client

మీ ఇష్యూయర్‌ను కనుగొనండి

డిస్కవరీ ఇష్యూయర్ ఎండ్‌పాయింట్‌లను, కీలను ఒక్కసారి చదువుతుంది, కాబట్టి ఏదీ కోడ్‌లో స్థిరంగా రాయాల్సిన అవసరం లేదు.

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`

వ్యక్తులను లాబీకి పంపండి

ఒక route handler PKCE వెరిఫైయర్‌ను, state విలువను తయారుచేసి, వాటిని స్వల్పకాలిక కుకీలో ఉంచి, లాబీకి రీడైరెక్ట్ చేస్తుంది.

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 వ్యక్తిని ఒక కోడ్‌తో తిరిగి పంపుతుంది. దాన్ని టోకెన్‌లకు మార్చుకోండి; state, PKCE వెరిఫైయర్, ID టోకెన్ సంతకాన్ని openid-client మీ కోసం తనిఖీ చేస్తుంది.

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

సైన్ అవుట్

మీ యాప్‌లో వ్యక్తి సెషన్‌ను ముగించండి, ఆపై లాబీ కూడా వారిని మర్చిపోయేలా వారిని Usher end-session ఎండ్‌పాయింట్‌కు పంపండి.

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

తదుపరి దశలు