Angular Firebase Dashboard

• Angular app with Firebase Authentication that displays a dashboard with login, logout, forgot-password etc. buttons & routing
• User details stored in a Cloud Firestore database
• Tutorial code from D-I-Ry with some modifications - see 👏 Inspiration below
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• Angular Firebase Dashboard
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples - by D-I-Ry with some modifications
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Firebase authentication used to identify user
• This is not a practical auth. dashboard - too many buttons displayed. I had to modify the code not to display login and logout button together, for example.

📷 Screenshots

📶 Technologies

• Angular v14
• rxjs v7 Reactive Extensions Library for JavaScript
• firebase v9 backend
• @angular/fire v7 Angular library for Firebase.

💾 Setup

• Create project in Firebase console then add email authentication.
• npm i to install dependencies
• npm prune to remove unused npm modules
• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• ng update to update Angular

💻 Code Examples - by D-I-Ry with some modifications

• login function that signs in user with details from html form

  loginUser(email: string, password: string): Promise<any> {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        console.log('Auth Service: loginUser: success');
        this.router.navigate(['/dashboard']);
      })
      .catch((error) => {
        console.log('Auth Service: login error code', error.code, error);
        if (error.code) return { isValid: false, message: error.message };
        return { isValid: true, message: 'no errors :-)' };
      });
  }

🆒 Features

• 'Verify email' actually works and sends an email to the user with a link to click on. Refresh required to change boolean state on screen. Firebase backend code does make things easier.

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• D-I-Ry: Angular & Firebase dashboard in 22 minutes

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com