Your App's Superpowers: User Authentication

This is for when a new user creates an account. We tell Firebase to `createUserWithEmailAndPassword`. It's like telling the bouncer, "Add this person to the guest list!"

// First, import the functions you need from the Firebase SDK
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

// ... your Firebase setup code ...
const auth = getAuth(app);

const signUpBtn = document.getElementById('signUpBtn');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

signUpBtn.addEventListener('click', () => {
  const email = emailInput.value;
  const password = passwordInput.value;

  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Hooray! You're on the list!
      console.log('Successfully signed up!', userCredential.user);
      alert('Welcome to the club!');
    })
    .catch((error) => {
      // Uh oh, something went wrong.
      console.error('Error signing up:', error.code);
      alert('Oops! ' + error.message);
    });
});

Once a user is on the guest list, they can log in. We use `signInWithEmailAndPassword` to check their credentials.

// You'll also need to import this function
import { signInWithEmailAndPassword } from "firebase/auth";

const logInBtn = document.getElementById('logInBtn');

logInBtn.addEventListener('click', () => {
  const email = emailInput.value;
  const password = passwordInput.value;

  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log('Successfully logged in!', userCredential.user);
    })
    .catch((error) => {
      console.error('Error logging in:', error.code);
      alert('Wrong email or password, try again!');
    });
});

This one's easy! The `signOut` function tells Firebase to log the current user out.

// You'll also need to import this function
import { signOut } from "firebase/auth";

const logOutBtn = document.getElementById('logOutBtn');

logOutBtn.addEventListener('click', () => {
  signOut(auth).then(() => {
    console.log('User signed out.');
  }).catch((error) => {
    console.error('Sign out error', error);
  });
});

This is the most important part! How does our app know if someone is logged in or out? We use `onAuthStateChanged`. It's like a manager who constantly watches the door. When someone logs in or out, it tells our code so we can show or hide the right parts of our page.

// You'll also need to import this function
import { onAuthStateChanged } from "firebase/auth";

const authContainer = document.getElementById('auth-container');
const diaryContainer = document.getElementById('diary-container');

onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in!
    console.log('Manager sees user:', user.email);
    authContainer.style.display = 'none';
    diaryContainer.style.display = 'block';
  } else {
    // User is signed out.
    console.log('Manager sees no user.');
    authContainer.style.display = 'block';
    diaryContainer.style.display = 'none';
  }
});