ReactJS Social Auth Examples and Implementations

[scutler19]

Ideally my app will allow users the ability to login via email and/or Facebook. The standard email based Okta authentication is working just fine. But I’ve spent the last week trying to add Okta’s Facebook Social Auth flow to my React based app and I’ve made zero progress. The instructions here: https://developer.okta.com/authentication-guide/social-login/facebook only seem helpful to a certain point.

I’m running into problems mostly relating to redirectURIs, which the instructions seem to be a little unclear about. Are there any examples of implementations or tutorials for a custom Facebook and email based login in React?

[tom]

I see the problem, the Facebook Site URL is used for Facebook CORS. You want to #1 make sure that is your application’s domain.

What you want to do is enable Facebook Login for your application, and drop the Redirect URI that you get from Okta into Facebook’s Valid OAuth Redirect URIs

I’ll let the doc team know, thanks for pointing this out and let me know if this resolves your issue.

Thanks,
Tom

[scutler19]

I’ll take a look again this evening or tomorrow morning.

But if I’m understanding correctly, you’re suggesting that “https://… …com/auth2/v1/authorize/callback” needs to be dropped in the site URL, the Facebook app domain, and in FB valid oauth redirect uris?

In my app right now I have an HTML link included in my LoginForm component where the link is set to the Authorize URL as the instructions suggest. What’s the redirect_uri in the Authorize URL supposed to be set to? I currently have it as “http://localhost:3000/implicit/callback”

[tom]

I can see why that wasn’t clear.

Facebook Parameters:

Site URL = example.com //your app's domain, you do not need to point this to okta 

Valid OAuth Redirect URI = yourorg.oktapreview.com/oauth2/v1/authorize/callback //The Redirect URI from Okta Dev Console

The flow that it happening here:

1. Your user clicks on a login with facebook button in your app, which is a /authorizecall to Okta
2. Okta will redirect your user to Facebook to login, Okta tells facebook when it is done, to redirect back to Okta (that OAuth Redirect URI that you see in Okta Admin Console)
3. When the user authenticates correctly, Facebook will redirect to Okta
4. Okta will validate the OAuth 2.0 response and redirect the user back to your application

That is what is happening behind the scenes.

Your application needs to handle:

• Getting the user agent to redirect to Okta (/authorize with the idp= parameter)
• Handling the token response back from Okta

If everything is configured correctly, Okta will handle the rest.

Hope this helps. Let me know any questions,
Tom

[scutler19]

Still no luck and completely lost.

1. I’ve reset my App Domain in the Facebook basic app settings to localhost

2. I’ve reset the Site URL in Facebook basic app settings to http://localhost:3000/

3. I’ve added https://dev-... ...oktapreview.com/oauth2/v1/authorize/callback to Valid OAuth Redirect URIs in Facebook Login Settings

4. I have a tag in my LoginForm component just under the “Login with Email” form:
   <a href="https://dev-... ...oktapreview.com/oauth2/v1/authorize?idp={idpString}&client_id={clientIdString}&response_type=id_token&response_mode=fragment&scope=openid&redirect_uri=https://dev-... ...oktapreview.com/oauth2/v1/authorize/callback&state=WM6D&nonce=YsG76jo">Sign in with Facebook</a>

5. In my App.js I have
   const config = {
issuer: 'https://dev-... ...oktapreview.com/oauth2/default',
redirect_uri: window.location.origin + '/implicit/callback',
client_id: {same client_id in the Authorize URL}
}

   class App extends Component {
render() {
return (
<Router>
<Security issuer={config.issuer}
client_id={config.client_id}
redirect_uri={config.redirect_uri}
onAuthRequired={onAuthRequired}
>
...
</Security>
</Router>
);
}

After clicking on the link in the LoginForm I’m sent to an Okta page with “400 Bad Request.” Under the Network tab of Chrome’s Developer Tools the 400 status seems to be tied to callback: https://dev-... ...oktapreview.com/oauth2/v1/authorize/callback where the initiator is the Authorize URL.

I’ve tried adding a <Route path="/authorize/callback" ... /> the same way I have a <Route path="/implicit/callback" component={ImplicitCallback} /> but I can’t figure out what the component should be set to.

I tend to be really awful at figuring this type of stuff out without examples that I find online, but I’m not finding any React+Okta examples of a Facebook Login implementation.

[tom]

That is actually pretty good, you are back to Okta!

Does system log tell you anything worthwhile?

Also, is this app hosted anywhere where I could take a look?

[scutler19]

Here’s what the system log looks like. The top entries look promising, but I’m still not seeing any sort of interaction with Facebook.

Can you message me your email address? I’ll add you to the Github repo. When I get this working I plan on sharing the code and all the config settings for Facebook and Okta for anyone else trying to do something similar.

[scutler19]

Not sure if this is informative or helpful, but this is what the result of clicking on the anchor tag looks like…

[tom]

I’m omgitstom on github. This might take a level of troubleshooting that might not match well with the devforum. Send us an email here: developers@okta.com