Firebase Authentication Starter Guide: Building a Secure Login System

Firebase Authentication Starter Guide – Build a Secure Login System
Introduction

This guide walks you through creating a complete authentication system using Firebase. We'll cover email/password login, signup, password reset, and user session management.

 The project includes:
- Login/Signup forms
- Password recovery
- Welcome dashboard
- Session persistence


Project Structure

auth-starter-master/
├── firebase.js          # Firebase configuration
├── index.css            # Styling for auth pages
├── index.html           # Login/Signup page
├── index.js             # Auth logic
├── welcome.html         # Dashboard after login
└── welcome.js           # Logout functionality


1. Firebase Configuration (firebase.js)

```javascript
const firebaseConfig = {
  apiKey: "Your Key",
  authDomain: "Your Auth Domain",
  projectId: "Your Id,
  storageBucket: "Your Storage Bucket,
  messagingSenderId: "Your Id,
  appId: "Your AppId",
  measurementId: "Your
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
```

2. Stylish Login Form (index.css)

```css
@import url('https://fonts.googleapis.com/css?family=Ubuntu:wght@700&display=swap');

body {
  background: #F8F8F8;
  font-family: 'Roboto', sans-serif;
}

.card {
  width: 400px;
  margin-top: 50px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-field {
  position: relative;
  margin: 20px 0;
}

.custom-field input {
  padding: 12px;
  width: 300px;
  border: 1.5px solid gray;
  border-radius: 3px;
  outline-color: deepskyblue;
}

.placeholder {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  transition: all 0.3s ease;
}

input:focus + .placeholder,
input:valid + .placeholder {
  top: 10px;
  font-size: 10px;
  color: #222;
  background: white;
  padding: 0 5px;
}

.message {
  font-size: 24px;
  color: steelblue;
}

.success {
  font-size: 18px;
  color: seagreen;
  margin: 15px 0;
}
```

3. Login/Signup Page (index.html)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Auth Demo</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.5.0/mdb.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="./index.css" rel="stylesheet">
</head>
<body class="d-flex justify-content-center p-5">
  <div class="card">
    <div class="card-header">
      <center><h3>Login Form</h3></center>
    </div>
    <form id="loginForm" class="card-body px-5 py-4">
      <center>
        <small><span id="error" style="color: red"></span></small>
      </center>
      <center>
        <label class="custom-field">
          <input id="email" type="email" class="input" required />
          <span class="placeholder">Email</span>
        </label>
        <br />
        <label class="custom-field">
          <input id="password" type="password" class="input" required />
          <span class="placeholder">Password</span>
        </label>
      </center>
      <br/><br/>
      <a href="#" onclick="forgotPass()">Forgot Password?</a>
      <center>
        <button type="submit" class="btn btn-primary">Login</button>
        <button type="button" onclick="signUp()" class="btn btn-secondary">Sign Up</button>
      </center>
    </form>
  </div>

  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
  <script src="firebase.js"></script>
  <script src="index.js"></script>
</body>
</html>
```

4. Authentication Logic (index.js)

```javascript
// Prevent form submission
document.getElementById("loginForm").addEventListener("submit", (event) => {
  event.preventDefault();
  login();
});

// Redirect if already logged in
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    location.replace("welcome.html");
  }
});

function login() {
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;
  
  firebase.auth().signInWithEmailAndPassword(email, password)
    .catch((error) => {
      document.getElementById("error").innerHTML = error.message;
    });
https://unhealthyirreparable.com/cit2c8ca?key=7566cfdb82de49ba4912160b26b7621f
}

function signUp() {
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;
  
  firebase.auth().createUserWithEmailAndPassword(email, password)
    .catch((error) => {
      document.getElementById("error").innerHTML = error.message;
    });
}

function forgotPass() {
  const email = document.getElementById("email").value;
  
  firebase.auth().sendPasswordResetEmail(email)
    .then(() => {
      alert("Password reset link sent to your email");
    })
    .catch((error) => {
      document.getElementById("error").innerHTML = error.message;
    });
}
```

5. Welcome Dashboard (welcome.html)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
  <link rel="stylesheet" href="./index.css">
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.5.0/mdb.min.css" rel="stylesheet">
</head>
<body>
  <center>
    <div style="margin:100px">
      <span id="user" class="message">Hello, User</span>
      <div class="success">
        <span>Welcome to Auth Starter! You're successfully logged in!</span>
      </div>
      <br/>
      <button class="btn btn-danger" onclick="logout()">Logout</button>
    </div>
  </center>

  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
  <script src="firebase.js"></script>
  <script src="welcome.js"></script>
</body>
</html>
```

6. Logout Functionality (welcome.js)

```javascript
// Check auth state
firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    location.replace("index.html");
  } else {
    document.getElementById("user").innerHTML = `Hello, ${user.email}`;
  }
});

// Logout function
function logout() {
  firebase.auth().signOut();
}
```

Key Features Implemented
1. Email/Password Authentication
   - Secure login/signup
   - Form validation
   - Error handling

2. Password Recovery
   - Reset link via email

3. Session Management
   - Persistent login state
   - Automatic redirection

4. Responsive UI
   - Clean material design
   - Animated form fields

Security Notes
- Always use HTTPS in production
- Enable email verification for signups
- Consider adding reCAPTCHA
- Set up Firebase Security Rules

This complete authentication system can be extended with:
- Social logins (Google, Facebook)
- Phone authentication
- Multi-factor auth
- User profile management


Comments

Post a Comment

Popular posts from this blog

How to Upload Your Local Project to GitHub Properly

Image
How to Upload Your Local Project to GitHub – Step-by-Step Guide  📂 How I Learned the Right Way to Upload a Project to GitHub (From My College Mistake) 🏫 The College Phase: Uploading Projects to GitHub… the Wrong Way When I was in college, like many students, I worked on small development projects — web apps, Java-based tools, and mini full-stack apps. Back then, seniors and recruiters would often ask: “Do you have a GitHub link for your projects?” So I did what most beginners do: I created a new repository on GitHub. Then, I clicked Upload Files . I dragged and dropped my entire project folder . And hit “Commit”. Done, right? Well... not exactly . ❌ Why That Was the Wrong Way At first glance, it looked fine — my code was there on GitHub. But: There was no commit history Git wasn’t tracking actual changes over time No .gitignore file — so unnecessary files were also uploaded If I cloned it somewhere else, setup was messy Worse, I coul...
Read more

YouTube Videos, Translation, AI Tools Aur Hindi Mein Dekhne Ka Experience

  YouTube Videos, Translation, AI Tools Aur Hindi Mein Dekhne Ka Experience  Introduction Aaj kal har koi YouTube pe videos dekhta hai—tutorials, funny clips, interviews, ya podcasts. Lekin jab content English mein ho aur aapko Hindi mein samajhna ho, toh kya options hain? Language barrier content enjoy karne mein bada hurdle ho sakta hai, especially jab video English mein ho aur aapko Hindi mein samajhna ho ya Hindi audio chahiye. Is blog mein hum yehi samjhenge ki aap English YouTube video ko Hindi mein kaise dekh sakte hain ya sun sakte hain, kaun-kaun se AI tools available hain, aur kya limitations hain real life usage mein. YouTube Video Dekhne Mein Language Problem YouTube duniya ka sabse bada video platform hai—yahan har topic, har language, har audience ke liye kuch na kuch available hai. Lekin jab: Video English ya kisi aur language mein ho https://unhealthyirreparable.com/cit2c8ca?key=7566cfdb82de49ba4912160b26b7621f User ko Hindi mein content ch...
Read more

How to Build a Telegram Bot Using Node.js – Step-by-Step Guide

Image
How to Build a Telegram Bot Using Node.js – Step-by-Step Guide   Creating your own Telegram bot is easier than you think. In this guide, I’ll walk you through the complete process — from setting up your bot with BotFather , writing the bot using Node.js , to deploying it live 24/7 using Render . username: tns_server_error_bot 🧭 Step 1: Create a Bot on Telegram Using BotFather Open Telegram app In the search bar, type: BotFather Start the chat and type /start Then type /newbot and follow the steps: Choose a name for your bot (e.g., TNS Server Bot ) Choose a username that must end with _bot (e.g., tns_server_error_bot ) Copy the HTTP API token that BotFather gives you — we’ll use this later in our .env file. 💻 Step 2: Set Up Y our Project in VS Code (or Cursor) Open your preferred IDE (I used Cursor but you can use VS Code) Create a new folder for your project: mkdir tns_server_error_bot cd tns_server_error_bot Initiali...
Read more