Storing Login Details Using Cookies

In this article I will be explaining about Angular cookies. So what is a cookie? Cookies are like a small package of information that is stored by the user’s browser. Cookies persist across multiple requests and browser sessions that should be set so that they can be a great method for authentication in web applications. Sometimes we will have some queries about which is to be used -- either local storage or cookies? Before that, I like to say that the cookies and local storage serve different purposes.

 

The local storage can be read on the client-side, whereas the cookies are being read on the server-side. The biggest difference is the data size is about to store, the local storage will give more space to store, whereas the cookie is limited by the size of to store.

 

As I said above the cookies are used on the server-side whereas the local storage is used on the client-side. The local storage is a way of storing the data in the client’s PC, by saving the key/ value pair in a web browser with no expiration date. We will discuss about using local storage in the next article, so coming to the point, as I said the cookies are a kind of small file that are stored on the user’s browser.

 

The cookie is a small table which will contain key and data values so,  by using this it will be very useful to carry information from one session to another session. Once we are about to store data on the server without using cookies then it will be difficult to retrieve a particular user’s information without a login on each visit to that website.

 

So far we have seen about the overview of a cookie and the usage of it. Now in this article, I will explain about storing the username and password of a static user in the cookie table. So, I have created two components, namely the login component and dashboard component, and I have set a static username and password in authservice.ts file.

 

So, when a user logs in to the login form by providing his user’s credentials the authservice checks the input and redirects the user to the dashboard if the user’s credentials are valid. If the user’s credentials are not valid it will alert by throwing enter valid email or password. And if the dashboard page is being accessed by unauthorized usage the page will be redirected to the login page automatically.

 

Setting up

 

In order to use cookies in Angular, we need to install the Angular cookie library by using the following npm package manager.

 

npm install ngx-cookie-service –save

 

After installing the package manager, we need to import the cookie service in the inside of our modules.

 

I have used the ng zorro library UI for form design, and you can find more information about ng zorro from the following link. The next step is to design a login form. So, open login.component.html file and replace the following code.

<form fxFill #Login="ngForm" (ngSubmit)="onsubmit()">
    <div nz-row>
        <div nz-col nzMd="12" nzXs="24">
            <hr />
            <nz-form-item>
                <nz-input-group>
                    <div nz-col nzMd="11" nzXs="8">
                        <nz-input-group nzPrefixIcon="user">
                            <input type="text" nz-input name="Login_name" placeholder="User Name" id="userName"

#userName="ngModel" [(ngModel)]="Obj.username">
                            </nz-input-group>
                            <div *ngIf="Login.submitted && userName.errors" style="color: red">
                                <div *ngIf="userName.hasError('required')">

Login ID is required

</div>
                            </div>
                        </div>
                    </nz-input-group>
                </nz-form-item>
                <nz-form-item>
                    <div nz-col nzMd="11" nzXs="8">
                        <nz-input-group nzPrefixIcon="lock">
                            <input type="password" nz-input name="user_password" placeholder="Password"

id="password" #password="ngModel" [(ngModel)]="Obj.password">
                            </nz-input-group>
                            <div *ngIf="Login.submitted && password.errors" style="color: red">
                                <div *ngIf="password.hasError('required')">

Password is required

</div>
                            </div>
                        </div>
                    </nz-form-item>
                    <div class="button">
                        <button nz-button nzType="primary">

submit

</button>
                    </div>
                </div>
            </div>
        </form>

Now open login.component.ts file and replace the following code in it.

import {
    Component,
    OnInit
} from '@angular/core';
import {
    FormGroup
} from '@angular/forms';
import {
    AuthService,
    User
} from '../services/authservice.service';
import {
    Router,
    ActivatedRoute
} from '@angular/router';
import {
    CookieService
} from 'ngx-cookie-service';
@Component({
    selector: 'nz-demo-card-simple',
    templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
    Obj: User;
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {
        this.Obj = new User();
    }
    ngOnInit(): void {}
    onsubmit(): void {
        this.cookieService.set('username', this.Obj.username);
        this.cookieService.set('password', this.Obj.password);
        console.log(this.cookieService.get('username'));
        console.log(this.cookieService.get('password'));
        const a = this.Obj;
        if (this.srvLogin.checkLogValues(this.Obj)) {
            this.srvLogin.isloggedin = true;
            console.log(this.srvLogin.isloggedin);
            this.router.navigate(['/dashboard']);
        }
    }
}

The next point is to create an authentication service, we can create a service file by using the syntax.

 

ng generate service AuthService

 

The service name which I have given is Authservice and the service will be created and I have provided a default static username and password in service file so that the validation will be executed and redirected to another page (dashboard page) if the user’s credentials are being valid. Open Authservice service.ts file and replace the following code and import it in both service and as well in app-module.ts file.

import {
    Injectable
} from '@angular/core';
import {
    HttpClient
} from '@angular/common/http';
import {
    CookieService
} from 'ngx-cookie-service';
@Injectable({
    providedIn: 'root'
})
export class AuthService {
    private username = 'vidya';
    private password = '123456';
    isloggedin = false;
    constructor(private http: HttpClient) {}
    checkLogValues(value: User): boolean {
        if (this.username === value.username && this.password === value.password) {
            console.log(this.username);
            console.log(this.password);
            // alert('Login valid');
            return true;
        } else {
            alert('please enter valid data');
            return false;
        }
    }
}
export class User {
    username: string;
    password: string;
}

After that create a component named as dashboard and open dashboard.component.html file and replace the following code.

<h3>Hello {{userDisplayName}} you are in Dashboard </h3>
<div style="text-align:right">
   <button nz-button nzType="danger" (click)="logout()">Logout</button>
</div>

The next step is to open dashboard.component.ts file and replace the following code inside it.

import {
    Component,
    OnInit
} from '@angular/core';
import {
    AuthService,
    User
} from '../services/authservice.service';
import {
    Router,
    ActivatedRoute
} from '@angular/router';
import {
    CookieService
} from 'ngx-cookie-service';
@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
    Obj: User;
    [x: string]: any;
    userDisplayName = '';
    password = '';
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {
        this.Obj = new User();
        this.userDisplayName = this.cookieService.get('username');
        this.password = this.cookieService.get('password');
        this.Obj.username = this.userDisplayName;
        this.Obj.password = this.password;
        if (!srvLogin.checkLogValues(this.Obj)) {
            router.navigate(['/login']);
        }
    }
    ngOnInit(): void {}
    logout(): void {
        this.router.navigate(['/login']);
        this.cookieService.deleteAll();
    }
}

 

 

The following next step is to log in to the dashboard by providing the user’s credentials and after the valid login, we can see the user’s name in dashboard as a welcome note by using the user’s login name. So, after entering into the dashboard page open the developer’s tool in the browser and navigate -> Application and select cookies from storage. So, on that, we can see the user name and password have been stored in the cookie table.

 

 

 

So  far we have seen about storing the user’s details in the cookie table and now we can take an overview on clearing the cookies in the cookie table; for that use deleteall() method for clearing the cookies table if  the user is about to click-> logout button.

 

Conclusion

 

In this article we have seen about using cookies in Angular for storing user’s credentials. I hope this article will be useful for you.