JWT Authentication for React and FastAPI (easy with code)

[@yadavakash2609]

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.

[@codingwithroby]

You're so welcome! Keep the grind going 🙂

[@herozero777]

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.

[@codingwithroby]

Great to hear! Cheers!

[@souzafelix]

Nice video! I had just created a fastapi+react authentication routes and your example gave me ideas to refactor some parts

[@codingwithroby]

That's great! Keep on coding 🙂

[@1mrnewton]

Nice video! Can you share which vscode theme you use?

[@codingwithroby]

One Dark Pro - it is an extension 🙂

[@fooktu]

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

[@codingwithroby]

Great suggestion! What you want to do is use a UserDependency on the BE and add Authorization: Bearer as a header on the FE.

[@theverbalremedy]

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?

[@loupa6128]

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?

[@codingwithroby]

Thanks! Yeah you do - another way is to have the component sit inside a parent and the parent redoes the useEffect each time

[@losdel21]

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.

[@codingwithroby]

Thanks for the additional context that can help others!

[@aTr41n95]

Thank you so much. This video was perfect. A+++++++

[@codingwithroby]

Glad you liked it! Woot !!

[@Andromeda26_]

Great as always! It would be great too if you deploy them on Vercel or AWS.

[@codingwithroby]

I have a vercel video on here - I have a full AWS deployment course coming soon!

[@OpenDeepLearning]

God bless you!

[@codingwithroby]

I am glad you enjoy it 🙂

[@Gelozo]

ty!

[@codingwithroby]

You bet!

[@Ziv-dw3mn]

Great video, i would suggest stop using create react app and use vite instead (So much faster)

[@codingwithroby]

Thanks for the tip! I just started looking into vite for my future videos 🙂