JWT Authentication for React and FastAPI (easy with code)
Вставка
- Опубліковано 25 сер 2024
- JWT is a popular way to implement authentication. React and FastAPI are two of the most popular frameworks for building software. We will create a simple login screen in React and authenticate using FastAPI.
💻 Git Repository: www.codingwith...
🎥 React + FastAPI: • How to build a React +...
🎥 AWS Lambda + FastAPI: • Deploy FastAPI on AWS ...
🎥 MongoDB + FastAPI: • Unlocking the Power of...
🎥 MySQL + FastAPI: • How to build a FastAPI...
🎥 PostgreSQL + FastAPI: • How to build a FastAPI...
🎓 Courses can be found:
FastAPI Beginner & Advanced: www.udemy.com/...
Learn Chatbot Development: www.udemy.com/...
👨💻 Hi, I am Eric!👨💻
Hey! I’m a seasoned developer and Cloud enthusiast. I love sharing my knowledge and helping others to discover the exciting world of programming and cloud technologies. For more tutorials, tips, and tech magic, don’t forget to hit that subscribe button and ring the bell for notifications!
🙏 Support The Channel 🙏
If you found this tutorial helpful, please give it a thumbs up 👍, comment, and share it with your network 🌍
PS: The links in this description might be affiliate links. If you purchase a product or service through one of those links, I may receive a small commission. There is no additional charge to you.
#fastapi #python #react
This is called the perfect timing, I was struggling to authenticate user in protected pages. Thanks to you and your precise explaination, I got the answer.
You're so welcome! Keep the grind going 🙂
Very perfect timing for me too. A while back I got into React and FastAPI combo watching your tutorial and now this step was missing. Thanks for this man! Much Appreciated.
Great to hear! Cheers!
Nice video! I had just created a fastapi+react authentication routes and your example gave me ideas to refactor some parts
That's great! Keep on coding 🙂
Overall great video!
What is missing here is showing how to secure enpoints in the fastapi so that they are protected and how to make queries on the frontend to those enpoints (how to include token etc).
Great suggestion! What you want to do is use a UserDependency on the BE and add Authorization: Bearer as a header on the FE.
Hi @@codingwithroby..could you make a video on how to do this please as its such a common occurrence? Most FastAPI applications are not on localhost, they're often hosted (e.g. on EC2) where theyre exposed for anyone to access. Then a React app calls the endpoint. Can you show how you protect these FastAPI endpoints (eg with Tokens) and havr a React app call it?
CORS is not really for protecting the server, it is something implemented in the browser to avoid pages making cross-requests. You can download a plug-in for firefox to ignore CORS headers for example.
Thanks for the additional context that can help others!
Great as always! It would be great too if you deploy them on Vercel or AWS.
I have a vercel video on here - I have a full AWS deployment course coming soon!
Nice video! Can you share which vscode theme you use?
One Dark Pro - it is an extension 🙂
Thank you so much. This video was perfect. A+++++++
Glad you liked it! Woot !!
ty!
You bet!
God bless you!
I am glad you enjoy it 🙂
Nice video. If I have a lot of pages that only an authenticated user can access, do I need to place the code of `useEffect` in each component?
Thanks! Yeah you do - another way is to have the component sit inside a parent and the parent redoes the useEffect each time
Great video, i would suggest stop using create react app and use vite instead (So much faster)
Thanks for the tip! I just started looking into vite for my future videos 🙂