@anli/login v2.0.1

Ionic Module Login

Installation

npm install @anli/login --save

// https://ionicframework.com/docs/native/google-plus/
ionic cordova plugin add cordova-plugin-googleplus
npm install @ionic-native/google-plus --save
npm install firebase --save
npm install @ngrx/store@5 --save
npm install @ngrx/effects@5 --save
npm install @ngrx/entity@5 --save
npm install @ngrx/store-devtools@5 --save-dev

Update .gitignore:

src/environments/environment.ts
build.json
android.keystore

Update src\environments\environment.ts:

export const environment = {
  production: false,
  googlePlus: {
    webClientId: '',
  },
  firebase: {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }
}

Obtain webClienId from Google Cloud Platform

Update build.json:

{
  "android": {
    "release": {
        "keystore": "android.keystore",
        "storePassword": "android",
        "alias": "android",
        "password" : "android",
        "keystoreType": "JKS"
    },
    "debug": {
      "keystore": "android.keystore",
      "storePassword": "android",
      "alias": "android",
      "password" : "android",
      "keystoreType": "JKS"
    }
  }
}

Copy android.keystore

Update config.xml:

<widget id="com.euqol.ionicModuleLogin"

Update src/app/app.module.ts:

import * as firebase from 'firebase/app';
import { LoginModule } from '@anli/login';

firebase.initializeApp(environment.firebase);

@NgModule({
  imports: [
    EffectsModule.forRoot([]),
    StoreModule.forRoot({ }),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
    LoginModule.forRoot({ googlePlus: environment.googlePlus }),

Usage

Update html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  {{ user$ | async | json }}

  <button ion-button
    (click)="login()">
    Login
  </button>
  <button ion-button
    (click)="logout()">
    Logout
  </button>

  {{ message | json }}
</ion-content>

Update ts:

import { Store } from '@ngrx/store';
import { Login, Logout, selectError, selectUser } from '@anli/login';
...
export class HomePage {
  ...

  constructor(
    public navCtrl: NavController,
    public store: Store<any>,
    public toastCtrl: ToastController,
  ) {
    this.user$ = this.store.select(selectUser);
  }

  login(): void {
    this.store.dispatch(new Login());
    this.store.select(selectError).pipe(
      filter(res => res),
      first(),
    )
    .subscribe(({ response }) => {
      this.toastCtrl.create({ message: response, duration: 3000 })
      .present();
    });
    
  }

  logout(): void {
    this.store.dispatch(new Logout());
    this.store.select(selectError).pipe(
      filter(res => res),
      first(),
    )
    .subscribe(({ response }) => {
      this.toastCtrl.create({ message: response, duration: 3000 })
      .present();
    });    
  }