React SPA working as the hosted page

Questions OAuth/OIDC
,
1

Hi,
I’m working with Okta + React. I managed to do the authentication and also load existing sessions. This post

Now I have to deal with this requirement: the login page of my react app has to work as the Okta Hosted page. Means that other applications when they need authentication they will come to my app’s login page intead of okta’s hosted page. And after logged in they will be redirected back to the /callback. Just like the okta hosted page does.

Question #1: Is there some setting somewhere where I can tell okta that when the user is not authenticated that he should be redirected to my login page?

Some context before question #2:

I did some modifications in my react app that makes it’s work like that when I receive the same querystring parameters that the okta hosted page does. If the user lands in my app with this URL it works:

http://localhost:3000/?client_id=abc&
code_challenge=xxx&
code_challenge_method=S256&
nonce=yyyy&
redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fsign_in%2Fcallback&
response_type=code&
state=zzzzz&
scope=openid%20profile%20email

To receive these parameters in my app I did a workaround in the Okta sign-in page so it redirects to my app. In the first line of the javascript I put this: window.location.href='http://localhost:3000'+window.location.search;

It works but it’s not the solution I’ll be implementing. That’s why I asked question #1 which would be perfect if I had the option to do that. Since I don’t know if it’s possible I’m making another POC App to test it and in it’s sign-in button I’m trying to build the url myself like this:

const tokenParams = await oktaAuth.token.prepareTokenParams();
    const url = `http://localhost:3000/sign_in?client_id=${tokenParams.clientId}&code_challenge=${tokenParams.codeChallenge}&code_challenge_method=${tokenParams.codeChallengeMethod}&nonce=${tokenParams.nonce}&redirect_uri=${tokenParams.redirectUri}&response_type=${tokenParams.responseType}&scope=${tokenParams.scopes}&state=${tokenParams.state}`;
    window.location.href = url;

Then I do the login with credentials and I get redirected to the /callback where I get the following message.

AuthSdkError: Could not load PKCE codeVerifier from storage. This may indicate the auth flow has already completed or multiple auth flows are executing concurrently.

Question #2: how do I authenticate the user without “consuming” the code? How can I build the redirect URL myself, if there’s no option to configure it in Okta?

Thanks

2

You might want to look into configuring a default app for Question#1 Configure a default app for the Sign-In Widget

3

Hi Sherry, thanks for the reply.
I have done that already and nothing changes.

Is there something I need to do on the configuration object I use the create an instance of OktaAuth ? These are the properties of my configuration object:

  const config = {
    clientId: 'xxxxx',
    issuer: process.env.REACT_APP_OKTA_ISSUER || '',
    redirectUri,
    postLogoutRedirectUri: `${window.location.origin}/sign_in`,
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    tokenManager: {
      storage: 'localStorage',
      expireEarlySeconds: 300,
    },
  };

Thanks