• 🔐 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

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

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

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

nvm install 18
nvm use 18

Run the following commands in your terminal:

node -v
npm -v
ng version

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

cd angular-firebase-auth

npm install

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

Start the development server:

ng serve

Then open:

http://localhost:4200

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

Responsible for:

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

Responsible for:

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

Responsible for:

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

Responsible for:

• Authenticated user area
• Protected content
• Session management

• 🔑 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

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

• 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

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

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.