faridkhouda/angular-firebase-auth-service

:clipboard: Firebase user authentication service, tutorial from Stephen Fluin, Demos with Angular

⚡ Angular Firebase Auth Service

Builds a user authentication app using Angular 11 and google Firebase.

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• ⚡ Angular Firebase Auth Service
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 General info

• Firebase Real-time database used, rules set to test:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

• This is just for development, not production, so the whole firebase module is used. This error is shown in the dev tools console: When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

📷 Screenshots

.

📶 Technologies

• Angular v11
• Firebase v8
• Reactive Extensions for Javascript -RxJS v6 library used for reactive programming using the observable type.
• RxJS SwitchMap On each emission the previous inner observable is cancelled and the new observable is subscribed; switch to a new observable. Only one subscription at a time - seems ideal for login applications

💾 Setup

• Install dependencies with npm i
• Create google firebase project and paste access keys into app.module.ts
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files

💻 Code Examples

• user.service file

@Injectable({
  providedIn: 'root'
})
export class UserService {
  uid = this.afAuth.authState.pipe(
    map(authState => {
      if (!authState) {
        return null;
      } else {
        return authState.uid;
      }
    })
  );
  //test to see if already logged in
  isAdmin: Observable<boolean> = this.uid.pipe(
    switchMap(uid => {
      if (!uid) {
        return observableOf(false);
      } else {
        return this.db.object<boolean>('/admin/' +uid).valueChanges();
      }
    })
  );
  //test to see if user has specific permissions
  constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) { }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

🆒 Features

• user login using google id or password, can be viewed on Firebase Console.
• User privileges can be revoked from the Firebase console.
• Updated to latest Angular v10 and all dependencies are the latest versions with no conflicts.

📋 Status & To-Do List

• Status: Updated and working app with a successful login storing login details in the firebase database.
• To-Do: add theme colors and functionality. A bootstrap button would be better.

👏 Inspiration

• Demos With Angular: Building A User Authentication Service with Angular and Firebase.

✉️ Contact

Repo created by ABateman - feel free to contact me!