Angular 6 – User Registration and Login Example & Tutorial

Angular 6 – User Registration and Login Example & Tutorial

Today, We want to share with you Angular 6 – User Registration and Login Example & Tutorial
.
In this post we will show you angular 6 User Registration & Login Example Tutorial,
, hear for Complete user registration system using angular 6 we will give you demo and example for implement.
In this post, we will learn about Simple User Registration & Login Script in angular 6 with an example.

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

1. Angular 6 Folder Project Structure
2. Angular 6 CLI Installation
3. Angular 6 Module File
4. Angular 6 Components
5. Angular 6 Services
6. Angular 6 Routing
7. Angular 6 CSS
8. Angular 6 Class Binding
9. Angular 6 Animation
10. Angular 6 Templating
11. Angular 6 HTTP Client

AngularJS 6 Login and Registration Script – Part 1

Angular 6 Authentication Tutorial [Login, Logout, Register, Forgot Password & Remember Me Functionality] – Part – 1

Angular 6 Login And Registration Module

There are the available for AngularJS 6.0 Part1, Part2 and Part3 Step By step Example and source code available.

• Angular 6.0 – Part :1
• Angular 6.0 – Part :2
• Angular 6.0 – Part :3

Angular 6 Tutorial Project Structure

It is available full angular 6 project or web Application structure available Angular 6 Tutorial Project Structure

Angular 6 Alert Component Template

files & folders Path: /src/spp/_directives/alert.component.html

<div>{{alert-msg.text}}</div>

Angular 6 Alert Component

files & folders Path: /src/spp/_directives/alert.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
 
import { AlertService } from '../_services';
 
@Component({
    selector: 'alert',
    templateUrl: 'alert.component.html'
})
 
export class AlertComponent implements OnInit, OnDestroy {
    private subscription: Subscription;
    alert-msg: any;
 
    constructor(private alertService: AlertService) { }
 
    ngOnInit() {
        this.subscription = this.alertService.getMessage().subscribe(alert-msg => { 
            this.alert-msg = alert-msg; 
        });
    }
 
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Angular 6 Auth Guard

files & folders Path: /src/spp/_guards/auth.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
@Injectable()
export class AuthGuard implements CanActivate {
 
    constructor(private router: Router) { }
 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('activeStudent')) {
          
            return true;
        }
 
        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { callbackUri: state.url }});
        return false;
    }
}

Angular 6 Fake Backend Provider

files & folders Path: /src/spp/_helpers/fake-backend.ts

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, next: HttpHandler): Observable<HttpEvent> {
        // array in local storage for registered students
        let students: any[] = JSON.parse(localStorage.getItem('students')) || [];
 
        // wrap in delayed observable to simulate server api call
        return of(null).pipe(mergeMap(() => {
 
            // authenticate
            if (request.url.endsWith('/api/authenticate') && request.method === 'POST') {
                // find if any student matches login credentials
                let filteredStudents = students.filter(student => {
                    return student.studentname === request.body.studentname && student.password === request.body.password;
                });
 
                if (filteredStudents.length) {
                    // if login details are valid return 200 OK with student details and fake jwt token
                    let student = filteredStudents[0];
                    let body = {
                        id: student.id,
                        studentname: student.studentname,
                        studFname: student.studFname,
                        studLname: student.studLname,
                        token: 'fake-jwt-token'
                    };
 
                    return of(new HttpResponse({ status: 200, body: body }));
                } else {
                    // else return 400 bad request
                    return throwError('Studentname or password is incorrect');
                }
            }
 
            // get students
            if (request.url.endsWith('/api/students') && request.method === 'GET') {
                // check for fake auth token in header and return students if valid, this security is implemented server side in a real application
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    return of(new HttpResponse({ status: 200, body: students }));
                } else {
                    // return 401 not authorised if token is null or invalid
                    return throwError('Unauthorised');
                }
            }
 
            // get student by id
            if (request.url.match(/\/api\/students\/\d+$/) && request.method === 'GET') {
                // check for fake auth token in header and return student if valid, this security is implemented server side in a real application
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    // find student by id in students array
                    let urlParts = request.url.split('/');
                    let id = parseInt(urlParts[urlParts.length - 1]);
                    let matchedStudents = students.filter(student => { return student.id === id; });
                    let student = matchedStudents.length ? matchedStudents[0] : null;
 
                    return of(new HttpResponse({ status: 200, body: student }));
                } else {
                    // return 401 not authorised if token is null or invalid
                    return throwError('Unauthorised');
                }
            }
 
            // create student
            if (request.url.endsWith('/api/students') && request.method === 'POST') {
                // get new student object from post body
                let newStudent = request.body;
 
                // validation
                let duplicateStudent = students.filter(student => { return student.studentname === newStudent.studentname; }).length;
                if (duplicateStudent) {
                    return throwError('Studentname "' + newStudent.studentname + '" is already taken');
                }
 
                // save new student
                newStudent.id = students.length + 1;
                students.push(newStudent);
                localStorage.setItem('students', JSON.stringify(students));
 
                // respond 200 OK
                return of(new HttpResponse({ status: 200 }));
            }
 
            // delete student
            if (request.url.match(/\/api\/students\/\d+$/) && request.method === 'DELETE') {
              
                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                    // find student by id in students array
                    let urlParts = request.url.split('/');
                    let id = parseInt(urlParts[urlParts.length - 1]);
                    for (let i = 0; i < students.length; i++) {
                        let student = students[i];
                        if (student.id === id) {
                            // delete student
                            students.splice(i, 1);
                            localStorage.setItem('students', JSON.stringify(students));
                            break;
                        }
                    }
 
                    // respond 200 OK
                    return of(new HttpResponse({ status: 200 }));
                } else {
               
                    return throwError('Unauthorised');
                }
            }
 
            return next.handle(request);
             
        }))
 
        .pipe(materialize())
        .pipe(delay(500))
        .pipe(dematerialize());
    }
}
 
export let fakeBackendProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: FakeBackendInterceptor,
    multi: true
};

Angular 6 JWT Interceptor

files & folders Path: /src/spp/_helpers/jwt.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
 
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        let activeStudent = JSON.parse(localStorage.getItem('activeStudent'));
        if (activeStudent && activeStudent.token) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Bearer ${activeStudent.token}`
                }
            });
        }
 
        return next.handle(request);
    }
}

Angular 6 Student Model

files & folders Path: /src/spp/_models/student.ts

export class Student {
    id: number;
    studentname: string;
    password: string;
    studFname: string;
    studLname: string;
}

Angular 6 Alert Service

files & folders Path: /src/spp/_services/alert.service.ts

import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable, Subject } from 'rxjs';
 
@Injectable()
export class AlertService {
    private subject = new Subject();
    private keepAfterNavigationChange = false;
 
    constructor(private router: Router) {
        // clear alert alert-msg on route change
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                if (this.keepAfterNavigationChange) {
                    // only keep for a single location change
                    this.keepAfterNavigationChange = false;
                } else {
                    // clear alert
                    this.subject.next();
                }
            }
        });
    }
 
    success(alert-msg: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'success', text: alert-msg });
    }
 
    error(alert-msg: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'error', text: alert-msg });
    }
 
    getMessage(): Observable {
        return this.subject.asObservable();
    }
}

More Details of the Angular 6 Angular 6 Introduction Tutorial features of angular 6.0

Angular 6 Examples

There are the Angular 6 Step By Step Example and Learning AngularJS

• Angular 6 CRUD Tutorial Example From Scratch
• Angular 6 and ASP.NET Core 2.0 Web API Example
• Angularjs 6 User Registration and Login Authentication
• Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations

Angular 6 Login And Registration Module

There are the available for AngularJS 6.0 Part1, Part2 and Part3 Step By step Example and source code available.

• Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations
• Angular 6 CRUD
• Angular 6 and ASP.NET Core 2.0 Web API
• Angular 6 features
• Angular 6 Form Validation
• Angular 6 – User Registration and Login
• Angularjs 6 User Registration and Login Authentication
• Angular 6 CLI Installation Tutorial With Example
• Angular 6 Toast Message Notifications From Scratch

We hope you get an idea about angular 6 User Registration & Login Example Tutorial
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.