React Authentication with Firebase: React Hooks and Private Routes

Learn how to quickly add login to your React application with Firebase. This auth strategy will send your users an email with a link that they can use to authenticate in your application. No password required!

This is a popular approach because it offers:

– Low friction sign-up and sign-in
– Lower risk of password reuse across applications
– Verifying the email is the legitimate owner

⏰ TIMESTAMPS ⏰

Introduction: 0:00

Create a Firebase Project: 0:33

Create React App with Chakra UI: 1:44

Environment Variables: 3:51

Firebase Authentication: 5:43

useAuth Hook: 6:26

Layout Component: 18:55

Chakra Provider: 24:43

Nav Component: 25:58

Auth Provider: 31:24

Install React Router Dom: 32:11

Switch Component from React Router: 41:48

Form State and Errors: 44:45

Confirm Form: 47:36

Private Route: 52:01

Dashboard Component: 55:11

404 Not Found Component: 58:10

Next Steps: 59:31

🔗 HELPFUL RESOURCES 🔗

Authenticate with Firebase Using Email Link in JavaScript: https://firebase.google.com/docs/auth…

Firebase JavaScript SDK Reference: https://firebase.google.com/docs/refe…

React Hook Recipes: https://usehooks.com/

Code Shortcut for Mac and VSCode: https://code.visualstudio.com/docs/se…

🗂 CODE: https://gum.co/sfUzq

👋 Subscribe: https://www.youtube.com/c/Skillthrive/featured

#react