Forem: Raja Tamil

How to Create a Firebase User With Email & Password (2025 Guide

Raja Tamil — Thu, 13 Nov 2025 18:59:53 +0000

The createUserWithEmailAndPassword() is one of the 4 important methods that the Firebase Authentication SDK offers to build a user authentication system in minutes.

createUserWithUserNameAndPassword() → you’re here
onAuthStateChanged()
signInWithEmailAndPassword()
signOut()

The createUserWithEmailAndPassword() method allows you to create a new user account with email and password on the Firebase Authentication Backend directly from the front-end web app.

1. Initialize Firebase SDK To Your Web App

Before going any further, I assume that you already know how to create a Firebase project as well as how to add the Firebase SDK to your web app.

2. Enable Email/ Password Sign-in Method

Go to console.firebase.google.com and choose a Firebase project
Choose Build → Authentication from the sidebar of the project dashboard
Select the Sign-in method tab from the top
Click on Email/Password under Native providers
Enable Email/ Password by turning on the toggle switch and hit Save.

3. Import getAuth & createUserWithEmailAndPassword Methods

Import the Firebase Authentication SDK library via either NPM or CDN (I use CDN in the below example) and destructure the getAuth() and createUserWithEmailAndPassword() methods.

import {
  getAuth,
  createUserWithEmailAndPassword,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";

In order to implement any of the Firebase Authentication methods, first we need to create an instance of an authentication object.

const auth = getAuth();

4. Create Sign Up Form

Typically, you will want to call the createUserWithEmailAndPassword() method when a user submits the sign-up form.

First, create a simple sign-up form.

<form>
   <input type="email" id="email" placeholder="Email"/>
   <input type="password" id="password" placeholder="Password"/>
   <button id="signup-btn">Create Account</button>
</form>

Next, create DOM references for the email, password, and button input elements.

const email = document.getElementById("email");
const password = document.getElementById("password");
const signUpBtn = document.getElementById("signup-btn");

Then attach a click event with the callback function signUpButtonPressed to the sign-up button.


const signUpButtonPressed = (e) => {
  e.preventDefault();
  console.log("Sign Up Button Pressed");
}

signUpBtn.addEventListener("click", signUpButtonPressed);

5. Call createUserWithEmailAndPassword() Method

Inside the signUpButtonPressed function, call the createUserWithEmailAndPassword() method

const signUpButtonPressed = (e) => {
  e.preventDefault();
  createUserWithEmailAndPassword();
};

The createUserWithEmailAndPassword() method takes three arguments

auth: Authentication object that I’ve already declared above
email.value: The value of the email input field
password.value: Value of the password input field

const signUpButtonPressed = (e) => {
  e.preventDefault();
  createUserWithEmailAndPassword(auth, email.value, password.value);
};

The createUserWithEmailAndPassword() method is an asynchronous method that can be either fulfilled or rejected.

So add the await/async keywords to it.

const signUpButtonPressed = async(e) => {
  e.preventDefault();
  const userCredential = await createUserWithEmailAndPassword(auth, email.value, password.value);
};

To capture any errors, wrap the createUserWithEmailAndPassword() method with a try-catch block.

try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email.value,
      password.value
    );
    console.log(userCredential);
  } catch (error) {
    console.log(error.code);
  }

If everything goes well, you should see a brand new user account on the Firebase Authentication back-end.

How to add logged in user data in Firebase (Authentication / Cloud Firestore)

Raja Tamil — Mon, 15 Apr 2024 14:55:32 +0000

Google Maps/Marker Via Dynamic Library Import [2024] - The latest version

Raja Tamil — Tue, 12 Mar 2024 15:05:09 +0000

Show Google Map in Vue JS 3 Project Using Vue3-Google-Map NPM Package [5 mins]

Raja Tamil — Tue, 27 Feb 2024 13:00:34 +0000

How To Get Data By ID On Click - Firebase Firestore Database Tutorial

Raja Tamil — Tue, 20 Feb 2024 14:23:33 +0000

Display Google Maps in a Vue.js 3 Project

Raja Tamil — Wed, 14 Feb 2024 18:06:49 +0000

Learn Firebase Authentication With JavaScript [45 min video]

Raja Tamil — Tue, 06 Feb 2024 14:00:59 +0000

Add Element To Div Using appendChild() JavaScript

Raja Tamil — Tue, 11 Jul 2023 14:23:51 +0000

Learn how to add one or more HTML elements using appendChild() method in JavaScript.

appendChild() → you’re here
append()
append() vs appendChild()

1. Add Element Using appendChild()

Here is a simple HTML Markup

<section id="box-wrapper">
  <div class="box">div <br>1</div>
  <div class="box">div <br>2</div>
  <div class="box">div <br>3</div>
  <div class="box">div <br>4</div>
</section>

When you call the appendChild() method, it will add the newly created elements after the last child of the element inside the parent element.

Which is similar to the append() method.

But there are a few key differences between append() and appendChild() method.

const boxWrapper = document.getElementById("box-wrapper");

const box = document.createElement("div");
box.innerHTML = 'div <br> 5';
box.style.backgroundColor = "orange";
box.classList.add("box");

boxWrapper.appendChild(box);

Try it out

2. Add Multiple Child Elements As Siblings

Unlike the append() method, the appendChild() only allows you to add a single element in a single query.

If you want to add more child elements for the same parent, you’ll need to call it again with a new element as an argument.

const boxWrapper = document.getElementById("box-wrapper");

const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.style.backgroundColor = "orange";
box5.classList.add("box");

const box6 = document.createElement("div");
box6.innerHTML = 'div <br> 6';
box6.style.backgroundColor = "orange";
box6.classList.add("box");

boxWrapper.appendChild(box5);
boxWrapper.appendChild(box6);

3. Add Nested Child Elements One Inside The Other

Using appendChild(), we can easily add one element inside another element by chaining the appendChild() methods.

Unlike the append() method, the appendChild() method returns the appended element.

As you can see, I’ve called the appendChild() method on the boxWrapper object.

The argument is Object.assign() which is one of the easiest way to chain appendChild() to add nested child elements.

It takes two arguments.

**Element **that you want to create, like div or buttons
A JavaScript object where you’ll add one or more properties for the element.

boxWrapper.appendChild(
  Object.assign(
    document.createElement('div'),
    { classList : 'box',
      innerHTML: "div <br>5"
    }
  )
).appendChild(
  Object.assign(
    document.createElement("button"), {
      innerHTML: "Button"
    }
  )
)

In here, I first added the div elements which is box 5.

Then, I’ve chained the appendChild() method to add a child element inside the box 5 element which is the button.

Try it out

Firestore Get Document Data By ID - Firebase getDocs Query V9

Raja Tamil — Tue, 14 Mar 2023 16:35:08 +0000

Setting Up Firebase Via NPM (JavaScript/Node)

Raja Tamil — Fri, 03 Mar 2023 13:47:12 +0000

Add Firebase v9 to your JavaScript App in 10 mins

Raja Tamil — Sat, 25 Feb 2023 19:04:07 +0000

In this Firebase version 9 tutorial, you’re going to learn how to add Firebase to your JavaScript web apps.

This will be the very first step that you need to get started with Firebase.

In order to use Firebase V9 in your web app, you’ll need to

1. Create A Firebase Project From Firebase Console

Go to the Firebase Console → Go to the console or Sign in button at the top right.
Log in with your Gmail account.

Once you’re logged in, click the Add Project button to create a brand new Firebase project.

Give it a project name of your choice and click continue.

Turn off Enable Google Analytics for this Project and click Create Project.

It will take a few seconds to complete the creating a project process.

Click continue and it’ll take you to the Firebase Project Dashboard.

2. Register App

The Firebase Project Dashboard offers to register an app for five different platforms:

iOS
Android
Web
Unit, and
Flutter

Let’s Register an app for Web (JavaScript).

Click on the Web icon (</>) which opens up Add Firebase to your web app page.

Give it an App Nickname and Click Register app.

3. Add Firebase SDK to Your Web App

Adding Firebase to your JavaScript web app is a two-step process:

Install Firebase SDK
Add Firebase SDK Initialization Code

Firebase offers two ways to install Firebase SDK to your **web **project.

Use npm → Install Firebase SDK using NPM (Node Package Manager) by issuing the npm install firebase command (Node JS).

Use a script tag → Install Firebase SDK using CDN (Content Delivery Network) by adding the following code right above the ending body tag.

At this stage, you’re ready to use any of the Firebase services to your JavaScript web app.

Remove CSS Class From An HTML Element In JavaScript

Raja Tamil — Mon, 30 Jan 2023 12:51:14 +0000

Learn how to remove a CSS class from an HTML element dynamically in JavaScript.

1. Remove A Class From An Element Using classList.remove()

Here is a simple div element with the class name box.

<div class="box">box</div>

And here is the style for the box element.

.box {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  text-align:center;
}

Get the DOM references of all of the div elements from the HTML document using the getElementsByTagName() method on the document method.

The getElementsByTagName() method returns all the div elements as an HTMLCollection.

Assign the HTMLCollection to a constant called boxes.

We’ve only one div element in our HTML code ,so we can access it using its index position 0.

So, boxes[0].

Now remove the box class from the div element by calling the classList.remove() method on the div element object.

const boxes = document.getElementsByTagName("div");
boxes[0].classList.remove("box");

You can also use classList API to add a class to an element using the add() method.

2. Remove Class From An Element Using setAttribute()

Alternatively, you can remove a class from an element using the setAttribute() method.

The setAttribute() method takes two arguments.

The first one is the attribute name, in this case class.

The second argument is a value, in this case empty string which removes all the classes from an element.

const boxes = document.getElementsByTagName("div");
boxes[0].setAttribute("class", "");

If you want to remove a specific class from an element and leave the others as they are, use the classList.remove() method instead.

3. Remove Class From An Element Using className Property

Similar to the setAttribute() method, you can also use the className property to remove a class from an element.

const boxes = document.getElementsByTagName("div");
boxes[0].className = "";

Setting an empty string to the className property of the element object will remove all of the classes from an element.

4. Remove Multiple Classes From An Element

Learn how to remove more than one class from an element using:

classList.remove()
setAttribute()
className property

Here is the simple div element that has four classes: box, orange, circle, blue.

<div class="box orange circle blue" id="myDiv">box</div>

Let’s remove the circle and orange classes from the div element.

Get a DOM reference of the div element using the getElementById() method on the document object.

This method will return a single element object.

Assign it to a constant called box.

The remove() method of the classList API takes one or more class names as arguments that will be removed from an element.

It only removes the class names mentioned as arguments separated by a comma and leaves the other classes as they are.

const box = document.getElementById("myDiv");
box.classList.remove("circle", "orange");

The setAttribute() method on the otherhand, removes all the existing class names of an element and replaces it with the box and blue classes.

const box = document.getElementById("myDiv");
box.setAttribute("class", "box blue");

The className property does exactly that as well.

const box = document.getElementById("myDiv");
box.className = "box blue";

5. Remove Class From All Elements

Learn how to remove a class from all the elements at once dynamically using JavaScript.

Here are the five div elements that have the box class in them.

<div class="box">div <br>1</div>
<div class="box">div <br>2</div>
<div class="box">div <br>3</div>
<div class="box">div <br>4</div>
<div class="box">div <br>5</div>

Get DOM references of all the div elements using the getElementsByTagName() method on the document object.

The getElementsByTagName() will return all the div elements as an HTMLCollection which is an array type object.

Assign it to a variable called boxes.

const boxes = document.getElementsByTagName("div");
for(const box of boxes) {
  box.classList.remove("box");
}

Loop through them using for..of and define the box constant in the loop header which will hold the div element on each iteration.

Inside the loop, use the remove() method on the classList API to remove the class box from each element.

6. Remove Class From An Element On Click

Learn how to remove a class from an element on click.

Here is a simple div element with the class name box.

<div class="box">box</div>

Get DOM references of all the div elements that have the class box in them using the getElementsByClassName() method on the document object.

This will return an HTMLCollection and assign it to a constant called boxes.

const boxes = document.getElementsByClassName("box");
const boxPressed = (e) => {
  e.target.classList.remove("box");
}
boxes[0].addEventListener("click", boxPressed);

Get the first div element that has the box class in it by using its index position 0…boxes[0].

Alternatively, you could also use the getElementById() if you want to get a single element object instead of an HTMLCollection.

Attach a click event to the element object with the callback function boxPressed.

Inside the boxPressed function, get the clicked element by using the target property on the event object.

Finally, remove the box class from an element using the remove() method on the classList API.