o2-auth-fs

v0.1.4

Published

2 years ago

Angular4 Library for Firebase Authentication

Downloads

0High
0Medium
0Low

ohtsu

angular firebase authentication

o2-auth-fs Angular4 tool to authenticate users by Firebase through email, Google, Facebook, GitHub and Twitter login

o2-auth-fs is a tool library for authenticating users by Firebase service by Angular4.

Video Explanation https://youtu.be/

Overview

o2-auth-fs is a tool for using Firebase authentication service by using Angular4
Main functions
- Signup (using Firebase authentication service)
- Login
  - Email
  - Google
  - Facebook
  - Twitter
  - GitHub
- Logout

Prerequisite

Node.js
TypeScript2
Angular4
Firebase
bootstrap
font-awesome

Installation

To install this library, run:

$ npm install o2-auth-fs --save

Step by Step Installation for Angular-CLI

Install Angular-CLI

$ npm install -g @angular/cli

Create New Project

$ ng new demo-project (Your project name)
$ cd demo-project

Check Your Program

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

$ ng serve

First Page

Stop Local Server

Input Ctrl+C and y+Return to stop the local server.

Install o2-auth-fs

$ npm install o2-auth-fs --save

Install firebase

$ npm install firebase --save

Install bootstrap

$ npm install bootstrap --save

Modify .angular-cli.json

You will find .angular-cli.json in the project root directory. Add bootstrap.min.css as follows.


  "apps": [
    { 
      "styles": [
  // Add Start --------------------------------------------
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  // Add End --------------------------------------------
        "styles.css"
      ],
    }
  ],

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
projectId
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 --------------------------------------------
};

Modify app.module.ts

Change directory to "src/app".

$ cd src/app

You will find app.module.ts. Modify this file as follows. AppRoutingModule and CoreModule will be made later.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

  // Add Start --------------------------------------------
import { O2AuthFsModule　} from 'o2-auth-fs';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
  // Add End --------------------------------------------

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  // Add Start --------------------------------------------
    AppRoutingModule,
    CoreModule,
    O2AuthFsModule.forRoot()
  // Add End --------------------------------------------
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modify app.component.ts

In the same directory, you will find app.component.ts . In this file, modify as follows.

import { Component, OnInit  } from '@angular/core';
  // Add Start --------------------------------------------
import { environment } from './../environments/environment';
import * as firebase from 'firebase';
  // Add End --------------------------------------------

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app-root';
  // Add Start --------------------------------------------
  loadedFeature = 'home';
  ngOnInit() {
    firebase.initializeApp(environment.firebase);
  }
  onNavigate(feature: string) {
    this.loadedFeature = feature;
  }
  // Add End --------------------------------------------
}

Add app-routing.module.ts

You had better independent modules for future. So add app.routing.module.ts in the project root directory. You need add flat option as follows.

$ ng generate module app-routing --flat

Add Core Module

You maybe need home page and header. They had better be included in core module which is almost always resided. At first you need add core module as foloows.

$ ng generate module core

Add Header Component

Next add header component in core module as folows.

$ ng generate component core/header

Add Home Component

Next add home component in core module as folows.

$ ng generate component core/home

Version

o2-auth-fs : 0.1.3
Angular : 4.2.4
TypeScript : 2.3.3
@angular/cli : 1.3.2
bootstrap : 3.3.7
firebase : 4.4.0
font-awesome : 4.7.0

Reference

"Firebase Authentication", Google, https://firebase.google.com/docs/auth/?hl=en
"Create a Full Angular Authentication System with Firebase",2017/1/16, by Gary Simon https://coursetro.com/posts/code/32/Create-a-Full-Angular-Authentication-System-with-Firebase
"Angular アプリケーションプログラミング",2017/8/17,by 山田祥寛, https://www.amazon.co.jp/Angular%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B-ebook/dp/B074M54GM5/ref=sr_1_2?ie=UTF8&qid=1507088812&sr=8-2&keywords=angular+%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0
"Angular 4 (formerly Angular 2) - The Complete Guide",by Maximilian Schwarzmüller, udemy, https://www.udemy.com/the-complete-guide-to-angular-2/learn/v4/content
"The Complete Angular Course: Beginner to Advanced",by Mosh Hamedani, udemy, https://www.udemy.com/the-complete-angular-master-class/learn/v4/content
"Build Enterprise Applications with Angular 2 (and Angular 4)",by Mosh Hamedani, udemy, https://www.udemy.com/angular2-advanced/learn/v4/content
"Learn Angular 4 from Scratch",by Gary Simon, udemy, https://www.udemy.com/learn-angular-from-scratch/learn/v4/content

Change Log

2017.10.2 version 0.1 uploaded