🔐 Angular Firebase Auth

---

📑 Table of Contents

• 🔐 Angular Firebase Auth

  • 🌐 Live Demo
  • 📖 Description
  • ⚙️ System Requirements
  • 🚀 Project Installation
  • 🔥 Firebase Configuration
  • ▶️ Run the Project
  • 🧠 Project Architecture
  • ✨ Features
  • 🛠 Technologies Used
  • 📁 Project Structure
  • 🔥 Best Practices Implemented
  • 🎯 Project Goal
  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/angular-firebase-auth/

---

📖 Description

Note

An Angular 16 application that implements a complete authentication workflow using Firebase Authentication and AngularFire.

The project demonstrates user registration, login, password recovery, email verification, protected areas, centralized Firebase error handling, loading states, and modern Angular development practices.

---

⚙️ System Requirements

Before running the project, make sure you have installed:

• 📦 Node.js: v16.14.x – v18.x (recommended: v18.10.0 LTS)
• 📦 npm: v8+
• 🅰️ Angular CLI: v16.x
• 🔥 Firebase Project

Recommended using nvm

nvm install 18
nvm use 18

---

🔍 Verify Installed Versions

Run the following commands in your terminal:

node -v
npm -v
ng version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone git@github.com:alobuuls/angular-firebase-auth.git

cd angular-firebase-auth

2️⃣ Install dependencies

npm install

---

🔥 Firebase Configuration

Create or update:

src/app/environments/environments.ts

Add your Firebase configuration:

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
  },
};

Enable the following provider:

• Email / Password Authentication

From:

Firebase Console
→ Authentication
→ Sign-in method

---

▶️ Run the Project

Start the development server:

ng serve

Then open:

http://localhost:4200

---

🧠 Project Architecture

The application follows a component-based architecture with centralized Firebase error management and authentication workflows.

🔥 Authentication Components

Responsible for:

• User registration
• User login
• Password recovery
• Email verification
• User interaction flows

⚙️ Firebase Error Service

Responsible for:

• Firebase error translation
• Error message centralization
• User-friendly notifications

⏳ Shared Loading Component

Responsible for:

• Loading state visualization
• Reusable spinner implementation
• User feedback during requests

🏠 Dashboard Component

Responsible for:

• Authenticated user area
• Protected content
• Session management

---

✨ Features

• 🔑 User Login
• 📝 User Registration
• 📧 Email Verification
• 🔄 Password Recovery
• 🚪 Logout Functionality
• 🔥 Firebase Authentication Integration
• ⚙️ Firebase Error Handling
• ⏳ Loading States
• 📋 Reactive Forms
• ✅ Angular Form Validations
• 🔔 Toastr Notifications
• 🚀 AngularFire Integration

---

🛠 Technologies Used

Technology	Purpose
Angular 16	Front-End Framework
TypeScript	Application Logic
Firebase Authentication	User Authentication
AngularFire	Firebase Integration
Reactive Forms	Form Management
Angular Router	Navigation
ngx-toastr	Notifications
RxJS	Reactive Programming

---

📁 Project Structure

angular-firebase-auth/

├── src/
│
├── app/
│   ├── components/
│   │   ├── login/
│   │   ├── register/
│   │   ├── password-recover/
│   │   ├── verify-email/
│   │   └── dashboard/
│   │
│   ├── services/
│   │   └── firebase-code-error.service.ts
│   │
│   ├── shared-loading/
│   │   ├── shared-loading.component.ts
│   │   └── shared-loading.component.html
│   │
│   ├── utils/
│   │   └── firebase-code-error.ts
│   │
│   ├── environments/
│   │   ├── environments.ts
│   │   └── environments.prod.ts
│   │
│   ├── app-routing.module.ts
│   ├── app.component.ts
│   └── app.module.ts
│
├── firebase.json
├── angular.json
├── package.json
└── README.md

---

🔥 Best Practices Implemented

• Reactive Forms
• Separation of Concerns
• Centralized Error Handling
• Reusable Components
• Service-based Architecture
• Environment Configuration
• Loading State Management
• Strong Typing with TypeScript
• Modular Project Structure
• Firebase Integration Best Practices

---

🎯 Project Goal

Practice and strengthen Angular authentication concepts through the implementation of a real-world Firebase Authentication workflow.

Key concepts covered:

• Firebase Authentication
• AngularFire
• Reactive Forms
• Password Recovery
• Email Verification
• Error Handling
• Loading States
• Notifications
• TypeScript Best Practices
• Front-End Architecture

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.