firebase-read-from-db.js

//Create a .env file and assign all of your firebase private keys to variables and refernce them in the firebase component.
// In the firebase.js component:
import firebase from "firebase/app";
import "firebase/firestore";

import "firebase/auth";
import "firebase/database";

const app = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: "G-PW43DD7E57",
};

if (!firebase.apps.length) {
    firebase.initializeApp(app);
} else {
    firebase.app();
}
export default firebase;
export const db = firebase.firestore();

================================================================
  //In the component where you want to read from & display data from your db:
  //ViewCustomers.js
  import firebase, { db } from "../components/Firebase.js";
  
  export default function DisplayUsers(){
  const [activeUsers, setActiveUsers] = useState([]);
  const [notActiveUsers, setNotActiveUsers] = useState([]);
  const [allUsers, setAllUsers] = useState([]);
  
     useEffect(() => {
        db.collection('Users').get().then(querySnapshot => {
        const documents = querySnapshot.docs.map(doc => doc.data())
        const filteredUsers = documents.filter(person => person.UserDetails.active_subscription === true);
        const usersNotActive = documents.filter(person => person.UserDetails.active_subscription === false);
        setActiveUsers(filteredUsers);
        setNotActiveUsers(usersNotActive);
        setAllUsers(documents);
      })
  }, []);
    
    return (
    <div className="h-screen w-screen">
      {activeUsers.map((item, index) => (
        <div className="bg-ocean flex flex-col items-center w-full border-2 border-solid border-black border-opacity-100">
          <div>
            {item.UserDetails.first_name} {item.UserDetails.last_name}{" "}
          </div>
          <div>{item.UserDetails.address.street}</div>
          <div>{item.UserDetails.address.city}</div>
          <div>{item.UserDetails.address.zip}</div>
          <div>{item.UserDetails.phone_number}</div>
        </div>
      ))}
    </div>
  );
 
  }