Angular 6 – User Registration and Login Example & Tutorial
Contents
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…..
- Angular 6 Folder Project Structure
- Angular 6 CLI Installation
- Angular 6 Module File
- Angular 6 Components
- Angular 6 Services
- Angular 6 Routing
- Angular 6 CSS
- Angular 6 Class Binding
- Angular 6 Animation
- Angular 6 Templating
- 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 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!.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.