Firebase Auth Portfolio Project Example - Frontend

This is a client side login for Firebase. It includes the login with email and password functionality and the sign in with Google functionaility from Firebase.

This firebase refactor and scaffold is based on The Debug Arena's implementation of firebase

It includes the use of Firebase Firestore which is the NoSQL Database that can be added to Firebase projects.

Here is the original REPO. The original project was created using create-react-app toolchain instead of vite

This refactor uses vite

Note: You must manually configure your Firebase account

TO DO:

• create your firebase web app
• set up and Enable authentication methods
  • Email/Password
  • Google
• add the Firebase Firestore NoSQL database
• change the Rules in your Firestore DB to

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

You are not required to use both Email/Password sign in and Google sign in. You can refactor the code to only use one or the other.

User

The logged in user is automatically set in state in the App.jsx parent component. This allows you to protect your routes using a ternary in your element attribute.

Do Not pass the user as a prop. Instead, Use the fetchUserData helper function in a useEffect in the component you are navigating to. This will allow you to refresh the page.

FULLSTACK ADJUSTMENTS

You will need to adjust the code in the fetchUserData.js file to make a fetch call to the backend.