Configuring Firebase in Loklak Search
In process of expanding features of loklak to provide support of twitter api to the users, it was a good idea to go with Firebase as the managing medium for logged in or authenticated users. After integration of Firebase into loklak, users will be able to authenticate themselves securely with Facebook, Google, and Twitter and get access to the results from Twitter api on loklak. In this blog post, I will be discussing the Firebase configuration process into loklak.
Setting up Firebase environment configuration
Without explicitly going into each single detail of the integration process which is already provided by Firebase and other mediums, I will jump on to the main key characteristics of configuring Firebase into Loklak. This step covers the configuration of Firebase environment parameters. Goto Firebase console and copy the project’s environment’s parameters for web app option and paste it into environments/environment.ts file inside the project as given below by replacing all ‘*’ with the required values.
export const environment = { production: true, firebase: { apiKey: ‘***’, authDomain: ‘***’, databaseURL: ‘***’, projectId: ‘***’, storageBucket: ‘***’, messagingSenderId: ‘***’ } };
Initialise the Firebase app
Next step would be to cover establish the Firebase app in app.module.ts by importing necessary packages as given below.
import { AngularFireModule } from ‘angularfire2’; import { AngularFirestoreModule } from ‘angularfire2/firestore’; import { AngularFireAuthModule } from ‘angularfire2/auth’; import { environment } from ‘../environments/environment’; ... imports: [ … AngularFireModule.initializeApp(environment.firebase, ‘loklak-search’), AngularFirestoreModule, AngularFireAuthModule ]
Creating Auth service with various Auth providers
This is the main part of the Firebase configuration. Create a new Auth service in ‘services/’, and include the given below methods for providing authentication using – Twitter, Facebook, Google, and Email & Password. We will also provide logout feature for the user to log out from the current service provider. Given below is an example of adding Google as the service provider for authentication, it can be similarly used to provider authentication for other providers.
import { Injectable } from ‘@angular/core’; import { AngularFireAuth } from ‘angularfire2/auth’; import { Observable } from ‘rxjs’; import * as firebase from ‘firebase/app’; @Injectable() export class AuthService { public authState: Observable<firebase.User>; constructor( private afAuth: AngularFireAuth ) { this.authState = this.afAuth.authState; } signInWithGoogle() { return this.afAuth.auth.signInWithPopup( new firebase.auth.GoogleAuthProvider() ); } logout() { this.afAuth.auth.signOut(); } }
We are using AngularFireAuth to provide authentication for every provider.
Using Auth service in the required component
This step would cover up the last portion to use the auth service to actually provide authenticated login. Now, import the created auth service and other packages and create a property of auth service and a user variable to keep check on the current user status (We would store the current status on the constructor call).
import { AuthService } from ‘./../services/auth.service’; import * as firebase from ‘firebase/app’; … public user: Observable<firebase.User>; constructor( private _eref: ElementRef, private afAuth: AuthService ) { this.user = this.afAuth.authState; }
Now, call the methods of auth service and storing the status of current user in the user property created above (For an example, calling only twitter auth and logout method).
signInWithTwitter() { this.afAuth.signInWithTwitter(); } logout() { this.afAuth.logout(); }
These methods could now be easily called inside (click) property of any appropriate html div/tag to provide login or logout feature.
Testing Auth Login
Click on the div/tag which is calling the SignIn methods and look onto the console for results.
Resources
- Firebase: Getting Started
- Firebase: Firebase Authentication Providers
- ITNEXT: Firebase Authentication
