James Posts - Answer Overflow

James

•Created by James on 3/15/2024 in #💻┃support

React-admin front-end and Next edge-runtime back-end - which SDKs/applications and how to auth API?

Hi, I'm using react-admin and have successfully implemented the front-end auth flow with Kinde and React SDK. I'm now trying to authenticate back-end API access in Next JS (Vercel) edge-runtime from the front-end using the Next JS SDK but for some reason it's not authenticating: - I already have a front-end React Kinde application for the login journey and a back-end Next JS Kinde application for the API journey - Despite the front-end login flow working, the front-end auth token is rejected by the Kinde back-end SDK as follows (no middleware yet):

//authenticated front-end client calling back-end api

import { useKindeAuth } from '@kinde-oss/kinde-auth-react'

const auth = useKindeAuth()
if (auth.isAuthenticated) {
      const res = await fetch(

/api/auth

, {
        headers: {
          Authorization:

Bearer ${await auth.getToken()}

,
        },
      })
} // all works fine

//back-end api in app/api/auth/route.js (will eventually move to middleware)

import { SignJWT, createRemoteJWKSet, jwtVerify } from 'jose'
import { getKindeServerSession } from '@kinde-oss/kinde-auth-nextjs/server'

export async function GET(request: Request) {
    //test validity of front-end JWT
    const fetoken = getJwt(request)
    const JWKS = createRemoteJWKSet(new URL('https://<my-kinde-name>/.well-known/jwks'))
    const result = await jwtVerify(fetoken, JWKS, {
      issuer: 'https://<my-kinde-name>.kinde.com',
      requiredClaims: ['sub', 'email', 'org_code', 'permissions'],
    }) // this successfully decodes and verifies the JWT

    //*HOWEVER*
    const { getAccessToken, isAuthenticated } = getKindeServerSession()
    console.log(await getAccessToken()) // this logs "Invalid token specified" on the server
    const isAuth = await isAuthenticated() //this returns false

    <snip>
}

How do I load the Kinde Next JS session (or router/client, etc.) from the JWT in order to take advantage of the SDK convenience methods to access the claims? Many thanks, James

9 replies

Gaming

Programming