Add SSO to existing SPA App Integration using PKCE flow

We have a working React app using a custom login page on front end which allows the user to sign in using userid and password using oktaAuth.signInWithRedirect and gets the access, id and refresh tokens back from Okta.

However, we now want to use SSO instead as the users are already logged into Okta via Active Directory. When a user (me included) signs into the xxx.oktapreview.com site I’m automatically logged in due AD.

Now I want to use this fact to allow the user to be automatically logged into our app without entering userid/password. I’m just not sure how to let my react app know that this user is logged into Okta already and receive my access/id/refresh tokens in the process.

Detecting the Okta session on your own application will be complicated by third party cookies (check out our FAQ to see if that will affect you)

Take a look at getWithRedirect (works in browsers blocking third party cookies) or getWithoutPrompt (reliant on being able to access the Okta session cookie set on the Okta domain) to immediately initiate an authorize request. The logic will a bit trickier if you’re in a browser blocking third party cookies (and with your app hosted on a separate domain from your Okta org, thus causing the Okta cookie to be considered 3rd party), because there will be no way to check if the user is logged into Okta without actually checking for it on the Okta domain.

You can likely give something like this a try if you’re not encountering the 3rd party cookie limitation

  1. When user hits the login page, call getWithoutPrompt
  2. if this throws an error (typically login_required), send the user to your login page

Thank you for your response. Before I saw your reply (been very busy), I tried calling signInWithRedirect and this sent the authorize request and I am receiving the tokens. So that’s good news. However, When Okta redirects back to my callback (which is using the Okta SDK LoginCallback component) the page eventually lands on a null route ex: https://localhost:3000/null. I honestly don’t know if this is something in React causing this or with how I’m doing the okta logic. Have you every encountered this and do you know what I might do about it? I understand this may be something I have to figure out in my react code, but was hoping someone on your end might have an idea.

In the mean time I will try the getWithoutPrompt and see how that does.

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.