Menggunakan Authentication Pada Project Buku Resep – 6

Pada modul ini kita akan implementasikan login. Buka file auth.service.ts, tambahkan method login dengan code seperti dibawah.

Untuk dokumentasi login lihat di https://firebase.google.com/docs/reference/rest/auth#section-sign-in-email-password

Disana akan dijelaskan URL endpoint untuk login, request yang harus dikirim serta response yang akan dikembalikan.

Perhatikan: pada code dimodifikasi dalam melakukan error handling karena dapat digunakan baik saat signin maupun signup.

import {Injectable} from '@angular/core';
//import library httperrorresponse jika IDE tidak otomatis
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

export interface AuthResponse {
    idToken: string;
    email: string;
    refreshToken: string;
    expiresIn: string;
    localId: string;
    registered?: boolean; //ditambahkan untuk handling response proses login
}

@Injectable({providedIn: 'root'})
export class AuthService {
    constructor(private http: HttpClient){

    }

    signUp(email: string, pswrd: string){
        return this.http
        .post<AuthResponse>('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyAHq81IV8SqS_n6KL9wEmuB_qs3_8J4szU',
            {
                email: email, 
                password: pswrd, 
                returnSecureToken: true
            }
        )
        .pipe(catchError(this.errHandling));
    }

    login(email: string, pswrd: string){
        return this.http
        .post<AuthResponse>('https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyAHq81IV8SqS_n6KL9wEmuB_qs3_8J4szU',
            {
                email: email, 
                password: pswrd, 
                returnSecureToken: true                
            }
        ).pipe(catchError(this.errHandling));   
    }

    //private method error handling karena akan digunakan saat signin maupun signup
    private errHandling(errResp: HttpErrorResponse){
        let errMsg = 'Unknown Error...';

        if (!errResp.error || !errResp.error.error){
            return throwError(errMsg);
        }
        switch(errResp.error.error.message){
            case 'EMAIL_EXISTS':      
                errMsg = 'Email sudah terdaftar';
                break;
            case 'EMAIL_NOT_FOUND':
                errMsg = 'User belum terdaftar';
                break;
            case 'INVALID_PASSWORD':
                errMsg = 'User atau Password salah';
                break;                
        }
        return throwError(errMsg);
    }
}

Buka file auth.component.ts, lalu ubah code menjadi seperti dibawah.

Perhatikan, digunakan property observable untuk melakukan subscribe, agar code menjadi lebih ringkas. Hal ini dilakukan karena proses signin dan signup sama. (lihat code dalam comment, baik signin dan signup melakukan proses yang sama).

import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";
import { Observable } from "rxjs";
import { AuthService, AuthResponse } from "./auth.service";

@Component({
    selector : 'app-auth',
    templateUrl : './auth.component.html'
})
export class AuthComponent{
    isLoginMode = true;
    isLoading = false;
    errorMsg = '';

    constructor(private authSrv : AuthService){}

    onSwitchMode(){
        this.isLoginMode = !this.isLoginMode; 
    }

    onSubmit(form : NgForm){
        if (form.invalid){
            return;
        }
        const email = form.value.email;
        const pswrd = form.value.password;

        this.isLoading = true;
        this.errorMsg = '';

        let authObs : Observable<AuthResponse>

        if(this.isLoginMode){
            authObs = this.authSrv.login(email, pswrd)
        }else{
            authObs = this.authSrv.signUp(email, pswrd)
        }

        authObs.subscribe(respData =>{
            this.isLoading = false;
            }, 
            errMsg =>{
                this.errorMsg = errMsg;
                this.isLoading = false;
            }
        );

        //karena proses sama, kita gunakan pendekatan lain
        // if(this.isLoginMode){
        //     this.authSrv.login(email, pswrd).subscribe(respData =>{
        //         this.isLoading = false;
        //     }, errMsg =>{
        //         this.errorMsg = errMsg;
        //         this.isLoading = false;
        //     });
        // }else{
        //     this.authSrv.signUp(email, pswrd).subscribe(respData =>{
        //         this.isLoading = false;
        //     }, errMsg =>{
        //         this.errorMsg = errMsg;
        //         this.isLoading = false;
        //     });
        // }

        form.reset()
    }
}

Sesuai ekspektasi, jika kita berusa login dengan user yang belum terdaftar akan tampil error seperti berikut:

Silakan Anda tambahkan error handling case dengan melihat dokumentasi di https://firebase.google.com/docs/reference/rest/auth#section-sign-in-email-password

Sampai disini proses login dan signup sudah berhasil kita implementasikan.

Berikutnya kita akan mulai menyimpan token yang dikembalikan oleh Firebase. Kemudian mengubah user interface dengan menerapkan authentication, dimana hanya authenticated user yang dapat mengakses halaman tertentu.