jacksteamdev/popup.html

## 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>

## 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);
});