A Quick Guide to React Login Options

A Quick Guide to React Login Options

This tutorial shows you how to add login options to a React app. Includes redirecting to log in, embedding a sign-in widget, and using plain ol’ JavaScript.

Jesse W

Hey! Not sure, if you’ll see this, but I’ve successfully implemented the “Create Your Own Login Form” component as a functional component in my app. Currently, I also now need to add Facebook as a login option too, and for now just added a button that takes you to the Facebook login page… however I have no idea if it’s working because the callback takes me to some crazy page. I see a couple other posts mention adding an IDP option in the login… any idea where I would add it in the CYLF option?

Thank you!!!

Matt Raible

If you want to add social login with Facebook via Okta, see our guide for Facebook. You will need to customize your hosted sign-in widget (or the one embedded within your app) to include settings for Facebook.

Refael dimri

Cab i use this to my website? Where all the users are stored?

Jesse W

Hey Matt,

I followed the guide, just posted a ticket. I don’t mind for now using a button that targets my authorization URL (users likely would rather see the FB login if they are using FB, seems more legit) but after a successful login through that, im redirected back without being authenticated. I do have a giant #id_token=giant_string but not sure what that does… any assistance is greatly appreciated!

Jesse W

i was able to add this pretty easily to my site, users are stored in your okta directory

Jesse W

nvm figured it out!

Your code for the custom form no longer works. You need to add the following to the header.js file.

import { Link, useHistory } from 'react-router-dom';
if (!authState) return null;
const login  = async () => { history.push('/protected') }
const logout = async () => { await oktaAuth.signOut(); }

This is important otherwise you get a wide array of unrelated errors.

Hello Renzo,

Did you use the versions of our React SDK that were specified in the post? If you use newer versions, yes, it’s likely there are errors - especially if you’re using a different major version.

Hi mriable, I’m using @okta/okta-auth-js@5.1.1 , @okta/okta-react@6.0.0 , react-router-dom@5.2.1.

However, when you have a custom sign in form, you specifically do not want to signInWithRedirect(). Otherwise it’ll redirect to the okta based form.

1 Like

I’m not surprised things don’t work. The tutorial specifies the following versions:

@okta/okta-react@5.0.0 @okta/okta-auth-js@4.8.0

I’m pretty sure everything works if you use these versions. We can add it to our list of posts to update.