ഉള്ളടക്കത്തിലേക്ക് പോകുക
ഡോക്യുമെന്റേഷൻ · Next.js

ക്വിക്ക്സ്റ്റാർട്ട്: 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 ക്ലയന്റ് ഇൻസ്റ്റാൾ ചെയ്യുക

സർട്ടിഫൈ ചെയ്ത ഏത് ക്ലയന്റും പ്രവർത്തിക്കും. ഈ ഗൈഡ് 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`

ആളുകളെ ലോബിയിലേക്ക് അയയ്ക്കുക

ഒരു റൂട്ട് ഹാൻഡ്‌ലർ ഒരു 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-ന്റെ എൻഡ്-സെഷൻ എൻഡ്‌പോയിന്റിലേക്ക് അയയ്ക്കുക, അങ്ങനെ ലോബിയും അവരെ മറക്കും.

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

അടുത്ത ഘട്ടങ്ങൾ