How to Create a Full Login and Signup Page Using Firebase (Step-by-Step Guide)
In today's digital world, having a secure and easy-to-use login and signup system is essential for any web app. In this blog, I’ll guide you through how to create a full login and signup page using Firebase Authentication with HTML, CSS, and JavaScript.
Let’s dive right in!
🔥 What is Firebase Authentication?
Firebase Authentication provides backend services to help you easily authenticate users with passwords, phone numbers, Google, Facebook, and more — without building your own authentication backend.
We’ll use Email/Password Authentication today.
🛠 What You Need
- A Google Account (for Firebase)
- Basic knowledge of HTML, CSS, and JavaScript
- A text editor (like VS Code)
- Internet connection
1️⃣ Create a Firebase Project
- Go to Firebase Console.
- Click Add Project → Name your project → Continue.
- Disable Google Analytics (for now) → Create Project.
- After project creation, go to Build → Authentication → Get Started.
- Enable the Email/Password sign-in method.
2️⃣ Add Firebase SDK to Your Project
Create a basic HTML file (index.html) and include the Firebase scripts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login and Signup</title>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-auth-compat.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="form-container">
<h2 id="form-title">Login</h2>
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button id="submitBtn">Login</button>
<p id="toggleText">Don't have an account? <a href="#" id="toggleLink">Sign up</a></p>
</div>
<script src="firebase-config.js"></script>
<script src="auth.js"></script>
</body>
</html>
3️⃣ Create Firebase Configuration File
Create a file called firebase-config.js:
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
👉 Replace YOUR_API_KEY, YOUR_PROJECT_ID, etc., with your real Firebase project settings.
4️⃣ Create the Authentication Logic
Create a new file auth.js:
const auth = firebase.auth();
const submitBtn = document.getElementById('submitBtn');
const toggleLink = document.getElementById('toggleLink');
const formTitle = document.getElementById('form-title');
const toggleText = document.getElementById('toggleText');
let isLogin = true;
// Toggle between Login and Signup
toggleLink.addEventListener('click', () => {
isLogin = !isLogin;
formTitle.innerText = isLogin ? 'Login' : 'Sign Up';
submitBtn.innerText = isLogin ? 'Login' : 'Sign Up';
toggleText.innerHTML = isLogin ?
"Don't have an account? <a href='#' id='toggleLink'>Sign up</a>" :
"Already have an account? <a href='#' id='toggleLink'>Login</a>";
});
// Handle Submit
submitBtn.addEventListener('click', () => {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (isLogin) {
auth.signInWithEmailAndPassword(email, password)
.then(userCredential => {
alert('Login Successful!');
console.log(userCredential.user);
})
.catch(error => {
alert(error.message);
});
} else {
auth.createUserWithEmailAndPassword(email, password)
.then(userCredential => {
alert('Signup Successful!');
console.log(userCredential.user);
})
.catch(error => {
alert(error.message);
});
}
});
5️⃣ Add Basic CSS Styling
Create a style.css file:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
#form-container {
background: white;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#form-container h2 {
margin-bottom: 20px;
}
#form-container input {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
#submitBtn {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
}
#submitBtn:hover {
background-color: #0056b3;
}
#toggleText {
margin-top: 15px;
font-size: 14px;
}
#toggleText a {
color: #007bff;
text-decoration: none;
}
🎯 Final Result
✅ Full Login and Signup page created using Firebase Authentication!
✅ It is secure, lightweight, and mobile-friendly.
✅ Easily expandable for features like forgot password, email verification, etc.
🌟 Bonus Tip
You can redirect users to a dashboard after login like this:
.then(() => {
window.location.href = "dashboard.html";
})
You can add a logout button too:
auth.signOut().then(() => {
alert('Logged out!');
});
✨ Conclusion
Creating a login and signup page with Firebase is super easy and efficient. Firebase handles all the heavy lifting — you just focus on making a great user experience!
If you found this blog helpful, don't forget to share it with your friends. 🚀
