15.4 Signup and Refactor Authentication code

Author: webdevtut

src/app/auth/auth.page.html

@@ -34,8 +34,8 @@
           <!-- <div class="ion-text-center">
             <ion-spinner color="primary" *ngIf="isLoading"></ion-spinner>
           </div> -->
-          <ion-button type="button" color="primary" fill="clear" expand="block" (click)="onSwitchAuthMode()">Switch to {{ isLogin ? 'Signup' : 'Login'}}</ion-button>
-          <ion-button type="submit" color="primary" (click)="onLogin()" expand="block" [disabled]="!f.valid">Login</ion-button>
+          <ion-button type="button" color="primary" fill="clear" expand="block" (click)="isLogin = !isLogin">Switch to {{ isLogin ? 'Signup' : 'Login'}}</ion-button>
+          <ion-button type="submit" color="primary" expand="block" [disabled]="!f.valid">{{ isLogin ? 'Login' : 'Signup'}}</ion-button>
         </ion-col>
       </ion-row>
     </ion-grid>

src/app/auth/auth.page.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from './auth.service';
 import { Router } from '@angular/router';
-import { LoadingController } from '@ionic/angular';
+import { AlertController, LoadingController } from '@ionic/angular';
 import { NgForm } from '@angular/forms';
 
 @Component({
@@ -16,12 +16,13 @@ export class AuthPage implements OnInit {
   constructor(
     private authService: AuthService,
     private router: Router,
-    private loadingCtrl: LoadingController
+    private loadingCtrl: LoadingController,
+    private alrtCtrl: AlertController
   ) {}
 
   ngOnInit() {}
 
-  onLogin() {
+  authenticate(email: string, password: string) {
     this.isLoading = true;
     this.authService.login();
     this.loadingCtrl
@@ -31,33 +32,36 @@ export class AuthPage implements OnInit {
       })
       .then((loadingEl) => {
         loadingEl.present();
-        setTimeout(() => {
+        this.authService.signup(email, password).subscribe((resData) => {
           this.isLoading = false;
           loadingEl.dismiss();
           this.router.navigateByUrl('/places/tabs/discover');
-        }, 1500);
+        }, errRes => {
+          loadingEl.dismiss();
+          this.showAlert(errRes.error.error.message);
+        });
       });
   }
 
-  onSubmit(form: NgForm){
-    if(form.invalid){
+  onSubmit(form: NgForm) {
+    if (form.invalid) {
       return;
     }
     const email = form.value.email;
     const password = form.value.password;
 
-    console.log(email, password);
-    
-
-    if(!this.isLogin) {
-      // Send a request to login endpoint
-    }
-    else {
-      // Send a request to signup endpoint
-    }
+    this.authenticate(email, password);
   }
 
-  onSwitchAuthMode(){
-    this.isLogin = !this.isLogin;
+  private showAlert(message: string) {
+    this.alrtCtrl
+      .create({
+        header: 'Authentication Failed!',
+        message: message,
+        buttons: ['Okay'],
+      })
+      .then((alertEl) => {
+        alertEl.present();
+      });
   }
 }

src/app/auth/auth.service.ts

@@ -1,19 +1,38 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+interface AuthResponseData {
+  kind: string;
+  idToken: string;
+  email: string;
+  refreshToken: string;
+  localId:string;
+  expiresIn: string;
+  registered?: boolean;
+}
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AuthService {
-  private _userIsAuthenticated = true;
-  private _userId = 'abc';
+  private _userIsAuthenticated = false;
+  private _userId = null;
 
-get userIsAuthenticated() {
-  return this._userIsAuthenticated;
-}
-get userId() {
-  return this._userId;
-}
-  constructor() { }
+  get userIsAuthenticated() {
+    return this._userIsAuthenticated;
+  }
+  get userId() {
+    return this._userId;
+  }
+  constructor(private http: HttpClient) {}
+
+  signup(email: string, password: string) {
+    return this.http.post<AuthResponseData>(
+      `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${environment.firebaseAPIKey}`,
+      { email: email, password: password, returnSecureToken: true }
+    );
+  }
 
   login() {
     this._userIsAuthenticated = true;