auth tokens requirement added

Author: AndrewJBateman

README.md

@@ -92,6 +92,9 @@ private getGoogleMaps(): Promise<any> {
 * [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial) map-modal added to new-offer page. Clicking on 'SELECT LOCATION' will open Google Maps at a fixed location. Address of place extracted from Google Maps data and stored in Places database.
 * [Capacitor Geolocation API](https://capacitor.ionicframework.com/docs/apis/geolocation) used to provide current location.
 * [Capacitor Camera API](https://capacitor.ionicframework.com/docs/apis/camera) used to provide camera functionality.
+* [Firebase Auth API](https://firebase.google.com/docs/reference/rest/auth) used to control access to app.
+* [Cordova Local Storage](https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html#localstorage) to save user user authentication token so a refresh etc. does not lose a user's settings.
+* Auth tokens on the backend.
 
 ## Status & To-do list
 

functions/index.js

@@ -17,6 +17,14 @@ exports.storeImage = functions.https.onRequest((req, res) => {
     if (req.method !== 'POST') {
       return res.status(500).json({ message: 'Not allowed.' });
     }
+
+    if (!req.headers.authorizaton || !req.headers.authorizaton.startsWith('Bear ')) {
+      return res.status(401).json({ error: 'Unauthorized' });
+    }
+
+    let idToken;
+    idToken = req.headers.authorization.split('Bearer ')[1];
+
     const busboy = new Busboy({ headers: req.headers });
     let uploadData;
     let oldImagePath;
@@ -38,20 +46,24 @@ exports.storeImage = functions.https.onRequest((req, res) => {
         imagePath = oldImagePath;
       }
 
-      console.log(uploadData.type);
-      return storage
-        .bucket('ionic-angular-project-a9d42.appspot.com')
-        .upload(uploadData.filePath, {
-          uploadType: 'media',
-          destination: imagePath,
-          metadata: {
-            metadata: {
-              contentType: uploadData.type,
-              firebaseStorageDownloadTokens: id
-            }
-          }
+      return fbAdmin
+        .auth()
+        .verifyIdToken(idToken)
+        .then(decodedToken => {
+          console.log(uploadData.type);
+          return storage
+            .bucket('ionic-angular-project-a9d42.appspot.com')
+            .upload(uploadData.filePath, {
+              uploadType: 'media',
+              destination: imagePath,
+              metadata: {
+                metadata: {
+                  contentType: uploadData.type,
+                  firebaseStorageDownloadTokens: id
+                }
+              }
+            })
         })
-
         .then(() => {
           return res.status(201).json({
             imageUrl:

src/app/app.component.ts

@@ -1,18 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Platform } from '@ionic/angular';
 import { Plugins, Capacitor } from '@capacitor/core';
 
 import { Router } from '@angular/router';
 
 import { AuthService } from './auth/auth.service';
+import { Subscription } from 'rxjs';
 
 
 @Component({
 	selector: 'app-root',
 	templateUrl: 'app.component.html',
 	styleUrls: ['app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
+	private authSub: Subscription;
+	private previousAuthState = false;
+
 	constructor(
 		private platform: Platform,
 		private authService: AuthService,
@@ -29,9 +33,23 @@ export class AppComponent {
 		});
 	}
 
+	ngOnInit() {
+		this.authSub = this.authService.userIsAuthenticated.subscribe(isAuth => {
+			if (!isAuth && this.previousAuthState !== isAuth) {
+				this.router.navigateByUrl('/auth');
+			}
+			this.previousAuthState = isAuth;
+		});
+	}
+
 	onLogout() {
 		this.authService.logout();
-		this.router.navigateByUrl('/auth');
+	}
+
+	ngOnDestroy() {
+		if (this.authSub) {
+			this.authSub.unsubscribe();
+		}
 	}
 
 }

src/app/auth/auth.guard.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { AuthService } from './auth.service';
+import { take, tap, switchMap } from 'rxjs/operators';
 
 @Injectable({
 	providedIn: 'root'
@@ -14,9 +15,20 @@ export class AuthGuard implements CanLoad {
 		route: Route,
 		segments: UrlSegment[]
 	): Observable<boolean> | Promise<boolean> | boolean {
-		if (!this.authService.userIsAuthenticated) {
-			this.router.navigateByUrl('/auth');
-		}
-		return this.authService.userIsAuthenticated;
+		return this.authService.userIsAuthenticated.pipe(
+			take(1),
+			switchMap(isAuthenticated => {
+				if (!isAuthenticated) {
+					return this.authService.autoLogin();
+				} else {
+					return of(isAuthenticated);
+				}
+			}),
+			tap(isAuthenticated => {
+				if (!isAuthenticated) {
+				this.router.navigateByUrl('/auth');
+			}
+			})
+		);
 	}
 }

src/app/auth/auth.page.html

@@ -70,10 +70,9 @@
           <ion-button
             type="submit"
             color="primary"
-            (click)="onLogin()"
 						expand="block"
 						[disabled]="!f.valid">
-							Login
+              {{ isLogin ? 'Login' : 'Signup' }}
           </ion-button>
         </ion-col>
       </ion-row>

src/app/auth/auth.page.ts

@@ -1,9 +1,12 @@
+import { Observable } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgForm } from '@angular/forms';
-import { LoadingController } from '@ionic/angular';
+import { LoadingController, AlertController } from '@ionic/angular';
+
+import { AuthService, AuthResponseData } from './auth.service';
+
 
-import { AuthService } from './auth.service';
 @Component({
 	selector: 'app-auth',
 	templateUrl: './auth.page.html',
@@ -16,24 +19,45 @@ export class AuthPage implements OnInit {
 	constructor(
 		private authService: AuthService,
 		private router: Router,
-		private loadingCtrl: LoadingController
+		private loadingCtrl: LoadingController,
+		private alertCtrl: AlertController
 	) { }
 
 	ngOnInit() {
 	}
 
-	onLogin() {
+	authenticate(email: string, password: string) {
 		this.isLoading = true;
-		this.authService.login();
 		this.loadingCtrl
-			.create({keyboardClose: true, message: 'Logging in...'})
+			.create({ keyboardClose: true, message: 'Logging in...' })
 			.then(loadingEl => {
 				loadingEl.present(); // mask over screen while loading
-				setTimeout(() => {
-					this.isLoading = false;
-					loadingEl.dismiss();
-					this.router.navigateByUrl('/places/tabs/discover');
-				}, 1500);
+				let authObs: Observable<AuthResponseData>;
+				if (this.isLogin) {
+					authObs = this.authService.login(email, password);
+				} else {
+					authObs = this.authService.signup(email, password);
+				}
+				authObs.subscribe(
+					resData => {
+						this.isLoading = false;
+						loadingEl.dismiss();
+						this.router.navigateByUrl('/places/tabs/discover');
+					},
+					errRes => {
+						loadingEl.dismiss();
+						const code = errRes.error.error.message;
+						let message = 'Could not sign you up, try again';
+						if (code === 'EMAIL_EXISTS') {
+							message = 'This email address already exists';
+						} else if (code === 'EMAIL_NOT_FOUND') {
+							message = 'email address could not be found';
+						} else if (code === 'INVALID_PASSWORD') {
+							message = 'This password is not correct';
+						}
+						this.showAlert(message);
+					}
+				);
 			});
 	}
 
@@ -48,13 +72,18 @@ export class AuthPage implements OnInit {
 		}
 		const email = form.value.email;
 		const password = form.value.password;
-		console.log(email, password);
 
-		if (this.isLogin) {
-			// send request to login server
-		} else {
-			// send request to signup server
-		}
+		this.authenticate(email, password);
+		form.reset();
 	}
 
+	private showAlert(message: string) {
+		this.alertCtrl
+			.create({
+				header: 'Authentication failed',
+				message,
+				buttons: ['OK']
+			})
+			.then(alertEl => alertEl.present());
+	}
 }