Hi! I'm fairly new to developing in react. I have followed a couple of tutorials and built a few web apps. I have also built really small apps on my own. Currently, I am working on my first "full stack" app (Postgres, Node, Express and React). As of yet, I have built a really minimal note taking app and would now like to add user authentication and sessions to personalise user experience and to add in some more features. I have been stuck on this for some time now and have not been able to find any good resources that could explain how I could add in this feature.
I understand that this might be too much of an ask, but, if any of you have any resources that I could use to understand or would like to collaborate with me to build out a small app that could teach me tons, I would really really appreciate it. Thank you so much!
Because there are already some specific solutions on here, I just want to make sure you are familiar with how this works at a high level.
There are two main ways to do this (not counting Facebook/.. login):
Method A:
Method B:
This is mostly like method A but the server doesn't store the secret token in a database and instead encrypts a message with a secret key and sends it to the client. When the client makes a request with the encrypted message, the server can decrypt it and check for it's contents (usually the userID and expiration date). JWT usually works like this
Method B has the advantage that it's decentralized and requires less database access, but the major downside that you can't invalidate sessions form the server.
If you have time, I'd recommend you familiarize yourself with method A, as it's the most flexible and you'll learn better what's really going on before you jump into existing solutions.
If you have any further questions about the "bigger picture" feel free to ask on twitter, I'm happy to help.
Thanks a lot for this high level view !
I'm a full stack dev working full time with js: node on the back and react on the front.
The way it's done is using JWT - JSON Web Tokens. You can use passport for the auth part, and then, use https://www.npmjs.com/package/jsonwebtoken to generate and verify the tokens. Let me know if you need more help.
Here's a 2-part article I used when I was first trying to figure out authentication with React. The only part I ignored is the JWT part. I use Redis to manage sessions instead of JWT.
https://vladimirponomarev.com/blog/authentication-in-react-apps-creating-components
I don't have a strong opinion about JWT. I just find managing sessions with cookies and Redis more straightforward, and I've never built an app that was so successful it became a choke point.
I was just about to link this same post! I did not follow this post exactly as written, but it was the guiding information I used when implementing my own apps auth system and it provided all of the info I needed (having never added auth to a react/node app previously).
Check out AWS Cognito. It gets you really far down the field. It handles all user authentication, password reset, email validation, and the like. They will even build and host your account creation pages if you want.
Here's a quickie React.js + Cognito starter that I built.
Have a look at Facebook's excellent create-react-app, too. (If you follow back the repo I based my Cognito one on above, you will see that it ultimately uses FB's starter at core, too.)
This comment was deleted 9 years ago
This comment was deleted 9 years ago
This comment was deleted 7 years ago
Thank you so much for the recommendation, I have heard of passport, but never looked into it. I will be sure to do that now. I know about meteor as well, but haven't chosen to go with it as I want to build things out from scratch first to get a better understanding.