Angular 9/8 Tutorial: Http POST to Node/Express.js Example

Angular 9/8 Tutorial: Http POST to Node/Express.js Example

In this post, we'll learn how to send an Http POST request with Angular 9 HttpClient to a Node/Express server for authenticating users.

Adding Angular 9 Authentication Forms for Sending Post Requests

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

Also read:

Typed and Full Responses and Headers in Angular 9 HttpClient: Link Header Pagination Example

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.

Posting User Credentials to a Node Authentication Server with Angular 9 HttpClient

In this tutorial, we'll add the code for actually submitting user's information to the authentication server via a POST request in order to register or authenticate the user.

This is the screenshot of the registration component: Angular 9 form| Register component

This is the screenshot of the login component:

Angular 9 form - login example

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).

Sending a POST Request with Angular 9 HttpClient

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 Angular HttpClient methods directly from the register() and login() methods because that's usually considered bad practice in Angular. Instead we'll create an Angular 9 service that encapsulates all the communication with the Node 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 Angular 9 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 9 project with the necessary modules and components.

Setting up Angular 9 HttpClient

Previously we've created the auth module. This module encapsulate the authentication logic in our Angular 9 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 POST requests in your application.

Creating AuthService and Injecting HttpClient

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

In your terminal, navigate to your Angular 9 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.

Importing Angular 9 HttpClient

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 Observable, BehaviorSubject 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 Angular 9 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.

Conclusion

In this tutorial, we've seen how to send POST requests to a Node/Express.js authentication server using Angular 9 HttpClient by building a simple Angular 9 example.



Create Angular 17 Project
Building a Password Strength Meter in Angular 17
Angular 17 Password Show/Hide with Eye Icon
Angular 17 tutoriel
Angular Select Change Event
Angular iframe
Angular FormArray setValue() and patchValue()
Angular Find Substring in String
Send File to API in Angular 17
EventEmitter Parent to Child Communication
Create an Angular Material button with an icon and text
Input change event in Angular 17
Find an element by ID in Angular 17
Find an element by ID from another component in Angular 17
Find duplicate objects in an array in JavaScript and Angular
What is new with Angular 17
Style binding to text-decoration in Angular
Remove an item from an array in Angular
Remove a component in Angular
Delete a component in Angular
Use TypeScript enums in Angular templates
Set the value of an individual reactive form fields
Signal-based components in Angular 17
Angular libraries for Markdown: A comprehensive guide
Angular libraries for cookies: A comprehensive guide
Build an Angular 14 CRUD Example & Tutorial
Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 15 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste