User Authentication

Step 1: The Clubhouse Doors (HTML)

First, we need a sign-up form. This is the door where new people can ask to be put on the guest list. Add this HTML to your project.

<!-- Your sign-up form -->
<h3>Create Your Secret Diary Account</h3>
<input type="email" id="email" placeholder="Your Email">
<input type="password" id="password" placeholder="Choose a Strong Password">
<button id="signUpBtn">Sign Up</button>

Step 2: Hiring the Bouncer (Firebase)

Now, we need to connect our app to Firebase Authentication.

Firebase will give you a special set of configuration keys. You'll add these to your JavaScript file to connect your app to your new Firebase project.

Step 3: Giving the Bouncer the Guest List (JS)

This is the magic! This JavaScript code tells the bouncer (Firebase) to add a new person to the guest list when they click the "Sign Up" button.

// Make sure you've already initialized Firebase!

// Get the authentication service
const auth = firebase.auth();

// Find our HTML elements
const signUpBtn = document.getElementById('signUpBtn');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

// Listen for a click on the sign-up button
signUpBtn.addEventListener('click', () => {
  const email = emailInput.value;
  const password = passwordInput.value;

  // Tell Firebase to create a new user!
  auth.createUserWithEmailAndPassword(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.message);
      alert('Oops! ' + error.message);
    });
});

When you run this, you can create a real user account that gets securely stored in your Firebase project. You've just built authentication! 🎉