Create new user registration on web project with firebase

Here's a step-by-step guide on how to create a new user registration system on a web project using Firebase:

Prerequisites:

1. You have a Firebase project set up with the Firebase Realtime Database or Cloud Firestore.
2. You have a basic understanding of HTML, CSS, and JavaScript.
3. You have the Firebase JavaScript SDK installed in your project.

Step 1: Create a Firebase Authentication Instance

In your JavaScript code, create a new instance of the Firebase Authentication object:

import firebase from 'firebase/app';
import 'firebase/auth';

const app = firebase.initializeApp({
  apiKey: '<API_KEY>',
  authDomain: '<AUTH_DOMAIN>',
  projectId: '<PROJECT_ID>',
});

const auth = app.auth();

Replace <API_KEY>, <AUTH_DOMAIN>, and <PROJECT_ID> with your Firebase project's API key, authentication domain, and project ID, respectively.

Step 2: Create a Registration Form

Create an HTML form to collect user registration information:

<form id="register-form">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <label for="confirm-password">Confirm Password:</label>
  <input type="password" id="confirm-password" name="confirm-password"><br><br>
  <input type="submit" value="Register">
</form>

Step 3: Handle Form Submission

Use JavaScript to handle the form submission and create a new user in Firebase Authentication:

document.getElementById('register-form').addEventListener('submit', (e) => {
  e.preventDefault();

  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;

  if (password!== confirmPassword) {
    alert('Passwords do not match');
    return;
  }

  auth.createUserWithEmailAndPassword(email, password)
   .then((userCredential) => {
      // User created successfully
      const user = userCredential.user;
      console.log('User created:', user);
      // Redirect to a success page or perform other actions
    })
   .catch((error) => {
      console.error('Error creating user:', error);
      // Handle error
    });
});

In this code, we prevent the default form submission behavior, validate the password and confirm password fields, and then create a new user in Firebase Authentication using the createUserWithEmailAndPassword method. If the user creation is successful, we log the user to the console and redirect to a success page or perform other actions. If there's an error, we log the error to the console and handle it accordingly.

Step 4: Verify User Email (Optional)

To enable email verification for new users, you can use the sendEmailVerification method:

auth.onAuthStateChanged((user) => {
  if (user) {
    user.sendEmailVerification()
     .then(() => {
        console.log('Email verification sent to:', user.email);
      })
     .catch((error) => {
        console.error('Error sending email verification:', error);
      });
  }
});

This code sends an email verification link to the new user's email address. When the user clicks the link, they will be redirected to a verification page.

Step 5: Store User Data (Optional)

If you want to store additional user data in your Firebase Realtime Database or Cloud Firestore, you can use the set method:

auth.onAuthStateChanged((user) => {
  if (user) {
    const userData = {
      name: 'John Doe',
      age: 30,
    };
    user.updateProfile(userData)
     .then(() => {
        console.log('User data updated:', userData);
      })
     .catch((error) => {
        console.error('Error updating user data:', error);
      });
  }
});

This code updates the user's profile with additional data.

That's it! With these steps, you've created a basic user registration system using Firebase Authentication. You can customize and extend this system to fit your specific needs.