How can I connect my angular-nativescript app to a DB for a login?

Question

I'm trying to create an app through NativeScript and Angular which will manage the working hours of the employees for a company.

So, I have to set up a login page and there's my problem: I linked a function on the tap of the LOGIN button and, after clicking on it, I send username and password to a service where I'm trying to connect to and end-point (mypath/api/auth.php).

In this php file I set up the DB connection and a SELECT query which receive username and password as a $_POST function. But, now, when I tap on my LOGIN button I got an alert with [Object Object] even if the credentials are right or wrong.

I'm a beginner in both NativeScript and Angular.

My PHP user verification function:

$username = $_POST["username"];
$password = $_POST["password"];
$conn = getDB();
$hash_pwd = hash('sha256', $password);

$stmt = $conn->prepare("SELECT * FROM dipendenti WHERE cod_fiscale=:username AND password=:password");
$stmt->bindParam("username", $username,PDO::PARAM_STR) ;
$stmt->bindParam("password", $hash_pwd,PDO::PARAM_STR) ;
$stmt->execute();
$count=$stmt->rowCount();
$data=$stmt->fetch(PDO::FETCH_OBJ);

closeDB($conn);
return json_encode($data);

My user.service.ts file:

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError, map, tap } from "rxjs/operators";

import { Auth } from "./auth.model";
import { Config } from "../config";

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

    login( user: Auth) {
        if(!user.codFiscale || !user.password) {
            return throwError("Devi inserire sia codice fiscale sia la tua password per accedere");
        }
        return this.http.post(Config.apiUrl + 'api/auth.php', 
            JSON.stringify({
                username: user.codFiscale,
                password: user.password
            }),
            { 
                headers: this.getCommonHeaders()
            }).pipe(
                map(response => response),
                catchError(this.handleErrors)
            );
    }

    getCommonHeaders() {
        return {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*"
        }
    }

    handleErrors(error: Response) {
        console.log(JSON.stringify(error));
        return throwError(error);
    }
}

My function triggered on the button tap:

submitLogin() {
        if(this.isLoggingIn) {
            this.authService.login(this.user).subscribe(
                () => {
                    this.router.navigate(["/home"]);
                },
                (exception) => {
                    if(exception.error && exception.error.description) {
                        alert(exception.error.description);
                    } else {
                        alert(exception.error);
                    }
                }
            );
        }
    }

Is there something I have forgotten?

Answer 1

i do it in nativescript-vue, maybe you need to adjust for angular. I use axios plugin for that, it works for ns-angular too, i just don't know how to config it on angular... but the code is this:

async submitLogin() {

            const data = {
                email: this.user.email,
                password: this.user.password
            };

            try {
                const res = (await api.post(this.getApiUrl+"/app/services/login.php", data)).data;
                if (res.code === 200){
                    //handle login success
                }
                else if (res.code === 500){
                    //handle login fail
                }
            }
            catch (e) {
                console.error("Connection error: ", e);
            }
        },

where api.post is:

post(url, request, config) {
    return axios.post(url, request, config)
        .then((response) => Promise.resolve(response))
        .catch((error) => Promise.reject(error));
},

Edit: The res.code is a custom response that i send in the response, it's not default!