Efter förra veckans genomgång av Firebase Cloud Storage och repetition av Firebase Firestore så är målet den här veckan att knyta ihop Firebase Auth med de två, så att vi får en komplett app med inloggning, databas och lagring av uppladdade filer.
Vi satte upp en ny React-app och installerade react-bootstrap, bootstrap, [email protected]., react-dropzone, react-router-dom@next (v6), history samt firebase.
Därefter konfigurerade vi en ny Firebase-app och denna gången lade alla nycklar i .env så vi inte commit:ar dem till GitHub.
Länkar
Firebase Cloud Storage Web Docs
https://firebase.google.com/docs/storage/web/start
React Bootstrap
https://react-bootstrap.github.io/
Workshop/självstudier
Skriv klart nedan steg utifrån basen vi kodade idag. Kolla länkarna för varje steg för info – och implementera alla Firebase-metoder inuti vår AuthContext, som de olika komponenterna sedan konsumerar.
1. Login
Skriv Login-komponenten utifrån basen i Signup.
https://firebase.google.com/docs/auth/web/start?authuser=1#sign_in_existing_users
2. Logout
Gör en Logout– funktionalitet. Antingen som en egen komponent eller som meny-alternativet kan kalla på i vår Navigation-komponent.
https://firebase.google.com/docs/reference/js/firebase.auth.Auth?authuser=1#signout
3. Forgot Password
Gör en ForgotPassword-komponent som tar emot en e-postadress och visar ett meddelande för användaren om att kolla sin inkorg för mer information.
https://firebase.google.com/docs/auth/web/manage-users?authuser=1#send_a_password_reset_email
🌟 4. Update Profile
Skriv en UpdateProfile-komponent som låter (en inloggad) användare uppdatera sitt namn, e-postadress och annan valfri information.
Plus-poäng om du även kan få till att användaren kan byta lösenord!