Not able to login into SPA (reactjs application) even after successfully token_id received

Questions
1

Hi Team,

I am working on reactjs application, I have implemented SSO authentication using Okta. I am also using Facebook and Google for SSO authentication. When I am login using Okta login screen I am landing inside the application successfully. When I am login using Facebook or Google, the URL is getting changed as below but I am not landing inside application I need to click on Sign In button and after clicking on button I am able to enter inside the application.

URL after sign in using Facebook/Google- Not landed inside application.

http://localhost:3000/callback#id_token=idtokendetails&state=statedetails

After clicking on Sign In button- Able to enter inside application and URL changed as below-

http://localhost:3000/private

I should land inside the application without clicking on Sign In button if I am having token_id.

Below is screenshot of application I have created in Okta for Facebook-

Facebook_Settings
Facebook_Settings771×476 24.6 KB

Can you please let me know what I am doing wrong here? It will be very helpful. Can you please help in resolving this error?

Any help would be appreciated.

Thank you.

Regards,
Shardul Arun Pathak

2

Hello Team,

I am waiting for your guidance on this question, please share your thoughts so I can resolve this issue.

Thank you.

Regards,
Shardul Arun Pathak

3

I’m not sure if you’re using an Okta library but I will just assume you are.

It sounds like the user is only authenticated by the external IDP (Facebook, Google) but the /authorize request is not sent afterwards. (You can confirm by checking the network trace).

From what I have seen, the login flow you’re describing only works with the Okta-hosted signin widget so I would suggest going with this option if you can. Otherwise, you need to figure out how to make an /authorize request after the user is authenticated.

4

Hi Warren,

Thank you for your response.

Yes I am using Okta React library.
@okta/okta-auth-js,
@okta/okta-react-js

Also I am using ./OktaSignInWidget.

We need SSO Authentication using Facebook, Google and other social media platforms, along with Okta sign in widget.

I have set up the Identity Providers Facebook and Google as per guidelines provided in Okta Developer guide.

I am using anchor tags like below for Facebook/Google authentication-

Sign in with Identity Provider

Could you please give more details on how can I make an /authorize request after the user is authenticated(using identity providers)?

Thank you.

Regards,
Shardul Arun Pathak

5

Hi @Shardul, what error are you actually seeing? To help with troubleshooting it may be useful to have a mental model of the flows. My mental model for the flow (assuming you’re using auth code flow) is that this should work something like:
Your app → okta/authorise
okta widget login page → facebook/authorise
facebook login page → okta/callback
okta/authorise → your app
your app → okta/token
logged in

This link may help you visualise it Social Login overview | Okta Developer

To troubleshoot this (sorry If you’ve already done this) in chrome dev tools, network tab, can you see:
the callback from facebook to okta callback url with a code?
can you see the callback from okta/authorize to your app wtih a code?
can you see the callback from okta/token to your app wtih a token?

breaking down the steps can help you work out where its failing. good luck!

Cheers,
Adrian

6

Hi Adrian,

Thank you for your response and suggestion, you provided all details.
Actually I created another post and reframed the question and asked with more details, below is the URL,

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

I have got the reply on above post and I have got the solution for this problem.
Now instead of hyperlinks I can see proper buttons for Facebook and Google login. Also now it is not 3 Step process. Within 1 step I am able to login into react application.

Now I am using OktaSignInWidget and I did setup according the the configuration mentioned in below URL-

“https://github.com/okta/okta-signin-widget#openid-connect”

Could you please let me know the approach and solution I am using is correct or not?

Thank you.

Regards,
Shardul Arun Pathak

7

I think there might be some issue with the port. The redirecting port and the port on which application is running might not be the same.