Authentication in React app using Flask Server-Sided Sessions
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2021
- Authentication in React app using Flask Server-Sided Sessions
In this video, I show you how you can authenticate your React application using Flask server-sided sessions. This is a very easy way to authenticate clients using HTTPOnly cookies, and the session data is stored on the server-side, while the client only receives a corresponding session ID.
😀SUBSCRIBE for more videos! / ahnafzamil
➤ My website: ahnafzamil.com
➤ My Discord Server: / discord
➤ My Twitter: / @ahnaf_zamil
➤ Support me on Patreon: / ahnafzamil
Links
====
Code: github.com/ahnaf-zamil/flask-...
Flask-Session: flask-session.readthedocs.io/...
Redis for Windows: github.com/MicrosoftArchive/r...
Software Used
============
Recording: OBS Studio
Thumbnail: Adobe Photoshop
Editing: Sony Vegas Pro
Hope you enjoy this video, I am open to feedback. - วิทยาศาสตร์และเทคโนโลยี
Thanks man! This helped me a lot! Saw some less efficient/safe ways to do it on TH-cam and I knew I had to look further. This looks like the best way to do authentication. Very well explained! Thanks!
That helped a lot. I was working on something like that and missing a few things here and there while implementing the sessions. You just earned a sub dude
Bro, u are a legend! You explained everything so well i understood flask and implemented it for my vue application. Thank u so much!
Rarely comment but had to say great job. I'm a CS student trying to redo a group project originally built in flask to a flask API and React front end. Flask is so easy handling current_user with jinja, but you literally answered all my questions in a single video. Now I just need to get to work. Great job.
Thanks for the kind words, glad the vid helped. Good luck with that project of yours!
Thank you so much, the video is amazing, everything is explained well, the pace is great, this is exactly what i was looking for!
I'm making a internal system for my company, using flask and react, and I have no idea how auth works (until now, I was storing a token in client-side xD). Appreciate your content! :)
Gracias amigo, buen video 😌 saludo desde Colombia desde hoy soy fiel seguidor 👏
dude, you have done a great great great work, thanks
this is amazing! Thank you for your help.
thank you awesome clear and concise video!
Great tutorial, thank you!
I was just working on my end of phase project... got stuck in authentication part... this tutorial made me a great help. Thanks man
Great great great video, thanks man!
dude you're powerful
Learnt so fucking much from this video thanks, I am used to authentication in Nodejs/Express, its nice to see it how to do it in Python to, pretty much the same thing. Also so happy you used Typescript!
thank you for this
thanks for video
Thanks a lot!!!! Thanks a lot!!!!Thanks a lot!!!!🙏🙏🙏
Thanks for the tutorial! Side note what VS theme is that? It looks really good
lol i always ask this on tutorials!
nice
Pog
Do we need redis?
Thanks. great tutorial. I have one question. Since cookie is visible on the browser does it mean anyone that has that cookie can log in as the user? Or the library checking something else to prevent it?
Anyone who has the cookie can log in as the user. It's just an identifier to the actual authentication state stored on the server's side.
If it were a client sided session, it would have sensitive information such as the user's credentials and such. But as it's a server-sided session, the only thing stored on the client is a session identifier in the form of a cookie.
I get a TypeError: cannot use a string pattern on a bytes-like object when I run your code (it happens after login or register, when i should receive the cookie)
Same! Were you able to fix it?
@@alexmarginean sorry i dont remember exactly, but i dont think so. i changed the technology stack because i was getting a lot of other problems with flask
If the only scopes you are asking for is “know what servers you are in” is server sided sessions really needed? If someone uses xss on your site, thats more of a concern if the token being stored doesnt have sensitive scopes such as join servers, access email… etc
In terms of discord oauth
You may have misunderstood it.
Server-Sided sessions are not related to knowing "“what servers you are in". This is just an authentication method where a session ID cookie is sent to the client where the backend server stores the session data in either Redis, plain dictionary or memcache.
Thank you for the video! One question, won’t you run into the problem of Same-Site=„Lax“ not being able to set the cookie on Chrome if deployed?
Yeah this was a problem I encountered.
When I log in the cookie is being set, but when I log out the server responds with internal server error, and gives KeyError: user_id, basically it is not able to find the cookie although it works fine with postman but when I try this using browser this error occurs
Yeah i faced this how did you solve that
What was the reason to install redis to not use it at the end? Also getting the CORS errors, when running the code on the other machine.
Thanks for the tutorial!
If multiple people are logged into the website, how does session know which user to pop if they all have the same key "user_id"?
Even if its the same key, the "session" variable is proxied per request, and is only available in a request context. So even with the same variable, you will only be accessing the session OF THE USER WHO MADE THE REQUEST (wanted to stress it, hence the caps xD).
So for multiple users, each one making the request will have a different reference to the session data, even if the "same" session variable is used
That's how Flask implements context/proxy-based variables
@@devguyahnaf Thanks for the quick response! Appreciate it.
Thanks man! Well explained. Can you please explain how can I add Google OAuth to this app?
Sure, one day
how do I deploy this app to Heroku? Can you make a video for it?
Hey man, Awesome tutorial. I was wondering, I have my routes on a routes folder and the "app" is initialized in a __init__.py file. How would I initialize the app with bcrypt (bcrypt=Bcrypt(app)) in the routes folder because the app is initialized in __init__.py?
I also ran into this same problem, did you end up fixing the the problem? If so, how?
You can have the bcrypt in a separate file (maybe ext.py) like "bcrypt = Bcrypt()"
Then your app file, import bcrypt from ext
Then do "bcrypt.init_app(app)" after initializing your Flask app.
Do i have to do this check in useEffect for all the routes? For eg, in a real app, I would have a home, profile, settings etc and do I have to check if session id is valid in all pages using useEffect?
For every route that needs authentication, u need to do this. Or else, React wont know if u are authenticated or not
Might this code possibly be on Github?
Please and please help me do a video on how to add a search 🔎 systems to the flask app
Nice! But isn't the best way to make with every account a token and then save it in the localStorge?
All JavaScript has access to localStorage. With XSS attacks, malicious JavaScript can steal the token from localStorage and hack your account. This approach is NOT secure
@@devguyahnaf Good point. That could happen.
Great Tutorial! How do I persist the login in react? Because when I hit refresh on my website it gets back to the homepage. Will I store the returned user info in a localStorage and used it as a basis to persist the login in react?
In this tutorial I did show you how to persist it. You need not do anything with React. The cookie that is returned by Flask will be automatically set on your browser, and then sent on subsequent requests automatically.
Since authentication cookies are sensitive, they are set as HTTPOnly and JS need not be aware of it. Thus, React doesn't need to do anything. The cookie for the auth state will automatically be sent to the API, should you have it configured properly as I've showed in the video
@@devguyahnaf this is not true. The session is not persistent and you cannot do other request to the api. I try to make other endpoints to play and it loses the reference to the session
@@adrianabalbuena8718 Interesting. For all the web apps I've made, it always persists. It's not even a same-site cookie. Very intriguing...
pogus
Why you create an id with uuid? Is'nt better use auto_increment? I think selects is faster, when id is sequencial
It may be faster, but I always like to keep my IDs in a similar length. Plus, RDMS software don't start from ID 1 if you delete the previous records, which is something that annoys me
my session keeps getting cleared when i route
Cool! how do we delete sessions when logout? because my DB sessions table is full of sessions.
Welp, you can probably just session.clear on Flask. Also, I don't recommend using a DB for this, just use a lightweight cache server like Redis
@@devguyahnaf thank you. Session.clear worked. Yes I tried Redis but I couldn’t start my redis-server
hello, what is the url for redis when we put the website in production's mod ? pleaase
You will have to host Redis in production and use it's IP. If Redis is on the same server as the Flask app in production, then localhost SHOULD be fine
I have a question. Cant a user tinker with the session ID and impersonate as another user?
How would they know the session ID of another user? It's randomly generated every time, and doesn't follow a pattern
Thanks for the quick response! I am a bit new to this user session concept, I normally use flask_login and current_user to handle my logins with flask. But since I am using react as my front-end I cant use those functions anymore. So could you explain how this is a secure method and how the session logic actually works.. I mean you did explain it in the video but I wanted a "unblinded" explanation of the whole procedure. Also should I be using mongoDB or sqlite for my database storage?
How do I deploy the app, isn't redis running locally?
You need to run Redis on your server or Cloud provider during deployment
TypeError: cannot use a string pattern on a bytes-like object
// Werkzeug Debugger
i ge tthis error, some1 know how to fix it?
it happens on the login when i try to save the cookie
also I have this issues please
how do keep the session alive even I reload the page
Session gets set in a cookie. If it doesnt persist after refreshing, that means you have problem setting the session
@@devguyahnaf why session cookie not set in browser, when we use the localhost:5000/@me, it is not getting authorized as its sending the empty session object to Flask API server
I noticed flask-sessions hasnt been updated in a long time is it secure?
It is
@@devguyahnaf I watch a ton of youtube tutorials. You do a really good job with your style and teaching you got some natural talent. Keep it up bro I upvote all your stuff.
@@eddwinnas Thanks for the kind words :)
great tutorial, but please please please never use the trash windows command prompt. use either git bash or vs code terminal next time as a life hack lol. also firefox for web dev? ew
Appreciate the comment, but I have to disagree on Firefox.
Firefox for web dev is WONDERFUL!!! Their devtools have a better edge and are customizable than Chrome's. I've been using FF for years and I like it more than Chrome.
Also, this video is an old one. I rarely use Windows nowadays, as I do most of my dev stuff on Linux.
Great tutorial. Thank you!