Open In App

Getting Started with Firebase Email/Password Authentication

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Email/password authentication is a widely used method for users to sign in to applications securely. It offers a familiar and convenient way for users to access their accounts.

Firebase Authentication simplifies the implementation of this process by handling backend tasks securely, such as storing passwords, managing user sessions, and integrating with popular identity providers like Google and Facebook.

In this article, we will learn about how to set up and implement email/password authentication in a web application using Firebase Authentication.

Understanding Email/Password Authentication

  • Email/password authentication is a process where users can sign in to an application using their email address and the password they have chosen.
  • It is a familiar method for users and offers a balance between security and convenience.
  • Firebase Authentication simplifies the implementation of this process by handling the backend tasks securely such as securely storing passwords, managing user sessions, and integrating with popular identity providers like Google, Facebook, and more.

Setting up Firebase Authentication

Before understanding the implementation we have to set up a Firebase Authentication in our Firebase project by following the below steps:

  • Create a Firebase Project: Go to the Firebase Console, create a new project and follow the setup instructions.
  • Enable Email/Password Authentication: In the Firebase Console, navigate to the Authentication section and enable the Email/Password sign-in method.
  • Integrate Firebase SDK: Add Firebase to your web or mobile app by following the setup instructions provided in the Firebase Console.

With Firebase set up, we are ready to implement email/password authentication in our application.

Implementing Email/Password Authentication in Web Apps

Let's understand the steps to implement email/password authentication in a web app using Firebase SDK. We'll start with a simple HTML page and add JavaScript for Firebase integration.

1. HTML Setup

Let's Create a simple HTML file that allows users to sign in or sign up using their email and password. Use Firebase Authentication to handle the authentication process.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Authentication</title>
</head>
<body>
    <h1>Email/Password Authentication</h1>
    <input type="email" id="email" placeholder="Email">
    <input type="password" id="password" placeholder="Password">
    <button onclick="signIn()">Sign In</button>
    <button onclick="signUp()">Sign Up</button>

    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js"></script>
    <script src="firebase-config.js"></script>
    <script src="app.js"></script>
</body>
</html>

Output:

simpleHTML

Explanation

  • This HTML file sets up a basic user interface for email/password authentication using Firebase Authentication. It provides input fields for email and password, along with "Sign In" and "Sign Up" buttons.
  • The Firebase SDK is included to enable Firebase Authentication, and the application logic is handled in a separate JavaScript file (app.js). When a user clicks the "Sign In" or "Sign Up" button, the respective function is called to authenticate the user using Firebase.

2. Firebase Configuration

Let's Create a firebase-config.js file with our Firebase project configuration:

const firebaseConfig = {
    apiKey: "AIzaSyDmaZAcK7xwQTAsQJxaGnG56oB8RIJDMnc",
    authDomain:  "samplep-d6b68.firebaseapp.com",,
    projectId: "samplep-d6b68",
    storageBucket:"samplep-d6b68.appspot.com",
    messagingSenderId:"398502093281",
    appId:"1:398502093281:web:5d685b0733d4d6d66472a0",
    measurementId: "G-9E6K9YD8D1"
};

const app = firebase.initializeApp(firebaseConfig);

Explanation:

  • This code initializes Firebase in a web application using the provided configuration object (firebaseConfig). The configuration object contains properties such as the API key, authentication domain, and project ID, which are necessary for Firebase to connect to your Firebase project.
  • Once initialized, Firebase can be used for various services, such as authentication, database, and storage, in the web application.

3. Authentication Logic (app.js)

This below code handles user authentication using Firebase email and password authentication. The signIn function allows existing users to sign in while the signUp function creates a new user account.

Both functions capture the email and password from input fields, then use Firebase authentication methods to sign in or sign up the user. Any errors during the process are logged to the console.

const auth = firebase.auth();

function signIn() {
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    auth.signInWithEmailAndPassword(email, password)
        .then((userCredential) => {
            // Signed in successfully
            const user = userCredential.user;
            console.log('Signed in as:', user.email);
        })
        .catch((error) => {
            console.error('Sign in error:', error.message);
        });
}

function signUp() {
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    auth.createUserWithEmailAndPassword(email, password)
        .then((userCredential) => {
            // Signed up successfully
            const user = userCredential.user;
            console.log('Signed up as:', user.email);
        })
        .catch((error) => {
            console.error('Sign up error:', error.message);
        });
}

Explanation

These functions use Firebase Authentication to handle sign-in and sign-up operations using email and password.

  1. signIn(): Retrieves the email and password values from the input fields, then uses auth.signInWithEmailAndPassword(email, password) to authenticate the user. If successful it logs the users email to the console. If there's an error it logs the error message.
  2. signUp(): Similar to signIn(), but uses auth.createUserWithEmailAndPassword(email, password) to create a new user account if the provided email doesn't already exist. If successful it logs the users email to the console. If there's an error it logs the error message

Testing Email/Password Authentication

Now, let's test the authentication flow in our web app:

  • Open the HTML file in a web browser.
  • Enter your email and password.
  • Click on the "Sign In" button to authenticate.
  • If you don't have an account, click on the "Sign Up" button to create a new account.

Output:

emailpassword

Conclusion

Overall, Email/password authentication is a fundamental aspect of user authentication in web applications. Firebase Authentication provides a simple and secure way to implement this functionality, allowing users to sign in using their email address and password. By following the steps outlined in this guide, you can easily integrate email/password authentication into your web application using Firebase Authentication


A

abhisheksi7gbu
Improve
Article Tags :

Explore

Lightbox