Create an Angular 2 CLI App with Firebase Social Authentication Facebook, Google, Github and Twitter
Wall Script
MailxEngine
Follow Me:
Monday, February 27, 2017

Create an Angular 2 CLI App with Firebase Social Authentication Facebook, Google, Github and Twitter

There is a lot of fun in building an AngularJS application and after you finish the application, for others to see your application you will need to deploy the project on some web server such as NodeJS, Amazon AWS, Heroku,etc,. But, this requires a long procedure for the deployment and sometimes it can even be expensive. Google provides free Firebase for deploying AngularJS projects. Firebase Hosting provides fast and secure static hosting for your web app. This Hosting also provides social login authentication and gives your project a subdomain for deploying. for Facebook, Google and Twitter.

Create RESTful API NodeJS Mysql


This tutorial explains how to create and deploy angular CLI(Angular-cli is a powerful tool which is already pre-configured, it comes with code generator and it is easy to use with set of cli commands.) app using Google material to Firebase, also explains how Firebase provides custom domain support and social login authentication. Take a quick look at the live demo.

Live Demo



Install Angular Command-line

Open your terminal or command prompt and execute the following command, this will install AngularCli globally. Before that you must setup your machine with latest Node.js software.
$ sudo npm install angular-cli -g

Create and Launch a Angular2 Project
Here ng new command will take care the project files. Use ng serve command to launch the application.
ng new angularFirebaseProject

cd angularFirebaseProject

ng serve

Project Launch
Angular Cli project default port is 4200. Open your browser and launch the URL http://localhost:4200



Get Started

This project requires login and home pages. Login page contains social login buttons and Home page for displaying user details line name, email etc.

Generate Login Component
ng generating command will help you to create login component files, this will update app.module.ts all of the dependencies.
ng generate component login-page

installing component
  create src/app/login-page/login-page.component.css
  create src/app/login-page/login-page.component.html
  create src/app/login-page/login-page.component.spec.ts
  create src/app/login-page/login-page.component.ts
  update src/app/app.module.ts

Generate Home Component
$ ng generate component home-page

You will find all of the generated files in src folder.
Create Angular Cli Components


Routing

We need to configure login and home pages with routing.

app.module.ts
Go to src/app/app.module.ts and import angular router module for url configurations.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { HomePageComponent } from './home-page/home-page.component';

const routes: Routes = [
{ path: 'home', component: HomePageComponent },
{ path: '', component: LoginPageComponent }
];

@NgModule({
declarations: [
    AppComponent,
    LoginPageComponent,
    HomePageComponent
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html
Modify application component file with router outlet. Now Login page works at http://localhost:4200 and Home page works at http://localhost:4200/home
<h1>My Project</h1>
<router-outlet></router-outlet>


Styling - Angular 2 Material Design

Lets do styling with angular material, execute following command to install angular material project.
$ npm install --save @angular/[email protected]

app.module.ts
Import angular material module in app.module.ts
import { MaterialModule } from '@angular/material';

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    MaterialModule.forRoot()
],

Create a folder SASS
Create a SASS folder in src for stying.
Create Angular Cli Components

angular-cli.json
Modify angular cli configuration file in following way.
"styles": [
    "styles.css"
],

to

"styles": [
    "styles.css",
    "./scss/styles.scss"
],

styles.scss
Include following code in styles.scss
@import '[email protected]/material/core/theming/all-theme';
@include md-core();
$primary: md-palette($md-blue);
$accent: md-palette($md-red);
$theme: md-light-theme($primary, $accent);
@include angular-material-theme($theme);

You can use following colors for your theming.
Create Angular Cli Material Colors

app.component.html
Now modify application component file with angular material tags.
<header>
  <md-toolbar color="primary">
    <span> 9lessons Firebase Social Login Project</span>
  </md-toolbar>
</header>

<div class="app-content">
  <md-card>
    <div class="app-content">
      <router-outlet></router-outlet>
    </div>
  </md-card>
</div>

<footer>
  <md-toolbar>
    Srinivas Tamada Production
  </md-toolbar>
</footer>

styles.scss
You can add custo
Other code
.....
.....
* {
  margin: 0px;
  padding: 0px
}

footer {
  bottom: 0 !important;
  position: fixed;
  width: 100%;
}

.app-content {
  padding: 20px;
  md-card {
    margin: 20px;
  }
}


Deploy to Firebase

First you need to create a project in Google Firebase, go to Google Firebase console and setup the project.
Create Firebase Project

Install Firebase Tools
Install Firebase tools globally.
$ sudo npm install -g firebase-tools

Configure Firebase
Now login Firebase with your Google account. This command will redirect to Google account login page.
$ firebase login

? Allow Firebase to collect anonymous CLI usage information? No

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxx

Waiting for authentication...

Success! Logged in as [email protected]

Initialize Firebase
Go to your angular2 project folder and execute following command.
$ firebase init

Create Angular Cli Firebase

Choose your firebase project by clicking down arrow.

Setup Distribution Folder
Default publishing directory is "public", replace this with "dist"
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
Wrote dist/index.html

i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...

Firebase initialization complete!

This process will create firebase.json initialization file.
Create Firebase Project


Production Build

Use this command to build the final build, this will generate dist folder with all required packages.
$ ng build -prod

Firebase Push
$ firebase deploy

Now launch your Google Firebase application URL.


Part 2: Angular Firebase Facebook, Google, Github and Twitter Login
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


8 comments:

  1. How to achieve same logic login and signup concept. Using database(MySQL) with firebase?

    ReplyDelete
  2. Thumbs Up to all Angular 2 Tutorials - and especially to this one

    ReplyDelete
  3. Thanks for this. How about if I need to modify my angular 2 app to be AOT compiled first?

    ReplyDelete
  4. Maybe I should research about this hosting, thanks for your information

    ReplyDelete

Make in India