Skip to content
  • Home
  • Blog
    • yttags
    • Youtube
  • Categories
  • Tools
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
  • JS
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us
Pakainfo

Pakainfo

Web Development & Good Online education

Angular 6 – User Registration and Login Example & Tutorial

July 22, 2019 Pakainfo Technology, AngularJS, Programming Leave a comment
Rate this post

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

Read Also:  Angular 6 Introduction Tutorial features of angular 6.0

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

Read Also:  Angular 6 Folder Project Structure

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();
    }
}

Free Live Chat for Any Issue

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

Read Also:  jquery $.extend() Method with Example

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.

Download

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

Related posts:

  1. User Registration and Login Authentication Code using angular 6
  2. Angular 6 Registration and Login System Example Tutorial
  3. Angularjs 6 User Registration and Login Authentication
  4. CodeIgniter Simple User Registration and Login System
  5. Laravel Custom Login Registration Example Tutorial
  6. Angular 6 HTTP Client Tutorial with Examples
  7. CodeIgniter Login Registration Example Tutorial From Scratch
  8. NodeJS Login and Registration Authentication using mysql
  9. Angularjs Login And Registration Modal Template
  10. angular 6 tutorial for beginners step by step
angular 6angular 6 release dateangular 6 simple login exampleangular 6 tutorialangular 6 User Registration & Login Example TutorialAngular 6 User Registration and Login Example & Tutorialangular 6.0 Login Applicationangular 6.0 login demoangular 6.0 user registration form exampleangularjs login demoComplete user registration system using angular 6Simple User Registration & Login Script in angular 6User Registration and Login Script in angular 6

Post navigation

Previous Post:Laravel Upload Import CSV Data Into MySQL Database
Next Post:Laravel 5.7 CRUD Tutorial With Example from scratch

Search

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me
Cricday

Categories

3movierulz (48) Ajax (464) AngularJS (377) ASP.NET (61) Bollywood (92) Codeigniter (174) CSS (96) Earn Money (61) Education (53) Entertainment (108) fullform (77) Google Adsense (62) Highcharts (77) Hollywood (93) JavaScript (1354) Jobs (39) jQuery (1421) Laravel (1083) LifeStyle (50) movierulz4 (47) Mysql (1029) Mysqli (890) Node.js (38) php (2110) Programming (2320) Python (96) ReactJS (37) Software (102) Software (77) Stories (78) tamilrockers (88) Tamilrockers kannada (48) Tamilrockers telugu (47) Tech (101) Technology (2359) Tips and Tricks (107) Tools (111) Top10 (292) Trading (49) Trending (45) VueJs (250) Web Technology (83) webtools (129) wordpress (165) World (120)

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here

Web Development & Good Online education : Pakainfo by Pakainfo.
Top
Subscribe On YouTube : Download Source Code & New itsolutionstuck
We accept paid guest Posting on our Site : Guest Post Chat with Us On WhatsApp