SSO not working for Okta Sign-In Widget

Hi,

We have a customer portal (SPA) developped in React and has integrated the Okta Sign-In widget to authenticate with Okta. Everything works fine, we can login using username + password but if we are already authenticated to Okta, shouldn’t we be automatically logged into the application when reaching the direct link ?

Because it is not the case, we have to login again. Is it a wanted behavior (no SSO then ?) or are we missing something from the configuration.

With the embedded/self-hosted widget setup, it won’t check if the user has an existing Okta session by default.

You will need to use session.exists() to check if the Okta session exists already. If yes, you can use one of the methods from Okta Auth JS to retrieve tokens. Otherwise, you would show the widget.

	 	if (sessionExists) {
			signIn.authClient.token.getWithRedirect(); //example, can use other methods
		}
		else {
			signIn.showSignInAndRediret() //example, can use other methods
			.catch(function(error) {
				//do something
			});
		}
	}
}

Ok it seems to be what we need, but it seems that the session cookie is forward to our app (we are getting a false returned by authClient.session.exists(). Our portal url is portal.[domain].com and custom URL from Okta is customers.[domain].com so the session cookie should be shared between subdomains.

Here is our React code :

import { Redirect } from "react-router-dom";
import OktaSignInWidget from "../../Security/OktaWrapper";
import { useOktaAuth } from "@okta/okta-react";
import { oktaAuthConfig, oktaSignInConfig } from "../../Security/config";
import { userStore } from "../../stores";

const Login = () => {
  const { oktaAuth, authState } = useOktaAuth();

  oktaAuth.session.exists().then(function (exists) {
    console.log(exists);
    if (exists) {
      return <Redirect to={{ pathname: "/portail-mutualise" }} />;
    } else {
      if (!authState) return null;
      return authState.isAuthenticated ? (
        <Redirect to={{ pathname: "/portail-mutualise" }} />
      ) : (
        <OktaSignInWidget
          config={(oktaAuthConfig, oktaSignInConfig)}
          onSuccess={onSuccess}
          onError={onError}
        />
      );
    }
  });

  const onSuccess = (tokens) => {
    userStore.loadUser(tokens).then(() => {
      oktaAuth.handleLoginRedirect(tokens);
    });
  };

  const onError = (err) => {
    console.log("TODO error logging in", err);
  };
  if (!authState) return null;
  return authState.isAuthenticated ? (
    <Redirect to={{ pathname: "/portail-mutualise" }} />
  ) : (
    <OktaSignInWidget
      config={(oktaAuthConfig, oktaSignInConfig)}
      onSuccess={onSuccess}
      onError={onError}
    />
  );
};
export default Login;

Can you confirm if the baseUrl and issuer values in your config are both using your curl URL domain?

Also, could you check whether any “block third-party cookies” settings are enabled in the browser? I think it shouldn’t matter since you mention the app shares the same domain with the custom URL in Okta.

1 Like

I cannot confirm but I’m 90% sure that baseUrl and issuer values are the custom URL domain, I’ll confirm that though.

I’ve also checked that and third-party cookies are not blocked in any way.

Update : The URL configured is indeed the custom URL

I think the issue comes from the fact that we are wrongly using oktaAuth.session.exists() in our code. I’m not used to React so I can’t really tell here.

As an extra check, after you login with the self-hosted widget, if you open a new tab and navigate to your custom url domain does it prompt you for to login or do you automatically see the Okta user dashboard?

No I’m directly logged in, as planned.

Quick question, authState.isAuthenticated does not capture the cookie session but if there was already a sign-in through the Sign-in Widget ? It’s different from the oktaAuth.session right ?

From what I understand, it’s checking if there are tokens.

isAuthenticated : true if the user is considered authenticated. Normally this is true if both an idToken and an accessToken are present in the tokenManager

Ok that’s what I understood too. So this here it’s normal that it doesn’t authenticate us as we just have the session cookie.

I still can’t understand why the session is thrown false here.

Hi,

Is anyone having an idea ?

It is really a important issue that our portal does not work with SSO