DEV Community

Cover image for Authentication with React.js

Authentication with React.js

Oksana Ivanchenko on January 16, 2020

We will be using hooks and context. We will only use the basic concept, you don't need to go too far into this subject for this use case. ...
Collapse
 
amine1996 profile image
amine1996 • Edited

I'm not sure storing the credentials locally is the way to go. Also the redirection is easily bypassable by setting an arbitrary auth.data.

Collapse
 
bernardbaker profile image
Bernard Baker

I agree. I would suggest using Auth0. They have a good example on the Auth0 website.

Collapse
 
ksushiva profile image
Oksana Ivanchenko • Edited

We would not save the user credentials in the browser local storage, but rather just the token received after authentication. As I said, the tutorial do not cover the backend portion of it but rather saving the token and blocking access to "authenticated" routes. You could use it to implement Auth0, which could actually be a nice continuation of my tutorial! :)

EDIT: I agree my article does not emphasize this enough. I updated the article to add a disclaimer to save the token and not the actual credentials. Thank you!

Thread Thread
 
bernardbaker profile image
Bernard Baker

Hi, firstly it's a great article. Implementing the back end token code was beyond the scope in my opinion. What it demonstrates is exactly what you said in your reply. And the private route implementation is good as well.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome! I'm currently learning React, this will help 🙂

Collapse
 
dmikester1 profile image
Mike Dodge

In AuthContext.js this bit is causing an error for me:
const setAuthData = (data) => {
setAuth({data: data});
};

It is saying Argument types do not match parameters. So I added loading: false to the object passed in to setAuth and the error went away.

Collapse
 
okbrown profile image
Orlando Brown • Edited

Great stuff! 👏🏾
However may I present something to you?

Lets say I was your boss and I said "...right, just what we need. What do we need to do, to get this into production?..."

What would your response be?

Collapse
 
josuerodriguez98 profile image
Josué Rodríguez (He/Him)

Thanks for this tutorial! It really helped me and my team with a task 😁

Collapse
 
maydara86 profile image
Maydara86

Thank you miss, your tutorial was very helpful to me.

Collapse
 
devorji profile image
Chigbogu Orji

Nice one from you dear, the article was well-detailed and really helpful...

Collapse
 
biciatoleandro profile image
Leandro Biciato

The best react authentication i've found on internet. You're awesome !!!

Collapse
 
bernardbaker profile image
Bernard Baker

Great article. It would be great to see this extended with JWT and a database. Or using Auth0.

Collapse
 
fahadashiq12 profile image
Fahad Ashiq

Great.. Help!!! Thanks for sharing!!

Collapse
 
tammarut profile image
arima

Nice one!💚