Authentication in React app using Flask Server-Sided Sessions

Подписаться 3 тыс.

Просмотров 45 тыс.

50% 1

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/ahn...
Flask-Session: flask-session....
Redis for Windows: github.com/Mic...
Software Used
============
Recording: OBS Studio
Thumbnail: Adobe Photoshop
Editing: Sony Vegas Pro
Hope you enjoy this video, I am open to feedback.

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

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

@IamFrancoisDillinger 2 года назад

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 2 года назад

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

@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 7 месяцев назад

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

@Pouckimon 2 года назад

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

@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

@ИгорьКлещёв-н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!

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

@andrewkulidjian1618 2 года назад

dude you're powerful

@ramasrinivas1 Год назад

Do we need redis?

@kevincueva4419 2 года назад

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

@wilchardruin 6 месяцев назад

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

@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 10 месяцев назад

Same! Were you able to fix it?

@KOOBA2137 10 месяцев назад

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

@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 7 месяцев назад

Yeah i faced this how did you solve that

@AudreyVasher Год назад

this is amazing! Thank you for your help.

@jakubrozkosz179 7 месяцев назад

Great great great video, thanks man!

@captainwalter 2 года назад

thank you awesome clear and concise video!

@HienPham-he2yn Год назад

Great tutorial. Thank you!

@tainebambrough6029 2 года назад

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

@captainwalter 2 года назад

lol i always ask this on tutorials!

@raisingas2457 2 месяца назад

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

@bestofsplitgate300 3 года назад

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 3 года назад

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.

@getoverhere4465 5 месяцев назад

Might this code possibly be on Github?

@ranik2143 Год назад

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

@rdm_666 4 месяца назад

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 2 месяца назад

@rdm redis was used to store sessions

@Dholi1 2 года назад

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 2 года назад

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 2 года назад

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

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

@shreyash1 Год назад

thanks for video

@cantedit9285 2 года назад

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

@andrewkulidjian1618 2 года назад

thank you for this

@Kennethlumor 2 года назад

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

@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 6 месяцев назад

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

@TEMUcool-p6i 11 месяцев назад

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 9 месяцев назад

also I have this issues please

@asimkaghzi9698 2 года назад

how do keep the session alive even I reload the page

@devguyahnaf 2 года назад

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

@sivakumars8627 7 месяцев назад

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

@prerakmathur20 2 года назад

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

@devguyahnaf 2 года назад

Sure, one day

@pizzapanni 2 года назад

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 2 года назад

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

@dakzter1 2 года назад

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 2 года назад

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

@devguyahnaf 2 года назад

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.

@FootClob 9 месяцев назад

my session keeps getting cleared when i route

@raisingas2457 2 месяца назад

Same here

@alexhernandez4276 2 года назад

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

@devguyahnaf 2 года назад

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

@araikage2458 2 года назад

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 2 года назад

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 2 месяца назад

@@adrianabalbuena8718same to me

@chadcat420 11 месяцев назад

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 11 месяцев назад

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.

@ax3lgarcia675 2 года назад

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

@devguyahnaf 2 года назад

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

@xartydev 3 года назад

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

@devguyahnaf 3 года назад

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 3 года назад

@@devguyahnaf Good point. That could happen.

@houssampedro96 2 года назад

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

@devguyahnaf 2 года назад

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 2 года назад

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

@shaharyarahmed5777 2 года назад

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

@devguyahnaf 2 года назад

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

@shaharyarahmed5777 2 года назад

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?

@virus6766 2 года назад

nice

@robiot 3 года назад

Pog

@eddwinnas 2 года назад

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

@devguyahnaf 2 года назад

It is

@eddwinnas 2 года назад

@@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 2 года назад

@@eddwinnas Thanks for the kind words :)