• User authentication app using Angular and google Firebase.
• Note: to open web links in a new window use: ctrl+click on link

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

• This is just for development, not production, so the whole firebase module is used.

.

• Angular v15
• Firebase v9
• Reactive Extensions for Javascript -RxJS v7 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

• Install dependencies with npm i
• Create google firebase project with Sign-in provider as Google and paste access keys from Project Settings into environment.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

• 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();
  }
}

• user login using google id or password, can be viewed on Firebase Console.
• User privileges can be revoked from the Firebase console.

• Status: Working
• To-Do: add theme colors and functionality. A bootstrap button would be better.

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

• This project is licensed under the terms of the MIT license.

• Repo created by ABateman, email: [email protected]