Angular6 Login And Registration Example And Tutorial

    Sep 30, 2018       by Pankaj Kumar
angular6-login-registration-app.jpg

In this tutorial, we'll create an angular application to understand how to build a simple user registration and login system using Angular 6, TypeScript and webpack 4.

Below are the  requirements for creating the  CRUD on MEAN

- Node.js
- Angular CLI
- Angular 6
- Mongodb
- IDE or Text Editor

We  assume that you have already available the above tools/frameworks and you are familiar with all the  above that what individually actually does.

So now we will proceed step by step to achieve the task.

 

Create Server for Serving APIs

1. server.js

 

 
const app = require('express')(),
server = require('http').Server(app),
bodyParser = require('body-parser')
express = require('express'),
cors = require('cors'),
http = require('http'),
path = require('path');
 
const mongoose = require('./Utilities/mongooseConfig')();
 
const loginRoute = require('./Routes/login'),
util = require('./Utilities/util'),
config = require("./Utilities/config").config;
 
//app.use(express.static('/public'))
app.use("/media", express.static(path.join(__dirname, '/public')));
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false }));
 
app.use(cors());
 
app.use(function(err, req, res, next) {
return res.send({ "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SOMETHING_WENT_WRONG });
});
 
app.use('/user', loginRoute);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next();
});
 
/*first API to check if server is running*/
app.get('/', function(req, res) {
res.send('hello, world!');
});
 
 
 
server.listen(config.NODE_SERVER_PORT.port,function(){
console.log('app listening on port:'+config.NODE_SERVER_PORT.port);
});
 

 

In the above file, We have required basic apps for creating nodejs application:

express: framework of nodejs to create APIs

body-parser: Will let us get parameters from input requests 

http: this module helps for creating for server

cors : for enabling cors, Its full form is Cross-Origin Resources Sharing

path:  is used for handling and transforming file paths

2.  Routes/login.js

 

 
let express = require('express'),
router = express.Router(),
util = require('../Utilities/util'),
loginService = require('../Services/login');
 
/* User Registration. */
router.post('/register', (req, res) => {
loginService.register(req.body, (data) => {
res.send(data);
});
});
 
/* User Login. */
router.post('/login', (req, res) => {
loginService.login(req.body, (data) => {
res.send(data);
});
});
 
/* get User profile. */
router.get('/get-profile', (req, res) => {
loginService.getProfile(req.query, (data) => {
res.send(data);
});
});
 
router.post('/forgot-password', (req, res) => {
loginService.forgotPassword(req.body, (data) => {
res.send(data);
});
});
 
router.get('/verify-forgot-link', (req, res) => {
loginService.verifyForgotLink(req.query, (data) => {
res.send(data);
});
});
 
router.put('/reset-password', (req, res) => {
loginService.resetPassword(req.body, (data) => {
res.send(data);
});
});
 
module.exports = router;
 

 

In the above file, We have set routing with the help of express routing. In this file we will set authentication for the apis. Also file uploading with be managed in this file.

3. Services/login.js

 

 
let async = require('async'),
parseString = require('xml2js').parseString;
 
let util = require('../Utilities/util'),
userDAO = require('../DAO/userDAO'),
config = require("../Utilities/config").config;
 
/* API to register new user */
let register = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
 
if (!data.email || !data.phone || !data.password) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
else {
let criteria = {
email: data.email
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
 
if (dbData && dbData.length) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.EMAIL_ALREADY_REGISTERED });
return;
}
let criteria2 = {
phone: data.phone
}
userDAO.getUser(criteria2, {}, {}, (err, dbData2) => {
if (dbData2 && dbData2.length > 0) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.PHONE_ALREADY_REGISTERED });
return;
}
else {
cb(null, dbData2);
return;
}
})
});
}
},
createUserinDB: ['checkUserExistsinDB', (cb, functionData) => {
if (functionData.checkUserExistsinDB && functionData.checkUserExistsinDB.statusCode) {
cb(null, functionData.checkUserExistsinDB);
return;
}
else {
let OTP = Math.floor(100000 + Math.random() * 900000);
let userData = {
"firstName": data.firstName ? data.firstName : '',
"full_name": data.lastName ? data.lastName : '',
"email": data.email,
"phone": data.phone,
"password": util.encryptData(data.password),
"status": true,
"otp": OTP,
"dateTimeOTP": Date.now()
}
 
userDAO.createUser(userData, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY });
return;
}
else {
// let link = config.NODE_SERVER_URL.url+":"+config.NODE_SERVER_PORT.port+"/student-auth/verify-email-link?email="+dbData.email+"&otp="+dbData.otp+"&auth=9876543wqasxcvbnjkikuytrd";
// util.sendActivationMail({ "baseUrl":config.NODE_SERVER_URL.url,"email": dbData.email, "OTP": dbData.otp,"link":link});
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.REGISTRATION_DONE, "result": dbData });
return;
}
});
}
}]
}, (err, response) => {
callback(response.createUserinDB);
});
}
 
/* API to login user */
let login = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
if (!data.email) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
var criteria = {
email: data.email
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
var criteria2 = {
email: data.email,
password: util.encryptData(data.password),
status: true
}
userDAO.getUser(criteria2, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.LOGGED_IN, "result": dbData[0] });
} else {
cb(null, { "statusCode": util.statusCode.NINE, "statusMessage": util.statusMessage.ENTER_VALID_CUSTOMERID_PASS });
}
});
 
} else {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.EMAIL_NOT_EXIST });
}
});
 
}
}, (err, response) => {
callback(response.checkUserExistsinDB);
})
}
 
/* API to send email on forgot password request */
let forgotPassword = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
if (!data.email) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
let criteria = {
email: data.email,
status: true
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
const token = new Date().getTime();
let criteria2 = {
email: data.email,
}
let dataToSet = {
$set: {
token: token
}
}
userDAO.updateUser(criteria2, dataToSet, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
let link = config.NODE_SERVER_URL.url + ":" + 4200 + "/authentication/verify-email-link?email=" + dbData.email + "&token=" + dbData.token + "&auth=9876543wqasxcvbnjkikuytrd";
util.sendForgotMail({ "email": dbData.email, "link": link });
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.MAIL_SENT_FORGOT_PASSWORD });
});
 
} else {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.EMAIL_NOT_EXIST });
}
});
 
}
}, (err, response) => {
callback(response.checkUserExistsinDB);
})
}
 
let verifyForgotLink = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
if (!data.email) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
let criteria = {
email: data.email,
token: data.token
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.VALID_LINK });
} else {
cb(null, { "statusCode": util.statusCode.FOUR_ZERO_ONE, "statusMessage": util.statusMessage.INVALID_LINK });
}
});
 
}
}, (err, response) => {
callback(response.checkUserExistsinDB);
})
}
 
let resetPassword = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
if (!data.email) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
let criteria = {
email: data.email,
token: data.token
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
let criteria2 = {
email: data.email,
}
 
let passwordEncoded = util.encryptData(data.password);
let dataToSet = {
$set: {
token: 0,
password: passwordEncoded
}
}
userDAO.updateUser(criteria2, dataToSet, {}, (err, dbData) => {
if (err) {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.PASSWORD_UPDATED });
});
} else {
cb(null, { "statusCode": util.statusCode.ONE, "statusMessage": util.statusMessage.INVALID_LINK });
}
});
 
}
}, (err, response) => {
callback(response.checkUserExistsinDB);
})
}
 
/*API to get profile data... */
let getProfile = (data, callback) => {
async.auto({
checkUserExistsinDB: (cb) => {
if (!data.userId) {
cb(null, { "status": util.statusCode.ONE, "statusMessage": util.statusMessage.PARAMS_MISSING })
return;
}
var criteria = {
_id: data.userId
}
userDAO.getUser(criteria, {}, {}, (err, dbData) => {
if (err) {
cb(null, { "status": util.statusCode.ONE, "statusMessage": util.statusMessage.SERVER_BUSY })
return;
}
if (dbData && dbData.length) {
cb(null, { "status": util.statusCode.ONE, "statusMessage": util.statusMessage.SUCCESS, "result": dbData[0] });
 
} else {
cb(null, { "status": util.statusCode.ONE, "statusMessage": util.statusMessage.ID_NOT_EXIST });
}
});
 
}
}, (err, response) => {
callback(response.checkUserExistsinDB);
})
}
 
module.exports = {
register: register,
login: login,
getProfile: getProfile,
forgotPassword: forgotPassword,
verifyForgotLink: verifyForgotLink,
resetPassword: resetPassword
};
 

 

In the above file, We have the main logic for the APIs. We have login, register, getProfile, forgotPassword, verifyForgotLink, resetPassword. In the above APIs we have used async package of npm.

These are the main files where the logic for API is written. For complete code you can download code. 

 

Create Client with angular

At first,  We have to update the Angular CLI to the latest version. Open the  terminal then go to the project folder and then type the  below command to update the Angular CLI.

sudo npm install -g @angular/cli

 

Once the above task finishes, Next task is to create new angular application with below command. So go to your project folder and then type below command:

ng new angular6-login-registration-app

 

then go to the newly created folder of angular application with cd /angular6-login-registration-app  and type ng serve. Now, open the browser then go to http://localhost:4200 you should see this page. 

 

Now we will create components for home,login, register, profile, forgot-password, reset-password, common-nav, header, footer.

Once creating the above components with ng generate component, we need service for making http request for calling APIs.

 

Now let's have a look over app.module.ts 

 

 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
//import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
 
import { CommonNavComponent } from './common-nav/common-nav.component';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
 
import { UserAuthGuardService } from './user-auth-guard.service';
import { RegisterComponent } from './register/register.component';
import { AuthService } from './services/auth.service';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
 
import { ConfirmEqualValidatorDirective } from './_directive/confirm-equal-validator.directive';
 
@NgModule({
declarations: [
AppComponent,
LoginComponentComponent,
RegisterComponent,
HomeComponent,
CommonNavComponent,
HeaderComponent,
FooterComponent,
ForgotPasswordComponent,
ResetPasswordComponent,
ConfirmEqualValidatorDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
// HttpModule,
HttpClientModule
],
providers: [UserAuthGuardService, AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }
 

 

Now, Let's have a look over routing file:

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserAuthGuardService } from './user-auth-guard.service';
import { LoginComponentComponent } from './login-component/login-component.component';
import { RegisterComponent } from './register/register.component';
import { HomeComponent } from './home/home.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';


 
const routes: Routes = [ {
path: 'login',
component: LoginComponentComponent,
},
{
path: '',
redirectTo:'/login',
pathMatch : 'full'
},
{
path: 'home',
component: HomeComponent,
canActivate: [UserAuthGuardService]
},
{
path: 'register',
component: RegisterComponent
 
},
{
path: 'forgot-password',
component: ForgotPasswordComponent
},
{
path: 'authentication/verify-email-link',
component: ResetPasswordComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
 

 

In the above file we can see auth guard used for user authentication pages after login. Have a look code for auth,

 

 
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
 
@Injectable({
providedIn: 'root'
})
export class UserAuthGuardService implements CanActivate {
 
constructor(private router: Router) { }
 
canActivate() {
if (localStorage.getItem('user_data')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page
this.router.navigate(['/login']);
return false;
}
}
 

 

Now, Let's have a look over service file.

 

 
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import { HttpClient,HttpHeaders } from'@angular/common/http';
 
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
 
@Injectable()
export class AuthService {
constructor(private _router: Router, private http: HttpClient){}
 
logout() {
localStorage.removeItem('user_data');
this._router.navigate(['login']);
}
 
 
// login user
login(user) : Observable<any[]>{
let data = { email: user['email'], password: user['password']};
let bodyString = JSON.stringify(data);
let headers = new HttpHeaders().set('Content-Type','application/json ');
return this.http.post<any[]>(environment.apiUrl+"/user/login",bodyString,{headers});
 
}
 
// register api
register(user) : Observable<any[]>{
let bodyString = JSON.stringify(user);
let headers = new HttpHeaders().set('Content-Type','application/json ');
return this.http.post<any[]>(environment.apiUrl+"/user/register",bodyString,{headers});
}
// reset password---
resetPassword(email,token, password) : Observable<any[]>{
let data ={ email: email, password: password.password,token:token};
let bodyString = JSON.stringify(data);
let headers = new HttpHeaders().set('Content-Type','application/json ');
return this.http.put<any[]>(environment.apiUrl+"/user/reset-password",bodyString,{headers});
 
}
 
// get user list
getUsers() : Observable<any[]>{
return this.http.get<any[]>("https://jsonplaceholder.typicode.com/users");
}
 
verifyForgotLink(email,token) {
return this.http.get<any[]>(`http://localhost:3000/user/verify-forgot-link?email=${email}&token=${token}`);
}
 
// forgot password
forgotPassword(user) : Observable<any[]>{
let data = { email: user['email']};
let bodyString = JSON.stringify(data);
let headers = new HttpHeaders().set('Content-Type','application/json ');
return this.http.post<any[]>(environment.apiUrl+"/user/forgot-password",bodyString,{headers});
 
}
 
}
 

 

In the above file, We have set methods for calling the APIs.

Now find the code for components in the source code available below.

 

After making all the needed task, When we run the app over the browser, the app will run with the login screen. Start both the angular app and nodejs app with npm start on seperate tab of terminal. You will see screen like below:

 

Conclusion

In this demo,We learn to start creating user login registration in angular6.

That’s all for now. Thank you for reading and I hope this post will be very helpful for start working on angular app.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

angular6 login registration app sample app

Find other similar Articles here:

CATEGORIES
INTERVIEW QUESTIONS