Send POST request to Node / Express.js server with Angular8

Send POST request to Node / Express.js server with Angular8

In this article, we will show you how to send a POST request to the Node / Express.js authentication server using Angular HttpClient by building a simple Angular 8 example.

In the previous tutorial, we've created authentication (login and register) forms with Angular 7/8 and a RESTful API server for handing authentication with Node and Express.js.

We've created the Login and Register components with the necessary forms to collect the user's credentials (name, email and password) and display them on the browser's console. In this tutorial, we'll add the code for actually submitting user's information to the authentication server in order to register or authenticate the user.

This is the screenshot of the registration component:

This is the screenshot of the login component:

When you click on the login and register buttons, the values your entered on the form will be only displayed on the console but in actual web applications these values need to be sent to the authentication server (in our case it's a Node and Express.js server that's running locally on the http://localhost:3000 address).

Let's change that!

Basically what you need to do it to change the register() and signIn() methods to send an HTTP POST request to the authentication server with Angular HttpClient.

But, we are not going to call the HttpClient methods directly from the register() and login() methods because that's usually considered bad practice in Angular. Instead we'll create an Angular service that encapsulates all the communication with the authentication server.

In nutshell, these are the steps that we are going to follow throughout this tutorial:

  • First, we need to setup HttpClient in our project (exactly in our auth module),
  • Next, we generate an AuthService and we implement methods such as signIn()register() and signOut() etc.
  • Finally, we inject AuthService in out Login and Register components and we call the appropriates service methods to register and authenticate users.

So let's get started!

Prerequisites

As a prerequisite, this tutorial assumes you have followed the previous tutorial where we have created the authentication server with Node and Express.js and created the Angular 8 project with the necessary modules and components.

Setting up HttpClient

Previously we've created the auth module. This module encapsulate the authentication logic in our application. Let's import HttpClient in this module.

Open the src/app/auth/auth.module.ts file and add the following changes:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AuthRoutingModule } from './auth-routing.module'; import { RegisterComponent } from './register/register.component'; import { LoginComponent } from './login/login.component';

@NgModule({ declarations: [RegisterComponent, LoginComponent], imports: [ CommonModule, FormsModule, HttpClientModule, AuthRoutingModule ] }) export class AuthModule { }

We simply import HttpClientModule from @angular/common/http and we add it in the imports array of AuthModule.

That's it! You are ready to send HTTP requests in your application.

Creating AuthService and Injecting HttpClient

Next, let's create an Angular service that's responsible for sending authentication requests to the backend server.

In your terminal, navigate to your Angular project's root folder and run the following command:

$ ng generate service auth/auth

Note: We add the auth/ path before the name of our service (which is also auth) to make the service a part of the auth module.

The command will generate two src/app/auth/auth.service.spec.ts and src/app/auth/auth.service.ts files.

Open the src/app/auth/auth.service.ts file, import HttpClient and inject it via the service's constructor:

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

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

Implementing the Authentication Methods

After creating the AuthService and injecting HttpClient let's now create the methods of the service i.e the register()signIn()signOut() and isAuthenticated() methods. The register() and signIn() methods work by sending POST requests to the /register and /login endpoints of the backend server with the user's credentials. The server will process the POST requests and create or authenticate the user.

Adding User and JWTResponse Model(s)

We'll be using two models:

  • The User model that encapsulates information about a user such as name, email and password.
  • The JWTResponse model that encapsulates information about the returned JWT response from the server which contains the JWT access token, the expiration date and the user's information used to create the token.

In your terminal, run the following commands to generate the User and JWTResponse models:

$ ng generate interface auth/user
$ ng generate interface auth/jwt-response

Open the src/app/auth/user.ts file and update as follows:

export interface User {
    id: number;
    name: string;
    email: string;
    password: string;
}

Open the src/app/auth/jwt-response.ts file and update as follows:

export interface JwtResponse {
    user: {
        id: number,
        name: string,
        email: string,
        access_token: string,
        expires_in: number
    }
}

Next, open the src/app/auth/auth.service.ts file and import the two models:

import { User } from  './user';
import { JwtResponse } from  './jwt-response';

Also, import ObservableBehaviorSubject and tap()

import { tap } from  'rxjs/operators';
import { Observable, BehaviorSubject } from  'rxjs';

Next add a variable that holds the address of the authentication server:

AUTH_SERVER = "http://localhost:3000";

Finally, add a authSubject variable of type BehaviorSubject with initial value of false:

authSubject  =  new  BehaviorSubject(false);

This variable tracks the user's authentication state. false means the user is not authenticated yet.

Adding the register() method: Sending a POST Request with HttpClient

Let's start with the implementation of the register() method. Open the src/app/auth/auth.service.ts file and add:

  register(user: User): Observable<JwtResponse> {
    return this.httpClient.post<JwtResponse>(${this.AUTH_SERVER}/register, user).pipe(
      tap((res:  JwtResponse ) => {

    if (res.user) {
      localStorage.set("ACCESS_TOKEN", res.user.access_token);
      localStorage.set("EXPIRES_IN", res.user.expires_in);
      this.authSubject.next(true);
    }
  })

);

}

Adding the signIn() Method: Sending a POST Request with HttpClient

Next, add the signIn() method:

  singIn(user: User): Observable<JwtResponse> {
    return this.httpClient.post(${this.AUTH_SERVER}/login, user).pipe(
      tap(async (res: JwtResponse) => {

    if (res.user) {
      localStorage.setItem("ACCESS_TOKEN", res.user.access_token);
      localStorage.setItem("EXPIRES_IN", res.user.expires_in);
      this.authSubject.next(true);
    }
  })
);

}

Adding the signOut() Method: Removing the JWT Token from Local Storage

Next, let's implement the signOut() method:

  signOut() {
    localStorage.removeItem("ACCESS_TOKEN");
    localStorage.removeItem("EXPIRES_IN");
    this.authSubject.next(false);
  }

Adding the isAuthenticated() Method: Returning the authSubject as Observable

isAuthenticated() {
    return  this.authSubject.asObservable();
}

Calling AuthService Methods in The Components

After fully implementing AuthService, let's now call these methods in the Login and Register components.

Open the src/app/auth/login.component.ts file and update it as follows:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { User } from '../user';

@Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit {

constructor(private authService: AuthService, private router: Router) { }

ngOnInit() {}

register(form) { console.log(form.value); this.authService.register(form.value).subscribe((res) => { this.router.navigateByUrl('home'); }); } }

First we import AuthService and Router and we inject them via the component's constructor. Next, we call the register() method of AuthService and we pass in the form value.

Next, open the src/app/auth/register.component.ts file and update it as follows:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthService } from '../auth.service'; import { User } from '../user';

@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit {

constructor(private authService: AuthService, private router: Router) { }

ngOnInit() { }

login(form){ console.log(form.value); this.authService.signIn(form.value).subscribe((res)=>{ console.log("Logged in!"); this.router.navigateByUrl('home'); });
}

}

Again, we import and inject AuthService and Router via the component's constructor then in the login() method we call the signIn() method of AuthService to authenticate the user.

In both the login() and register() methods we subscribe to the returned Observable and we use the Router navigateByUrl() method to navigate to a home page so you should also create a home page and map it to the home route.

Please note that we don't do any error checking here. Subscribing to the Observable doesn't guarantee that we get a successful response all the time so you should also do some basic error checking before navigating to the home page.


Originally published at  techiediaries.com on 10 Sep 2019



angular node-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

How to Implement Server Side Pagination with Angular 8 and Node.js

A simple example of how to implement server-side pagination in Angular 8 with a Node.js backend API.

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.