Menggunakan Authentication Pada Project Buku Resep – 4

Untuk menerapkan authentication, kita tambahkan file service baru pada folder auth. Buat file baru auth/auth.service.ts

Signup

Pertama kita akan melakukan proses signup dahulu. API yang digunakan adalah:

https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

Untuk mendapatkan API key lihat dari project setting (lihat modul sebelumnya).

Method untuk signup adalah post, dan memerlukan passing data berikut:

• email: string, alamat email yang akan di-create.
• password: string, password yang akan dicreate.
• returnSecureToken: boolean, Apakah akan mengembalikan ID dan refresh token atau tidak. Selalu True.

Sementara response payload adalah

• idToken: string, Firebase Auth ID token untuk user yang baru dibuat.
• email: string, alamat email dari user yang baru dibuat.
• refreshToken: string, Firebase Auth refresh token untuk user yang baru dibuat.
• expiresIn: string, Token expires dalam seconds.
• localId: string, uid dari user yang baru dibuat

Kita akan definisikan response payload dalam interface.

Berikut isi file auth/auth.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

interface AuthResponse {
    idToken: string;
    email: string;
    refreshToken: string;
    expiresIn: string;
    localId: string;
}

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

Kemudian buka file auth.component.ts, lakukan modifikasi pada method onSubmit

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

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

    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;

        if(this.isLoginMode){
            //
        }else{
            this.authSrv.signUp(email, pswrd).subscribe(respData =>{
                console.log(respData);
            }, error =>{
                console.log(error);
            });
        }

        form.reset()
    }
}

Sesuai ekspektasi, proses signup user di Firebase berhasil kita lakukan.