jacksteamdev · May 17, 2022 13:04
diff --git a/popup.html b/popup.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase Persistent Auth Example</title>
  </head>
  <body>
    <h1 id="authState">Checking auth state...</h1>
    <input type="email" id="email" placeholder="Email" />
    <input type="password" id="password" placeholder="Password" />
    <button id="signIn">Sign In</button>
    <button id="signOut">Sign Out</button>
    <p>Not registered? <a href="#">Create an account</a></p>
    <script src="popup.js" type="module"></script>
  </body>
 </html>
diff --git a/popup.js b/popup.js
 import { initializeApp } from "./firebase-app.js";
 import {
  getAuth,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
 } from "./firebase-auth.js";

 // Your web app's Firebase configuration
 const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "chrome-extension-mv3-tests.firebaseapp.com",
  projectId: "chrome-extension-mv3-tests",
  storageBucket: "chrome-extension-mv3-tests.appspot.com",
  messagingSenderId: "xxx",
  appId: "xxx,
 };

 // Initialize Firebase
 initializeApp(firebaseConfig);
 const auth = getAuth();

 const authState = document.getElementById("authState");
 onAuthStateChanged(auth, (user) => {
  console.log("current user", user);
  authState.innerText = user ? `Signed in as ${user.email}` : "Not signed in";
 });

 const email = document.getElementById("email");
 const password = document.getElementById("password");

 const signIn = document.getElementById("signIn");
 signIn.addEventListener("click", () => {
  signInWithEmailAndPassword(auth, email.value, password.value)
    .then(({ user }) => {
      console.log("signed in", user);
    })
    .catch(console.error);
 });

 const signout = document.getElementById("signOut");
 signout.addEventListener("click", async () => {
  signOut(auth);
 });