feat: openid client v6 with more other improvements

Author: antosubash

src/package.json

@@ -55,7 +55,7 @@
     "lucide-react": "^0.453.0",
     "next": "15.0.0",
     "next-themes": "^0.3.0",
-    "openid-client": "^5.7.0",
+    "openid-client": "^6.1.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "^18.3.1",
     "react-day-picker": "^9.1.4",

src/pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import AdminLayout from '@/layout/admin-layout'
+import React from "react";
 
 export default function AdminRootLayout({ children }: { children: React.ReactNode }) {
   return <AdminLayout>{children}</AdminLayout>

src/src/app/admin/layout.tsx

@@ -3,8 +3,16 @@ import { NextRequest, NextResponse } from 'next/server'
 
 const EXTERNAL_API_URL = process.env.NEXT_PUBLIC_API_URL
 
-export async function GET(request: NextRequest) {
+/**
+ * Handles GET requests by forwarding them to an external API.
+ * Retrieves the current session and uses the access token for authorization.
+ *
+ * @param {NextRequest} request - The incoming request object from Next.js.
+ * @returns {Promise<Response>} - The response from the external API or an error response.
+ */
+export async function GET(request: NextRequest): Promise<Response> {
   const session = await getSession()
+  console.log('GET')
   const path = request.nextUrl.pathname
   console.log(`${EXTERNAL_API_URL}${path}${request.nextUrl.search}`)
   try {
@@ -20,6 +28,13 @@ export async function GET(request: NextRequest) {
   }
 }
 
+/**
+ * Handles POST requests by forwarding them to an external API.
+ * Retrieves the current session and uses the access token for authorization.
+ *
+ * @param {NextRequest} request - The incoming request object from Next.js.
+ * @returns {Promise<Response>} - The response from the external API.
+ */
 export async function POST(request: NextRequest) {
   const session = await getSession()
   const path = request.nextUrl.pathname
@@ -36,6 +51,13 @@ export async function POST(request: NextRequest) {
   } as any)
 }
 
+/**
+ * Handles PUT requests by forwarding them to an external API.
+ * Retrieves the current session and uses the access token for authorization.
+ *
+ * @param {NextRequest} request - The incoming request object from Next.js.
+ * @returns {Promise<Response>} - The response from the external API.
+ */
 export async function PUT(request: NextRequest) {
   const session = await getSession()
   const path = request.nextUrl.pathname
@@ -52,8 +74,14 @@ export async function PUT(request: NextRequest) {
   } as any)
 }
 
+/**
+ * Handles DELETE requests by forwarding them to an external API.
+ * Retrieves the current session and uses the access token for authorization.
+ *
+ * @param {NextRequest} request - The incoming request object from Next.js.
+ * @returns {Promise<Response>} - The response from the external API.
+ */
 export async function DELETE(request: NextRequest) {
-  // reroute the request to the API
   const session = await getSession()
   const path = request.nextUrl.pathname
   const url = `${EXTERNAL_API_URL}${path}${request.nextUrl.search}`
@@ -65,4 +93,4 @@ export async function DELETE(request: NextRequest) {
       __tenant: session.tenantId === 'default' ? undefined : session.tenantId,
     } as any,
   })
-}
+}

src/src/app/api/[...slug]/route.ts

@@ -1,21 +1,27 @@
 import { clientConfig } from '@/config'
 import { getSession } from '@/lib/actions'
-import { getClient } from '@/lib/session-utils'
-import { generators } from 'openid-client'
-
+import {getClientConfig} from '@/lib/session-utils'
+import * as client from 'openid-client'
 export async function GET() {
   const session = await getSession()
-  session.code_verifier = generators.codeVerifier()
-  const code_challenge = generators.codeChallenge(session.code_verifier)
-  const client = await getClient()
-  const url = client.authorizationUrl({
-    scope: clientConfig.scope,
-    audience: clientConfig.audience,
-    redirect_uri: clientConfig.redirect_uri,
+  let code_verifier = client.randomPKCECodeVerifier()
+  let code_challenge = await client.calculatePKCECodeChallenge(code_verifier)
+  const openIdClientConfig = await getClientConfig()
+  let parameters: Record<string, string> = {
+    "redirect_uri": clientConfig.redirect_uri,
+    "scope": clientConfig.scope!,
     code_challenge,
-    code_challenge_method: 'S256',
-    __tenant: session.tenantId === 'default' ? undefined : session.tenantId,
-  })
+    "code_challenge_method": clientConfig.code_challenge_method,
+    "__tenant": session.tenantId === 'default' ? "" : session.tenantId!,
+  }
+  let state!: string
+  if (!openIdClientConfig.serverMetadata().supportsPKCE()) {
+    state = client.randomState()
+    parameters.state = state
+  }
+  let redirectTo = client.buildAuthorizationUrl(openIdClientConfig, parameters)
+  session.code_verifier = code_verifier
+  session.state = state
   await session.save()
-  return Response.redirect(url)
+  return Response.redirect(redirectTo.href)
 }

src/src/app/auth/login/route.ts

@@ -1,25 +1,23 @@
 import { clientConfig } from '@/config'
 import { getSession } from '@/lib/actions'
 import { RedisSession, createRedisInstance } from '@/lib/redis'
-import { defaultSession, getClient } from '@/lib/session-utils'
-import { generators } from 'openid-client'
-
+import {defaultSession, getClientConfig} from '@/lib/session-utils'
+import * as client from 'openid-client'
 export async function GET() {
   const session = await getSession()
   const redis = createRedisInstance()
   const redisKey = `session:${session.userInfo?.sub}`
-  var redisSessionData = await redis.get(redisKey)
-  var parsedSessionData = JSON.parse(redisSessionData!) as RedisSession
-  const client = await getClient()
-  var endSession = client.endSessionUrl({
+  const redisSessionData = await redis.get(redisKey);
+  const parsedSessionData = JSON.parse(redisSessionData!) as RedisSession;
+  const openIdClientConfig = await getClientConfig()
+  const endSessionUrl = client.buildEndSessionUrl(openIdClientConfig, {
     post_logout_redirect_uri: clientConfig.post_logout_redirect_uri,
     id_token_hint: parsedSessionData.access_token,
-    state: generators.state(),
   })
   session.isLoggedIn = defaultSession.isLoggedIn
   session.access_token = defaultSession.access_token
   session.userInfo = defaultSession.userInfo
   await redis.del(session?.userInfo?.sub!)
   await session.save()
-  return Response.redirect(endSession)
+  return Response.redirect(endSessionUrl.href)
 }

src/src/app/auth/logout/route.ts

@@ -1,20 +1,24 @@
 import { clientConfig } from '@/config'
+import * as client from 'openid-client'
 import { getSession } from '@/lib/actions'
 import { RedisSession, createRedisInstance } from '@/lib/redis'
-import { getClient } from '@/lib/session-utils'
+import {getClientConfig} from '@/lib/session-utils'
 import { NextRequest } from 'next/server'
 export async function GET(request: NextRequest) {
   const session = await getSession()
-  const client = await getClient()
-  const params = client.callbackParams(request as any)
-  const tokenSet = await client.callback(clientConfig.redirect_uri, params, {
-    code_verifier: session.code_verifier,
+  const openIdClientConfig = await getClientConfig()
+  const currentUrl = new URL(request.url)
+  const tokenSet = await client.authorizationCodeGrant(openIdClientConfig, currentUrl, {
+    pkceCodeVerifier: session.code_verifier,
+    expectedState: session.state
   })
   const { access_token, refresh_token } = tokenSet
   session.isLoggedIn = true
   session.access_token = access_token
+  let claims = tokenSet.claims()!
+  const {sub} = claims
   // call userinfo endpoint to get user info
-  const userinfo = await client.userinfo(tokenSet)
+  const userinfo = await client.fetchUserInfo(openIdClientConfig, access_token, sub)
   // store userinfo in session
   session.userInfo = {
     sub: userinfo.sub,

src/src/app/auth/openiddict/route.ts

@@ -1,26 +1,7 @@
-import { RedisSession, createRedisInstance } from '@/lib/redis'
-import { SessionData, getClient } from '@/lib/session-utils'
-import { sessionOptions } from '@/sessionOptions'
-import { getIronSession } from 'iron-session'
-import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-import { NextRequest } from 'next/server'
-export async function GET(request: NextRequest) {
-  let session = await getIronSession<SessionData>(await cookies(), sessionOptions)
-  const redisKey = `session:${session?.userInfo?.sub!}`
-  const redis = createRedisInstance()
-  const client = await getClient()
-  var redisSessionData = await redis.get(redisKey)
-  var parsedSessionData = JSON.parse(redisSessionData!) as RedisSession
-  var tokenSet = await client.refresh(parsedSessionData.refresh_token!)
-  console.log('Token refreshed. New token:', tokenSet.access_token)
-  session.access_token = tokenSet.access_token
-  await session.save()
-  var newRedisSessionData = {
-    access_token: tokenSet.access_token,
-    refresh_token: tokenSet.refresh_token,
-  } as RedisSession
-  await redis.set(redisKey, JSON.stringify(newRedisSessionData))
-  await redis.quit()
+import {refreshToken} from "@/lib/auth";
+
+export async function GET() {
+  await refreshToken()
   redirect('/')
 }

src/src/app/auth/refresh-token/route.ts

@@ -5,11 +5,11 @@ import { redirect } from 'next/navigation'
 OpenAPI.BASE = process.env.NEXT_PUBLIC_API_URL!
 export async function GET() {
   const session = await getSession()
-  var host = await (await headers()).get('host')
+  const host = (await headers()).get('host');
   if (session.tenantId) {
     return
   }
-  var tenantGuid = await tenantGetTenantGuid({ host: host! })
+  const tenantGuid = await tenantGetTenantGuid({host: host!});
   session.tenantId = tenantGuid ?? 'default'
   await session.save()
   redirect('/')

src/src/app/auth/set-tenant/route.ts

@@ -1,24 +1,14 @@
-import { OpenAPI } from '@/client'
 import GoogleAnalytics from '@/components/analytics/google-analytics'
 import UmamiAnalytics from '@/components/analytics/umami-analytics'
-import { getSession } from '@/lib/actions'
 import ReactQueryProviders from '@/lib/provider/QueryClientProvider'
 import { cn } from '@/lib/utils'
 import type { Metadata } from 'next'
 import { Inter as FontSans } from 'next/font/google'
 import './globals.css'
+import React from "react";
+import {setUpLayoutConfig} from "@/lib/auth";
 
-OpenAPI.BASE = process.env.NEXT_PUBLIC_API_URL!
-
-OpenAPI.interceptors.request.use(async (options) => {
-  const session = await getSession()
-  options.headers = {
-    ...options.headers,
-    Authorization: `Bearer ${session.access_token}`,
-    __tenant: session.tenantId ?? '',
-  }
-  return options
-})
+setUpLayoutConfig()
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -41,6 +31,7 @@ export default function RootLayout({
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
+          <title>Abp React</title>
         {process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL && process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
           <UmamiAnalytics
             scriptUrl={process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL}