React social login button example

Hello,
I’m trying to add a social login button to the app of my company using a self hosted login (not a widget), I’ve read the Okta documentation but I can’t find how to use the button to redirect to the external provider.
I’m usign okta-auth-js.

Can someone help me with an example of a social button please ?

Regards

Are you creating an OIDC application?

One of the options you have for that is to pass in an idp option, which is the ID for the external Identity Provider created for the IdP in Okta, when the authorize request is made, so that the user gets redirected to their external, social IdP and, then once they are logged in there and JIT’d into Okta, they will be sent back to your application via the redirect_uri.

Same thing is covered in our steps for how to test a configured external IdP.

So an idea for your use case, you can have these social login buttons determine which ID to add as the idp parameter for this call and trigger the redirect to the authorize endpoint.

Thanks @andrea for your reply.

Indeed I’ve found the missed idp parameter in the list of identity providers.

However, when I redirect to the constructed link I get “Bad request error”.

Any idea to solve this issue ?

Sounds like there’s something malformed in your authorize request. Are you getting a specific error back, or just a generic 400?

Usually when you see a generic 400 Bad Request when you make an authorize redirect to Okta (so there was no redirect to your IdP), there’s something wrong with the Client ID you are passing in. Make sure you are copying the Client ID from the OIDC application you created exactly how it appears AND ensure that the OIDC application itself is set to ACTIVE

Another thing: if you remove the “idp” parameter from your request, do you still see the same error?

I fixed the problem by opening my app in a private navigation browser.
Thank you @andrea for your reply.

Right now, I have another problem which is when I finish facebook authentication and redirect to my app I have a url like this:

http://localhost:3000/login/callback#id_token=eyJraWQiOiI4…YjQ&state=WM6D123

Have I missed anything ?

Best Regards

Next step would be to add logic on your callback route that looks something like the following (copied from our AuthJS docs):

if (authClient.isLoginRedirect()) {
  // callback flow
  await authClient.handleLoginRedirect();
} else {
  // normal app flow
}

This will let your app take the token returned in the hash fragment and store it in the TokenManager, so that you can use methods like isAuthenticated to determine if the user is already logged in with valid/active tokens.

1 Like

In my case, I’m usign the default React component LoginCallback (which is imported from ‘@okta/okta-react’).
Does it support social connect authentication callback?

Regards,
Hakim

How are you making the authorize request with the idp param? Are you manually redirecting, or are you using one of our SDK methods to do the make the call for you (aka, does your OktaAuth config contain ‘idp’)?

I’m redirecting manually using <a> tag.
No I don’t use idp param in my OktaAuth config.

Could you show me how to configure it with OktaAuth and how to make redirecting using SDK please ?

Hello @andrea,
Thanks for your help!

I tried the signInWithRedirect function with the idp as parameter and it work now!
Below the code I used:
oktaAuth.signInWithRedirect({ idp: '0oa1iscGDFQFq7jYRF0l7' });

Regards,
Hakim

1 Like

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