Not able to login into React application after successfully authenticated using external identity providers(Facebook/Google)

[Shardul]

Hello Team,

I am working on React Application where we require both options Sign In with Okta and Sign In With External Identity Providers. We have added Facebook and Google as external Identity Providers.

When login using Okta Sign In Widget, I am getting logged in immediately within one step i.e. enter username and password and click on Login button.

Below is the screenshot of Login screen with both options-

For external identity providers, we have added anchor tags. When click on ‘Sign in with Facebook’ or ‘Sign in with Google’, it is 3 step process,

Step 1- When click on anchor tag, it redirects to respective external identity provider login
screen. Once entered correct credentials and login, it redirects to react application(client).
Step 2- In client application we receive id_token and URL getting changed as below-
http://localhost:3000/callback#id_token={id_token_details}&state={state_details}
Step 3- When click on Sign In button which calls { await oktaAuth.signInWithRedirect(); },
I am able to logged in into application.

But ideally I should login into react application when I redirected from external identity provider(Facebook/Google).

Anchor tag using for external identity provider as below-

I am having confusion when I am login with external identity providers.
Is it correct behavior login with 3 steps? Or Am I doing something wrong or missing any configuration or code changes?

I have checked network trace as well, but did not find anything which helps me.

I am using okta libraries- @okta/okta-auth-js and @okta/okta-react-js.

I am eagerly waiting for your reply, any help would be appreciated.

Thank you.

Regards,
Shardul Arun Pathak

[erik]

Hello Shardul,

Typically if you are using the self hosted widget with social IdPs you would use the Widget to configure the IdP buttons instead of adding your own href. Please see here,
https://github.com/okta/okta-signin-widget#openid-connect

This way the Widget will render the button and when a user clicks on one the SDK will generate the /authorize call and will handle the callback so it should happen in one step.

If you are not using the Widget and instead auth-js then you would typically add the IdP as a configuration option to redirect the user to the IdP, again letting the SDK handle the entire flow for you.
https://github.com/okta/okta-auth-js#example

[Shardul]

Hi Erik,

Thank you for your quick response.

I will try it and will let you know the result.

Thank you.

Regards,
Shardul Arun Pathak