Menggunakan Authentication Pada Project Buku Resep – 7

Pada modul ini kita akan menyimpan data user di local, yang akan digunakan untuk menerapkan authentication, seperti apakah user sudah login, atau apakah token sudah expired atau belum.

Pertama kita buat model untuk user, buat file auth/user.model.ts

export class User {
    constructor(public email: string, 
        public id: string, 
        private _token: string, 
        private _tokenExpDt: Date){}

    get token(){
        if (!this._tokenExpDt || new Date() > this._tokenExpDt){
            return null;
        }
        return this._token;
    }
}

Kemudian buka file auth.service.ts, kita tambahkan code untuk menyimpan informasi user baik pada proses signup atau login dengan menggunakan tap operator.

Karena proses signin dan signup akan menyimpan data user yang sama, kita buat private method untuk menanganinya.

import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import { catchError, tap } from 'rxjs/operators';
import { Subject, throwError } from 'rxjs';
import { User } from './user.model';

export interface AuthResponse {
    idToken: string;
    email: string;
    refreshToken: string;
    expiresIn: string;
    localId: string;
    registered?: boolean; 
}

@Injectable({providedIn: 'root'})
export class AuthService {
    user = new Subject<User>();

    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), tap(respData=>{
            this.handleAuth(respData.email, respData.localId, respData.idToken, +respData.expiresIn);
        }));
    }

    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), tap(respData=>{
            this.handleAuth(respData.email, respData.localId, respData.idToken, +respData.expiresIn);
        }));   
    }

    private handleAuth(email: string, userId: string, token: string, expiresIn: number){
        const expDate = new Date(new Date().getTime()+ (expiresIn*1000));
        const user = new User(email, userId, token, expDate);
        this.user.next(user);
    }

    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);
    }
}

Sampai disini kita sudah menyimpan data user ke local variable.

Kita akan gunakan untuk mengatur user interface.