Implementing Login with Email/Password and Google Authentication using Firebase

Introduction

User authentication is a fundamental feature in modern web applications. Firebase Authentication makes it easy to integrate authentication methods like Email/Password login and Google Sign-In. In this tutorial, we will create a simple login page that supports both authentication methods.

Live Demo

the url of the login page is provided here once you also check it here

Prerequisites

Before we begin, ensure that you have the following:

A Firebase project (Create one at Firebase Console)
Basic knowledge of HTML, CSS, and JavaScript
Firebase Authentication enabled for Email/Password and Google Sign-In

Setting Up Firebase

Go to the Firebase Console.
Select your project.
Navigate to Build > Authentication and enable Email/Password and Google Sign-In methods.
Obtain the Firebase configuration object from Project Settings > General > Your Apps.

Building the Login Page

We will create an index.html file that contains the login UI and Firebase authentication logic.

HTML and CSS Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            width: 300px;
            padding: 20px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 10px;
            background: white;
        }

        input {
            width: 90%;
            margin: 5px 0;
            padding: 8px;
        }

        button {
            width: 100%;
            padding: 8px;
            margin-top: 10px;
            cursor: pointer;
        }

        .google-button {
            background-color: #4285F4;
            color: white;
            border: none;
            padding: 10px;
            font-weight: bold;
        }

        .error-message {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h2>Login</h2>
        <p id="error-message" class="error-message"></p>

        <input type="email" id="email" placeholder="Enter your email">
        <input type="password" id="password" placeholder="Enter your password">

        <button onclick="login()">Login</button>
        <button onclick="signUp()">Sign Up</button>

        <hr>

        <button class="google-button" onclick="loginWithGoogle()">Continue with Google</button>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.5.0/firebase-app.js";
        import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/11.5.0/firebase-auth.js";

        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
            appId: "YOUR_APP_ID"
        };

        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const provider = new GoogleAuthProvider();

        window.login = function () {
            const email = document.getElementById("email").value;
            const password = document.getElementById("password").value;
            const errorMessage = document.getElementById("error-message");

            signInWithEmailAndPassword(auth, email, password)
                .then(() => {
                    alert("Logged in successfully!");
                })
                .catch(error => {
                    errorMessage.textContent = error.message;
                });
        };

        window.signUp = function () {
            const email = document.getElementById("email").value;
            const password = document.getElementById("password").value;
            const errorMessage = document.getElementById("error-message");

            createUserWithEmailAndPassword(auth, email, password)
                .then(() => {
                    alert("Account created successfully!");
                })
                .catch(error => {
                    errorMessage.textContent = error.message;
                });
        };

        window.loginWithGoogle = function () {
            signInWithPopup(auth, provider)
                .then(() => {
                    alert("Logged in with Google!");
                })
                .catch(error => {
                    document.getElementById("error-message").textContent = error.message;
                });
        };
    </script>
</body>
</html>

Code Explanation

Firebase Setup: Firebase is initialized with project credentials.
Email/Password Login: Allows users to log in with their email and password.
Sign-Up Functionality: New users can create an account.
Google Sign-In: Uses Firebase Authentication to sign in via Google.
Error Handling: Displays relevant error messages for authentication failures.

Expected Output

1. Login Page

2. Successful Login

3. Google Sign-In

after enter the email and password click singup the data is added in firebase users after click its popup showing you created the account after again click the login button its showing shown in step 2 image the data in firebase is shown below

Conclusion

In this guide, we built a simple authentication system using Firebase Authentication with Email/Password login and Google Sign-In. Firebase makes it easy to implement secure authentication with minimal code.

Try integrating Firebase authentication into your web projects today!

Search This Blog

Vinayhac