A Quick Guide to React Login Options

Developer Blog Comments
1

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.

2

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!!!

3

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.

4

Refael dimri

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

5

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!

6

Jesse W

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

7

Jesse W

nvm figured it out!

8

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.

9

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.

10

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
11

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.

12

App works great. Wasn’t sure at first.