Skip to content

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

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-firebase-auth-service

Repository files navigation

⚡ Angular Firebase Auth Service

  • User authentication app using Angular and google Firebase.
  • 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

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

📷 Screenshots

Example screenshot.

📶 Technologies

💾 Setup

  • 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

💻 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.

📋 Status & To-Do List

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

👏 Inspiration

📁 License

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

✉️ Contact