Authentication in React app using Flask Server-Sided Sessions

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! kzbin.info
➤ My website: ahnafzamil.com
➤ My Discord Server: discord.gg/3chuca3EMh
➤ My Twitter: @ahnaf_zamil
➤ Support me on Patreon: www.patreon.com/ahnafzamil
Links
====
Code: github.com/ahnaf-zamil/flask-react-session-authenticaton-tutorial/
Flask-Session: flask-session.readthedocs.io/en/latest/
Redis for Windows: github.com/MicrosoftArchive/redis/releases
Software Used
============
Recording: OBS Studio
Thumbnail: Adobe Photoshop
Editing: Sony Vegas Pro
Hope you enjoy this video, I am open to feedback.

[@IamFrancoisDillinger]

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.

[@devguyahnaf]

Thanks for the kind words, glad the vid helped. Good luck with that project of yours!

[@vitvitvitvitvitvitvitvit]

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

[@Lalitkumar-eg1ol]

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

[@begforsalvation]

Bro, u are a legend! You explained everything so well i understood flask and implemented it for my vue application. Thank u so much!

[@vitamaxoduol9764]

I was just working on my end of phase project... got stuck in authentication part... this tutorial made me a great help. Thanks man

[@Pouckimon]

Thanks man! This helped me a lot! Saw some less efficient/safe ways to do it on KZbin and I knew I had to look further. This looks like the best way to do authentication. Very well explained! Thanks!

[@ИгорьКлещёв-н5э]

Thank you so much, the video is amazing, everything is explained well, the pace is great, this is exactly what i was looking for!

[@KOOBA2137]

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)

[@alexmarginean]

Same! Were you able to fix it?

[@KOOBA2137]

​@@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

[@ramasrinivas1]

Do we need redis?

[@JAVIEREDUARDODIAZALFARO]

Great, just what I was looking for, thanks bro

[@eshw23]

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!

[@yashtokekar4091]

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

[@saynjacob]

Yeah i faced this how did you solve that

[@tainebambrough6029]

Thanks for the tutorial! Side note what VS theme is that? It looks really good

[@captainwalter]

lol i always ask this on tutorials!

[@Deccoyi]

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?

[@devguyahnaf]

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.

[@bestofsplitgate300]

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

[@devguyahnaf]

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.

[@wilchardruin]

dude, you have done a great great great work, thanks

[@rdm_666]

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.

[@raisingas2457]

@rdm redis was used to store sessions

[@raisingas2457]

Did anyone figure out how to make their session persist? Mine wouldn't even after rewatching this video several times.

[@Dholi1]

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"?

[@devguyahnaf]

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

[@Dholi1]

@@devguyahnaf Thanks for the quick response! Appreciate it.

[@getoverhere4465]

Might this code possibly be on Github?

[@kevincueva4419]

Gracias amigo, buen video 😌 saludo desde Colombia desde hoy soy fiel seguidor 👏

[@andrewkulidjian1618]

dude you're powerful

[@alpecinjunky9786]

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?

[@stewie1059]

Yeah this was a problem I encountered.

[@vitvitvitvitvitvitvitvit]

Why you create an id with uuid? Is'nt better use auto_increment? I think selects is faster, when id is sequencial

[@devguyahnaf]

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

[@HienPham-he2yn]

Great tutorial. Thank you!

[@pizzapanni]

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?

[@devguyahnaf]

For every route that needs authentication, u need to do this. Or else, React wont know if u are authenticated or not

[@jakubrozkosz179]

Great great great video, thanks man!

[@AudreyVasher]

this is amazing! Thank you for your help.

[@TEMUcool-p6i]

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

[@ntwarioscar]

also I have this issues please

[@cantedit9285]

how do I deploy this app to Heroku? Can you make a video for it?

[@captainwalter]

thank you awesome clear and concise video!

[@dakzter1]

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?

[@katsu1524]

I also ran into this same problem, did you end up fixing the the problem? If so, how?

[@devguyahnaf]

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.

[@xartydev]

Nice! But isn't the best way to make with every account a token and then save it in the localStorge?

[@devguyahnaf]

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

[@xartydev]

​@@devguyahnaf Good point. That could happen.

[@prerakmathur20]

Thanks man! Well explained. Can you please explain how can I add Google OAuth to this app?

[@devguyahnaf]

Sure, one day

[@araikage2458]

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?

[@devguyahnaf]

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

[@adrianabalbuena8718]

​@@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

[@devguyahnaf]

@@adrianabalbuena8718 Interesting. For all the web apps I've made, it always persists. It's not even a same-site cookie. Very intriguing...

[@raisingas2457]

​@@adrianabalbuena8718same to me

[@ax3lgarcia675]

hello, what is the url for redis when we put the website in production's mod ? pleaase

[@devguyahnaf]

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

[@Kennethlumor]

Please and please help me do a video on how to add a search 🔎 systems to the flask app

[@asimkaghzi9698]

how do keep the session alive even I reload the page

[@devguyahnaf]

Session gets set in a cookie. If it doesnt persist after refreshing, that means you have problem setting the session

[@sivakumars8627]

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

[@shaharyarahmed5777]

I have a question. Cant a user tinker with the session ID and impersonate as another user?

[@devguyahnaf]

How would they know the session ID of another user? It's randomly generated every time, and doesn't follow a pattern

[@shaharyarahmed5777]

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?

[@alexhernandez4276]

How do I deploy the app, isn't redis running locally?

[@devguyahnaf]

You need to run Redis on your server or Cloud provider during deployment

[@houssampedro96]

Cool! how do we delete sessions when logout? because my DB sessions table is full of sessions.

[@devguyahnaf]

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

[@houssampedro96]

@@devguyahnaf thank you. Session.clear worked. Yes I tried Redis but I couldn’t start my redis-server

[@FootClob]

my session keeps getting cleared when i route

[@raisingas2457]

Same here

[@ranik2143]

Thanks a lot!!!! Thanks a lot!!!!Thanks a lot!!!!🙏🙏🙏

[@shreyash1]

thanks for video

[@eddwinnas]

I noticed flask-sessions hasnt been updated in a long time is it secure?

[@devguyahnaf]

It is

[@eddwinnas]

@@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.

[@devguyahnaf]

@@eddwinnas Thanks for the kind words :)

[@andrewkulidjian1618]

thank you for this

[@virus6766]

nice

[@robiot]

Pog

[@chadcat420]

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

[@devguyahnaf]

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.

[@TheCodeHunter]

pogus

[@EricT43]

Great tutorial, thank you!