O2-auth-fb-service NPM

o2-auth-fb-service Authentication Service by Firebase for Angular5

o2-auth-fb-service is a library for authenticating users by Firebase service by Angular5.

Video Explanation https://youtu.be/WdaarC4sOg8

Overview

o2-auth-fb-service is a tool for using Firebase authentication service by using Angular5

Main functions

Signup (using Firebase authentication service)
Login - Email - Google - Facebook - Twitter - GitHub
Logout

Prerequisite

Node.js
TypeScript2
Angular5
Firebase
AngularFire2

Installation

To install this library, run:

$ npm install o2-auth-fb-service --save

Step by Step Installation of a demo program based on Angular/CLI

Install Demo Program

Make your some directory for testing and change into the directory.

$ md test
$ cd test

Next run git clone like this.

$ git clone https://github.com/Ohtsu/o2-auth-fb-service-demo.git 
$ cd o2-auth-fb-service-demo 
$ npm install

Get Firebase config data

Of course you need to have Firebase account and your own project. If you don't have the account, visit the following page in advance and make your own project.

https://www.firebase.com/login/

You need to get Firebase config data from your own project page. This url is as follows.

https://console.firebase.google.com/project/your-project-name/overview

You need the following parameters

apiKey
authDomain
databaseURL
storageBucket
messagingSenderId

In "Overview" page, click Web Application icon.

Then those parameters above will be shown. Copy them.

Modify environment.ts

Change directory to "src/app/environments".

$ cd src/app/environments

You will find environment.ts and environment.prod.ts. Modify these files as follows. In firebaseConfig, paste the data above.

export const environment = {
  production: true,
  // Add Start --------------------------------------------
  firebase: {
    apiKey: '"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxxxxxxx.firebaseapp.com',
    databaseURL: 'https://xxxxxxxxxxxxxxxxxx.firebaseio.com',
    projectId: 'xxxxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxxxx.appspot.com',
    messagingSenderId: 'xxxxxxxxxxxxxxxxxxxxx'
  }
  // Add End --------------------------------------------
};

Add Login method in Firebase

If you want to use the 3rd party authentications such as Google, Facebook, Twitter and GitHub, you need add login methods in Firebase Authentication page. Set the target login method enable in the status.

Start demo program

If you start local server as follows, you can get the home page in your browser by accessing http://localhost:4200.

$ ng serve

Try change the page by accessing by accessing http://localhost:4200/signup. You will find the following page.

Next change the page by accessing by accessing http://localhost:4200/signin. You will find the following page.

In this page, open the developer tool (type control + shift + i in Chrome) and select Console tab. If you have not logged in yet, you will find is Authenticated ---- false.

Try to click Login Google button (Of course you need to enable Google login method), you will find Google Login Popup Window.

If you succeed in the authentication, you will find the messages such as is Authenticated ---- true, token ---, user --- and so on.