User Registration And Login Authentication Code Using Angular 6

User Registration and Login Authentication Code using angular 6

Contents

Today, We want to share with you User Registration and Login Authentication Code using angular 6.
In this post we will show you Registration and Login System using angular 6, hear for angular 6 User Registration and Login Example & Tutorial we will give you demo and example for implement.
In this post, we will learn about Complete Login and Registration System in angular 6.0 with an example.

Angular 6 Example

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

AngularJS 6 Login and Registration Script – Part 2

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

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 Authentication Service

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

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
 
@Injectable()
export class AuthenticationService {
    constructor(private http: HttpClient) { }
 
    login(studentname: string, password: string) {
        return this.http.post('/api/authenticate', { studentname: studentname, password: password })
            .pipe(map(student => {
                // login successful if there's a jwt token in the response
                if (student && student.token) {
                    // store student details and jwt token in local storage to keep student logged in between page refreshes
                    localStorage.setItem('activeStudent', JSON.stringify(student));
                }
 
                return student;
            }));
    }
 
    logout() {
        // remove student from local storage to log student out
        localStorage.removeItem('activeStudent');
    }
}

Angular 6 Student Service

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
import { Student } from '../_models';
 
@Injectable()
export class StudentService {
    constructor(private http: HttpClient) { }
 
    getAll() {
        return this.http.get('/api/students');
    }
 
    getById(id: number) {
        return this.http.get('/api/students/' + id);
    }
 
    create(student: Student) {
        return this.http.post('/api/students', student);
    }
 
    update(student: Student) {
        return this.http.put('/api/students/' + student.id, student);
    }
 
    delete(id: number) {
        return this.http.delete('/api/students/' + id);
    }
}

Angular 6 Home Component Template

files & folders Path: /src/spp/home/home.component.html

Hi {{activeStudent.studFname}}!
You're logged in with Angular 6!!
All registered students:

    
        {{student.studentname}} ({{student.studFname}} {{student.studLname}})
        - Delete
    

Logout

Angular 6 Home Component

files & folders Path: /src/spp/home/home.component.ts

import { Component, OnInit } from '@angular/core';
import { first } from 'rxjs/operators';
 
import { Student } from '../_models';
import { StudentService } from '../_services';
 
@Component({templateUrl: 'home.component.html'})
export class HomeComponent implements OnInit {
    activeStudent: Student;
    students: Student[] = [];
 
    constructor(private studentService: StudentService) {
        this.activeStudent = JSON.parse(localStorage.getItem('activeStudent'));
    }
 
    ngOnInit() {
        this.loadAllStudents();
    }
 
    deleteStudent(id: number) {
        this.studentService.delete(id).pipe(first()).subscribe(() => { 
            this.loadAllStudents() 
        });
    }
 
    private loadAllStudents() {
        this.studentService.getAll().pipe(first()).subscribe(students => { 
            this.students = students; 
        });
    }
}

Angular 6 Login Component Template

files & folders Path: /src/spp/login/login.component.html

Login

    
        Studentname
        
        
            Studentname is required
        
    
    
        Password
        
        
            Password is required
        
    
    
        
        
        Register

Angular 6 Login Component

files & folders Path: /src/spp/login/login.component.ts

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 { AlertService, AuthenticationService } from '../_services';
 
@Component({templateUrl: 'login.component.html'})
export class LoginComponent implements OnInit {
    signInFrm: FormGroup;
    Processing = false;
    frmSubmit = false;
    callbackUri: string;
 
    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) {}
 
    ngOnInit() {
        this.signInFrm = this.formBuilder.group({
            studentname: ['', Validators.required],
            password: ['', Validators.required]
        });
 
        this.authenticationService.logout();
 
        this.callbackUri = this.route.snapshot.queryParams['callbackUri'] || '/';
    }
 
    get f() { return this.signInFrm.controls; }
 
    onSubmit() {
        this.frmSubmit = true;
        if (this.signInFrm.invalid) {
            return;
        }
 
        this.Processing = true;
        this.authenticationService.login(this.f.studentname.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.router.navigate([this.callbackUri]);
                },
                error => {
                    this.alertService.error(error);
                    this.Processing = false;
                });
    }
}

Angular 6 Register Component Template

files & folders Path: /src/spp/register/register.component.html

Register

    
        Student Name
        
        
            Student Name is required
        
    
    
        Student Last Name
        
        
            Student Last Name is required
        
    
    
        Studentname
        
        
            Studentname is required
        
    
    
        Password
        
        
            Password is required
            Password must be at least 6 characters
        
    
    
        
        
        Cancel

Angular 6 Register Component

files & folders Path: /src/spp/register/register.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
 
import { AlertService, StudentService } from '../_services';
 
@Component({templateUrl: 'register.component.html'})
export class RegisterComponent implements OnInit {
    signupForm: FormGroup;
    Processing = false;
    frmSubmit = false;
 
    constructor(
        private formBuilder: FormBuilder,
        private router: Router,
        private studentService: StudentService,
        private alertService: AlertService) { }
 
    ngOnInit() {
        this.signupForm = this.formBuilder.group({
            studFname: ['', Validators.required],
            studLname: ['', Validators.required],
            studentname: ['', Validators.required],
            password: ['', [Validators.required, Validators.minLength(6)]]
        });
    }
 
    get f() { return this.signupForm.controls; }
 
    onSubmit() {
        this.frmSubmit = true;
 
        if (this.signupForm.invalid) {
            return;
        }
 
        this.Processing = true;
        this.studentService.create(this.signupForm.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.alertService.success('Student Sign Up successful', true);
                    this.router.navigate(['/login']);
                },
                error => {
                    this.alertService.error(error);
                    this.Processing = false;
                });
    }
}

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

Angular 6 Examples

We hope you get an idea about User Registration and Login Authentication Code using angular 6
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!.