Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Service for Angular4 + Firebase Authentication
import { Injectable } from '@angular/core';
import { AngularFireAuth, AngularFireDatabase, FirebaseAuthState, AuthProviders, AuthMethods, AngularFire } from "angularfire2";
import { Router } from "@angular/router";
import * as firebase from 'firebase';
@Injectable()
export class AuthService {
authState: FirebaseAuthState = null;
constructor(private af: AngularFire,
private db: AngularFireDatabase,
private router:Router) {
af.auth.subscribe((auth) => {
this.authState = auth;
});
}
// Returns true if user is logged in
get authenticated(): boolean {
return this.authState !== null;
}
// Returns current user
get currentUser(): any {
return this.authenticated ? this.authState.auth : null;
}
// Returns current user UID
get currentUserId(): string {
return this.authenticated ? this.authState.uid : '';
}
// Anonymous User
get currentUserAnonymous(): boolean {
return this.authenticated ? this.authState.anonymous : false
}
//// Social Auth ////
githubLogin(): firebase.Promise<FirebaseAuthState> {
return this.socialSignIn(AuthProviders.Github);
}
googleLogin(): firebase.Promise<FirebaseAuthState> {
return this.socialSignIn(AuthProviders.Google);
}
facebookLogin(): firebase.Promise<FirebaseAuthState> {
return this.socialSignIn(AuthProviders.Facebook);
}
twitterLogin(): firebase.Promise<FirebaseAuthState> {
return this.socialSignIn(AuthProviders.Twitter);
}
private socialSignIn(provider: number): firebase.Promise<FirebaseAuthState> {
return this.af.auth.login({provider, method: AuthMethods.Popup})
.then(() => this.updateUserData() )
.catch(error => console.log(error));
}
//// Anonymous Auth ////
anonymousLogin() {
return this.af.auth.login({
provider: AuthProviders.Anonymous,
method: AuthMethods.Anonymous,
})
.then(() => this.updateUserData())
.catch(error => console.log(error));
}
//// Email/Password Auth ////
emailSignUp(email: string, password: string): firebase.Promise<FirebaseAuthState> {
return this.af.auth.createUser({
email: email,
password: password,
})
.then(() => this.updateUserData())
.catch(error => console.log(error));
}
emailLogin(email: string, password: string): firebase.Promise<FirebaseAuthState> {
return this.af.auth.login({ email, password },
{ provider: AuthProviders.Password,
method: AuthMethods.Password
})
.then(() => this.updateUserData())
.catch(error => console.log(error));
}
//// Sign Out ////
signOut(): void {
this.af.auth.logout();
this.router.navigate(['/'])
}
//// Helpers ////
private updateUserData(): void {
// Writes user name and email to realtime db
// useful if your app displays information about users or for admin features
let path = `users/${this.currentUserId}`; // Endpoint on firebase
let data = {
name: this.currentUser.displayName,
email: this.currentUser.email,
}
this.db.object(path).update(data)
.catch(error => console.log(error));
}
@zsiyaji

This comment has been minimized.

Copy link

@zsiyaji zsiyaji commented Aug 18, 2018

I attempted to follow the video and found that the imports no longer works. I have referenced: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md#removing-angularfire-for-modularity to update the imports but I am still having trouble compiling this code. Any idea what the solution is?

@galki

This comment has been minimized.

Copy link

@galki galki commented Nov 27, 2018

@zsiyaji this seems to be old code because the packages have been updated and its now @angular/fire instead of angularfire2

@andremarcondesteixeira

This comment has been minimized.

Copy link

@andremarcondesteixeira andremarcondesteixeira commented Jan 8, 2020

Front-end libraries in general should worry more about backwards compatibility

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment