Build a Next.js Application with TypeScript

sanjay rajeev

@disqus_Na2CdR5NOC I got this url which helps to signOut from okta “https://{organizationName}.okta.com/login/signout” , but we have to clear the session also eventhough we call this url and there is no parameter to redirect back to our application

Martijn

When I signup I cannot find any Web option. I’m greeted with ‘Customize your goals’ and only have options like Javascript, React, NodeJS. Which one do you need? After selecting React e.g. I need to add an App integration? Or create a new app but which of the 4 sign in methods? I’m lost.

Okta Developers

Hello Martijn,

Our developer console has been removed since this post was published. Now we have an Admin Console that has a bit different menu option. If you click “Admin” in the top corner, you should see an Applications section on the left. Select Applications > Create App Integration > OIDC > Web. Click Next, and make sure to use “http://localhost:3000/api/auth/callback/okta” as a sign-in redirect URI.

Another option is to use the Okta CLI and run “okta apps create”, then select Web > Other.

Martijn

Thank you!

TJ Grist

Try using the signout url https://<youroktadomain>/login/signout

TJ Grist

Try calling signOut()

and then also doing a redirect:

window.location.href = https://<youroktadomain>/login/signout

Manish Patel

What about get serverSideProps and api routes? How to handle those?

sanjay rajeev

Thanks @tjgrist As of now i am using it , but https://<youroktadomain>/login/signout doesn’t have a redirect url parameter to it. So if i try to login again it will take me to okta page not to my application

sanjay rajeev

Thanks @tjgrist Right now i am using like this ,but this will be like a temporary solution because https://<youroktadomain>/login/signout doesn’t have a redirect URL parameter so if i login again it will take me to okta page not to my applicationn

1 Like

TJ Grist

@sanjayrajeev You should be able to set up logout redirect URIs in your application instance e.g.: https://uploads.disquscdn.c…

Matt Raible

I updated this tutorial today to upgrade to the latest versions and refine things a bit. Please have a look and let me know if it resolves your issues.

This example seems to be missing an example of passing a JWT token to a secure API like the other Spring Boot Okta examples?

Is there an example using PKCE flow?

When I click the Login button, the system sends me to the following callback URL:

https://undefined/v1/authorize/?response_type=code

I have double checked .env.local and have the information correctly entered and formatted (no https:// on the domain).

What should I check next?

The issue was resolved by adding the following to the compiler options in the tsconfig.json file:

“moduleResolution”: “node”,

I added it just above “resolveJsonModule”: true

1 Like

The original article was built with NextAuth.js 3.0 in mind and version 4.0 has been released with some nice features around server-side auth performance.

I put together an article that can help you get started with Next.js, Okta, and NextAuth.js version 4.0. It keeps TypeScript in mind as well.

1 Like

Hi,
I have cloned the example and tried to log in with Google and it’s redirecting to the OKTA (okta-dev-08322118 - Sign In) so please let me know if am I missing anything here.

I extended my implementation, so I put together two more write-ups.

  1. Accessing JWT and Session Data in NextAuth.js with Callbacks
  2. Implementing Refresh Tokens in Next.js with NextAuth.js and Okta

If these are helpful to you, let me know; thanks!