দ্রুত শুরু: 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 ও ক্লায়েন্ট সিক্রেট কপি করুন। সিক্রেট একবারই দেখানো হয়।
আপনার এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন
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আপনার ইস্যুয়ার খুঁজে নিন
ডিসকভারি একবার ইস্যুয়ারের এন্ডপয়েন্ট ও কী পড়ে নেয়, তাই কিছুই হার্ড-কোড করা থাকে না।
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 মান তৈরি করে, সেগুলি একটি স্বল্পমেয়াদি কুকিতে রাখে, এবং লবিতে রিডাইরেক্ট করে।
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 টোকেনের সিগনেচার যাচাই করে।
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-এর এন্ড-সেশন এন্ডপয়েন্টে পাঠান, যাতে লবিও তাঁকে ভুলে যায়।
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
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 />
}