Skip to content

📋 Angular app to access Firestore database using latest Firebase login code

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-firebase-dashboard

Repository files navigation

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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

Frontend screenshot

📶 Technologies

💾 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

📁 License

  • N/A

✉️ Contact