LoginPage: Firebase auth UI

Auth UI built with https://github.com/firebase/firebaseui-web
 
Unit tests inspired by angular/angularfire#18 (comment)

angular.json

@@ -40,6 +40,9 @@
               },
               {
                 "input": "src/app/app.scss"
+              },
+              {
+                "input": "./node_modules/firebaseui/dist/firebaseui.css"
               }
             ],
             "scripts": [],

cypress/integration/login.spec.js

@@ -0,0 +1,38 @@
+/// <reference types="Cypress" />
+
+context('Home Page', () => {
+    beforeEach(() => {
+        cy.visit('/login')
+    });
+
+    it('should have title', () => {
+        cy.get('ion-title').should('contain', 'Login');
+    });
+
+    it('should have Google sign in button', () => {
+        let googleSignInButton = cy.get('.firebaseui-idp-google');
+        googleSignInButton.should('contain', 'Sign in with Google');
+        googleSignInButton.click();
+    });
+
+    it('should have email sign in button', () => {
+        let emailSignInButton = cy.get('.firebaseui-idp-password');
+        emailSignInButton.should('contain', 'Sign in with email');
+        emailSignInButton.click();
+
+        cy.get('.firebaseui-id-email').type('e2e@test.com');
+        cy.get('.firebaseui-id-submit').click();
+        cy.get('.firebaseui-id-password').type('cypress');
+        cy.get('.firebaseui-id-submit').click();
+
+        cy.url().should('eq', 'http://localhost:8100/home');
+    });
+
+    it('should have anonymous sign in button', () => {
+        let continueAsGuestButton = cy.get('.firebaseui-idp-anonymous');
+        continueAsGuestButton.should('contain', 'Continue as guest');
+        continueAsGuestButton.click();
+
+        cy.url().should('eq', 'http://localhost:8100/home');
+    });
+});

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { AngularFireModule } from '@angular/fire';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
@@ -20,7 +21,8 @@ import { environment } from 'src/environments/environment';
     BrowserModule,
     IonicModule.forRoot(),
     AppRoutingModule,
-    AngularFireModule.initializeApp(environment.firebase)
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireAuthModule
   ],
   providers: [
     StatusBar,

src/app/login/login.page.html

@@ -1,9 +1,9 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>login</ion-title>
+    <ion-title>Login</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content id="firebaseui-auth-container">
 
 </ion-content>

src/app/login/login.page.spec.ts

@@ -2,15 +2,26 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LoginPage } from './login.page';
+import { AngularFireAuth } from '@angular/fire/auth';
+import { environment } from 'src/environments/environment';
 
 describe('LoginPage', () => {
   let component: LoginPage;
   let fixture: ComponentFixture<LoginPage>;
 
+  const angularFireAuthStub = {
+    auth: {
+      app: {
+        options: environment.firebase
+      }
+    }
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ LoginPage ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [ { provide: AngularFireAuth, useValue: angularFireAuthStub } ]
     })
     .compileComponents();
   }));

src/app/login/login.page.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
+
+import * as firebase from 'firebase/app';
+import 'firebase/auth';
+
+import * as firebaseui from 'firebaseui';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +13,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginPage implements OnInit {
 
-  constructor() { }
+  constructor(private afAuth: AngularFireAuth) { }
 
   ngOnInit() {
+    // FirebaseUI config.
+    const uiConfig = {
+      signInSuccessUrl: '/home',
+      signInOptions: [
+        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+        firebase.auth.EmailAuthProvider.PROVIDER_ID,
+        firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
+      ]
+    };
+
+    // Initialize the FirebaseUI Widget using Firebase.
+    const ui = new firebaseui.auth.AuthUI(this.afAuth.auth);
+    // // The start method will wait until the DOM is loaded.
+    ui.start('#firebaseui-auth-container', uiConfig);
   }
 
 }