Angular 6 - Basic HTTP Authentication Tutorial & Example
Tutorial built with Angular 6.1.10 and Webpack 4.8
Other versions available:
- Angular: Angular 14, 10, 9, 8
- React: React 16, React 17 + Recoil
- Vue: Vue 3 + Pinia, Vue 2
- Next.js: Next.js 11
- AngularJS: AngularJS
- Blazor: Blazor WebAssembly
The following is a custom example and tutorial on how to setup a simple login page using Angular 6 and Basic HTTP authentication.
The tutorial code is available on GitHub at https://github.com/cornflourblue/angular-6-basic-authentication-example
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-6-basic-authentication-example)
Running the Angular 6 Basic Authentication Tutorial Example Locally
The basic authentication tutorial example uses Webpack 4.8 to transpile the TypeScript code and bundle the Angular 6 modules together, and the webpack dev server is used as the local web server, to learn more about using webpack with TypeScript you can check out the webpack docs.
- Install NodeJS and NPM from https://nodejs.org/en/download/.
- Download or clone the tutorial project source code from https://github.com/cornflourblue/angular-6-basic-authentication-example
- Install all required npm packages by running
npm installfrom the command line in the project root folder (where the package.json is located). - Start the application by running
npm startfrom the command line in the project root folder.
Running the Tutorial Example with a Real Backend API
The Angular 6 basic authentication example app uses a fake / mock backend by default so it can run in the browser without a real api, to switch to a real backend api you just have to remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file.
You can build your own backend api or start with one of the below options:
- To run the Angular 6 basic auth example with a real backend API built with Node.js follow the instructions at NodeJS - Basic Authentication Tutorial with Example API
- For a real backend API built with ASP.NET Core 2.1 follow the instructions at ASP.NET Core 2.1 - Basic Authentication Tutorial with Example API
Angular 6 Basic Authentication Tutorial Project Structure
The project and code structure of the tutorial mostly follows the best practice recommendations in the official Angular Style Guide, with a few of my own tweaks here and there.
Each feature has it's own folder (home & login), other code such as services, models, helpers and guards are placed in folders prefixed with an underscore to easily differentiate them and group them together at the top of the folder structure.
The index.ts files in each folder are barrel files that group the exported modules from a folder together so they can be imported using the folder path instead of the full module path and to enable importing multiple modules in a single import (e.g. import { AuthenticationService, UserService } from '../_services').
Here's the tutorial project structure:
- src
- app
- _guards
- auth.guard.ts
- index.ts
- _helpers
- _models
- user.ts
- index.ts
- _services
- authentication.service.ts
- user.service.ts
- index.ts
- home
- home.component.html
- home.component.ts
- index.ts
- login
- login.component.html
- login.component.ts
- index.ts
- app.component.html
- app.component.ts
- app.module.ts
- app.routing.ts
- _guards
- index.html
- main.ts
- polyfills.ts
- typings.d.ts
- app
- package.json
- tsconfig.json
- webpack.config.js
Below are brief descriptions and the code for the main files of the example basic authentication application, all the tutorial code is available in the github project linked at the top of the post.
Angular 6 Auth Guard
The auth guard is used to prevent unauthenticated users from accessing restricted routes. In the example app it's used in app.routing.ts to protect the home page route.
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
Angular 6 Basic Authentication Interceptor
The Basic Authentication Interceptor intercepts http requests from the application to add basic authentication credentials to the Authorization header if the user is logged in.
It's implemented using the HttpInterceptor class that was introduced in Angular 4.3 as part of the new HttpClientModule. By extending the HttpInterceptor class you can create a custom interceptor to modify http requests before they get sent to the server.
Http interceptors are added to the request pipeline in the providers section of the app.module.ts file.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add authorization header with basic auth credentials if available
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.authdata) {
request = request.clone({
setHeaders: {
Authorization: `Basic ${currentUser.authdata}`
}
});
}
return next.handle(request);
}
}
Angular 6 Http Error Interceptor
The Error Interceptor intercepts http responses from the api to check if there were any errors. If there is a 401 Unauthorized response the user is automatically logged out of the application, all other errors are re-thrown to be caught by the calling service so an alert can be displayed to the user.
It's implemented using the HttpInterceptor class that was introduced in Angular 4.3 as part of the new HttpClientModule. By extending the HttpInterceptor class you can create a custom interceptor to catch all error responses from the server in a single location.
Http interceptors are added to the request pipeline in the providers section of the app.module.ts file.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthenticationService } from '../_services';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
Angular 6 Fake Backend Provider
The fake backend provider enables the example to run without a backend / backendless, I created it so I could focus the example and tutorial just on the angular code, and also so it works on StackBlitz.
It's implemented using the HttpInterceptor class that was introduced in Angular 4.3 as part of the new HttpClientModule. By extending the HttpInterceptor class you can create a custom interceptor to modify http requests before they get sent to the server. In this case the FakeBackendInterceptor intercepts selected requests based on their URL and provides a fake response instead of going to the server.
import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
@Injectable()
export class FakeBackendInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let testUser = { id: 1, username: 'test', password: 'test', firstName: 'Test', lastName: 'User' };
// wrap in delayed observable to simulate server api call
return of(null).pipe(mergeMap(() => {
// authenticate
if (request.url.endsWith('/users/authenticate') && request.method === 'POST') {
if (request.body.username === testUser.username && request.body.password === testUser.password) {
// if login details are valid return user details
let body = {
id: testUser.id,
username: testUser.username,
firstName: testUser.firstName,
lastName: testUser.lastName
};
return of(new HttpResponse({ status: 200, body }));
} else {
// else return 400 bad request
return throwError({ error: { message: 'Username or password is incorrect' } });
}
}
// get users
if (request.url.endsWith('/users') && request.method === 'GET') {
// check for fake auth token in header and return users if valid, this security
// is implemented server side in a real application
if (request.headers.get('Authorization') === `Basic ${window.btoa('test:test')}`) {
return of(new HttpResponse({ status: 200, body: [testUser] }));
} else {
// return 401 not authorised if token is null or invalid
return throwError({ status: 401, error: { message: 'Unauthorised' } });
}
}
// pass through any requests not handled above
return next.handle(request);
}))
// call materialize and dematerialize to ensure delay even if an error is thrown (https://github.com/Reactive-Extensions/RxJS/issues/648)
.pipe(materialize())
.pipe(delay(500))
.pipe(dematerialize());
}
}
export let fakeBackendProvider = {
// use fake backend in place of Http service for backend-less development
provide: HTTP_INTERCEPTORS,
useClass: FakeBackendInterceptor,
multi: true
};
Angular 6 User Model
The user model is a small class that defines the properties of a user.
export class User {
id: number;
username: string;
password: string;
firstName: string;
lastName: string;
}
Angular 6 Basic Authentication Service
The basic authentication service is used to login and logout of the application, to login it posts the users credentials to the api and checks the response for a user, if there is one it means authentication was successful so the user details are added to local storage along with basic authentication data (base64 encoded username and password). The basic auth data is used by the basic authentication interceptor above to set the authorization header of http requests made to secure api endpoints.
The logged in user details are stored in local storage so the user will stay logged in if they refresh the browser and also between browser sessions until they logout. If you don't want the user to stay logged in between refreshes or sessions the behaviour could easily be changed by storing user details somewhere less persistent such as session storage or in a property of the authentication service.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
constructor(private http: HttpClient) { }
login(username: string, password: string) {
return this.http.post<any>(`${config.apiUrl}/users/authenticate`, { username, password })
.pipe(map(user => {
// login successful if there's a user in the response
if (user) {
// store user details and basic auth credentials in local storage
// to keep user logged in between page refreshes
user.authdata = window.btoa(username + ':' + password);
localStorage.setItem('currentUser', JSON.stringify(user));
}
return user;
}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
}
}
Angular 6 User Service
The user service contains a single method for getting all users from the api, I included it to demonstrate accessing a secure api endpoint with the http authorization header set after logging in to the application, the auth header is set with basic authentication credentials in the Basic Authentication Interceptor above. The secure endpoint in the example is a fake one implemented in the fake backend provider above.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../_models';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) { }
getAll() {
return this.http.get<User[]>(`${config.apiUrl}/users`);
}
}
Angular 6 Home Component Template
The home component template contains html and angular 6 template syntax for displaying a simple welcome message, a list of users and a logout link.
<h1>Home</h1>
<p>You're logged in with Angular 6 & Basic HTTP Authentication!!</p>
<div>
Users from secure api end point:
<ul>
<li *ngFor="let user of users">{{user.firstName}} {{user.lastName}}</li>
</ul>
</div>
<p><a [routerLink]="['/login']">Logout</a></p>
Angular 6 Home Component
The home component defines an angular 6 component that gets all users from the user service and makes them available to the template via a users array property.
import { Component, OnInit } from '@angular/core';
import { first } from 'rxjs/operators';
import { User } from '../_models';
import { UserService } from '../_services';
@Component({templateUrl: 'home.component.html'})
export class HomeComponent implements OnInit {
users: User[] = [];
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getAll().pipe(first()).subscribe(users => {
this.users = users;
});
}
}
Angular 6 Login Component Template
The login component template contains a login form with username and password fields. It displays validation messages for invalid fields when the submit button is clicked. The form submit event is bound to the onSubmit() method of the login component.
The component uses reactive form validation to validate the input fields, for more information about angular reactive form validation check out Angular 6 - Reactive Forms Validation Example.
<div class="alert alert-info">
Username: test<br />
Password: test
</div>
<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div *ngIf="error" class="alert alert-danger">{{error}}</div>
</form>
Angular 6 Login Component
The login component uses the authentication service to login and logout of the application. It automatically logs the user out when it initializes (ngOnInit) so the login page can also be used to logout.
The loginForm: FormGroup object defines the form controls and validators, and is used to access data entered into the form. The FormGroup is part of the Angular Reactive Forms module and is bound to the login template above with the [formGroup]="loginForm" directive.
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthenticationService } from '../_services';
@Component({templateUrl: 'login.component.html'})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
returnUrl: string;
error = '';
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService) {}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
// reset login status
this.authenticationService.logout();
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
// convenience getter for easy access to form fields
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.authenticationService.login(this.f.username.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.error = error;
this.loading = false;
});
}
}
Angular 6 App Component Template
The app component template is the root component template of the application, it contains a router-outlet directive for displaying the contents of each view based on the current route / path.
<!-- main app container -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
Angular 6 App Component
The app component is the root component of the application, it defines the root tag of the app as <app></app> with the selector property.
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
Angular 6 App Module
The app module defines the root module of the application along with metadata about the module. For more info about angular 6 modules check out this page on the official docs site.
This is where the fake backend provider is added to the application, to switch to a real backend simply remove the providers located below the comment // provider used to create fake backend.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// used to create fake backend
import { fakeBackendProvider } from './_helpers';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { BasicAuthInterceptor, ErrorInterceptor } from './_helpers';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
routing
],
declarations: [
AppComponent,
HomeComponent,
LoginComponent
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
// provider used to create fake backend
fakeBackendProvider
],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 6 App Routing
The app routing file defines the routes of the application, each route contains a path and associated component. The home route is secured by passing the AuthGuard to the canActivate property of the route.
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { AuthGuard } from './_guards';
const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
Angular 6 Main Index Html File
The main index.html file is the initial page loaded by the browser that kicks everything off. Webpack bundles all of the javascript files together and injects them into the body of the index.html page so the scripts get loaded and executed by the browser.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Angular 6 - Basic Authentication Tutorial & Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
a { cursor: pointer }
</style>
</head>
<body>
<app>Loading...</app>
</body>
</html>
Angular 6 Main (Bootstrap) File
The main file is the entry point used by angular to launch and bootstrap the application.
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Angular 6 Polyfills
Some features used by Angular 6 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 6 application works across all major browsers.
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
Angular 6 Custom Typings File
A custom typings file is used to declare types that are created outside of your angular application, so the TypeScript compiler is aware of them and doesn't give you errors about unknown types. This typings file contains a declaration for the global config object that is created by webpack (see webpack.config.js below).
// so the typescript compiler doesn't complain about the global config object
declare var config: any;
npm package.json
The package.json file contains project configuration information including package dependencies which get installed when you run npm install. Full documentation is available on the npm docs website.
{
"name": "angular-6-basic-authentication-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/angular-6-basic-authentication-example.git"
},
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"license": "MIT",
"dependencies": {
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.5",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/node": "^12.0.0",
"angular2-template-loader": "^0.6.2",
"html-webpack-plugin": "^3.2.0",
"raw-loader": "^1.0.0",
"ts-loader": "^5.2.2",
"typescript": "^3.1.3",
"webpack": "^4.24.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
TypeScript tsconfig.json
The tsconfig.json file configures how the TypeScript compiler will convert TypeScript into JavaScript that is understood by the browser. More information is available on the TypeScript docs.
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5"
}
}
Webpack 4 Config
Webpack 4.8 is used to compile and bundle all the project files so they're ready to be loaded into a browser, it does this with the help of loaders and plugins that are configured in the webpack.config.js file. For more info about webpack check out the webpack docs.
This is a minimal webpack.config.js for bundling an Angular 6 application, it compiles TypeScript files using ts-loader, loads angular templates with raw-loader, and injects the bundled scripts into the body of the index.html page using the HtmlWebpackPlugin. It also defines a global config object with the plugin webpack.DefinePlugin.
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
exclude: /node_modules/
},
{
test: /\.(html|css)$/,
loader: 'raw-loader'
},
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}),
new webpack.DefinePlugin({
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
})
],
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: true
},
devServer: {
historyApiFallback: true
}
};
Need Some Angular 6 Help?
Search fiverr for freelance Angular 6 developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!