Next auth with OKTA PKCE flow

Questions OAuth/OIDC
,
1

Hi! I’ve been stuck on implementing the Okta provider for next-auth for awhile, and according to the documentation, the flow should kind of look like (1) /authorize call with the correct client credentials and code_challenge, (2) redirect to the URL you set up, and (3) a /token request being made as the final step in the process that includes a code_verifier param. The initial first two steps are working properly, but after the redirect I don’t see a /token request being made, and therefore I am just stuck at the login page without a session.

Next js seems to really try to handle the whole process under the hood, so its hard to track why that /token request is not being made (i also have debug mode setup in next to track logs). Here is my setup:

secret: process.env.NEXTAUTH_SECRET,
providers: [
    Okta({
        checks: ['pkce', 'state', 'nonce'],
        clientId: process.env.OKTA_CLIENTID as string,
        clientSecret: process.env.OKTA_CLIENTSECRET as string,
        authorization: {
            params: {
                redirect_uri: 'http://localhost:3000',
                scope: 'openid profile email',
            }
        },
        issuer: process.env.OKTA_DOMAIN as string,
        idToken: true,
    }),
],

and I’ve also implemented callbacks for jwt, session and redirect but the jwt and session callbacks don’t get triggered.

that redirect url is also set up in my Okta account.

using:
“next”: “^14.0.4”,
“next-auth”: “^4.24.5”,
and node v20.7.0

any information would be appreciated :pray:

2

Hi Bekim,

  1. PKCE is used for client-side (single-page application), secrets are used for server-side. You have both in the provider configuration and I don’t know how the provider in next-auth is going to handle that, it may just give up. Drop PKCE? BTW I’m guessing that the Okta app integration is configured as a regular server-side web app because you have the secret.

  2. You’re callback URL is wrong, which is also a reason that next-auth would stall out. Next-auth expects the response to land at http://localhost:3000/api/auth/callback/okta The domain and port are your app, but the path is what is important! You are having it land on the default page for your server.

Have you see the Okta writeup by Nick Fisher on using Next.js? Build a Next.js Application with TypeScript | Okta Developer.

Regards,
Joel

1 Like
3

Hi! thanks for the quick reply. You are definitely right about the redirect_uri, I had originally tried http://localhost:3000/api/auth/callback/okta and got an error referring to incorrect uri, but realized that I had a slight misspelling of that url in my Okta app settings.

I am actually using client-side web app in my Okta app but when I don’t include a client_secret I get a “client_secret_basic client authentication method requires a client_secret” error, and when i include an empty client_secret i get an invalid client error. Is there an example with PKCE flow? Not sure what to do about the client_secret if my app does not have one

4

Let’s verify the app first. This is what a client-side app general tab would look like, is that what you have?

image
image732×338 16.3 KB

Or does it look like this server-side application that would use a secret:

image
image736×342 18.7 KB

5

I have the first one with 'Require PKCE …" checked, no client secret - so it is a client-side app.

I was able to finally log in by adding this one line to my provider config:

client: { token_endpoint_auth_method: 'none' }

6

Yep. Third paragraph (the note) here: Client authentication methods.