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
Login Form: 33:09
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