Example of Next JS, Next Auth, and custom Okta Widget

Questions
1

Does anyone have an example of using Next JS and Next Auth with the custom Okta Widget?

I’m trying to get this to work by having the widget redirect to the next auth okta provider callback URL, but no luck.

Does anyone have experience with this?

2

This tutorial might help.

3

I’m trying to use a custom okta widget to do the sign-in process for my next js app. I have an Okta provider set up under /api/auth. When I use the widget to log in, I have the redirectUri point to the okta provider at http://localhost:3000/api/auth/callback/okta to pass along the rest of the information and create a session. Kinda replicates what the normally hosted okta login widget would do.

My issue is I’m getting this error during the callback and I can’t figure out why. Any ideas?

My code can be found here.

[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error Invalid Compact JWE JWEInvalid: Invalid Compact JWE
    at compactDecrypt (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\jose\dist\node\cjs\jwe\compact\decrypt.js:16:15)
    at jwtDecrypt (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\jose\dist\node\cjs\jwt\decrypt.js:8:61)
    at Object.decode (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\jwt\index.js:64:34)
    at async useState (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\lib\oauth\state-handler.js:62:17)
    at async oAuthCallback (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\lib\oauth\callback.js:82:19)
    at async Object.callback (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\routes\callback.js:50:11)
    at async NextAuthHandler (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\index.js:186:28)
    at async NextAuthNextHandler (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\next\index.js:23:19)
    at async auth (webpack-internal:///(api)/./src/pages/api/auth/[...nextauth].ts:12:12)
    at async Object.apiResolver (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next\dist\server\api-utils\node.js:184:9) {
  name: 'OAuthCallbackError',
  code: 'ERR_JWE_INVALID'
}
4

I’m trying to find an example and your code repo isn’t available anymore
Do you have an updated example, please?

5

The sample code for the blog post @mraible mentioned above is still available here: GitHub - oktadev/okta-nextjs-typescript-example: Next.js with TypeScript Example