How To Data Encrypt And Decrypt In Angular

The Code Points August 19, 2022 0

In this article, we learn how to data encrypt and decrypt it in Angular using Crypto js. As we all know, important user data must be encrypted in modern web construction in order to improve security.

What is Data Encryption?

In the process of encryption, plain text is transformed into Ciphertext, an unintelligible format. This aids in preserving the privacy of digital data that is either transported over a network like an internet or saved on computer systems.

What is Data Decryption?

Decryption is the process of taking Ciphertext and turning it into Plaintext, which can be read.

The same key that we use to encrypt data is also used to decode data. This means that both data encryption and decryption require the use of the same key.

Let's use an example to better comprehend it.

Use this command to first start a new project in Angular.

ng EncryptionDecryptionApp

Add the following code under the AppModule.ts file.

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, add the following code under the EncryptionServiceService.ts.

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class EncryptionServiceService {

  key: string = "z!!!!!!!1sdfadsf56adf456asdfasdf";
  appProperties = {
    VALUES: {
      KEY: "MTIzNDU2Nzg5MEFCQ0RFRkdISUpLTE1O",
      IV: "MTIzNDU2Nzg="
    }
  }

  constructor() { }

  encryptionAES(encryptStr: any) {
    // Encrypt
    const ciphertext = CryptoJS.AES.encrypt(encryptStr, 'secret key 123');
    return ciphertext.toString();
  }

  decryptionAES(decryptStr: any) {
    // Decrypt
    const bytes = CryptoJS.AES.decrypt(decryptStr, 'secret key 123');
    const plaintext = bytes.toString(CryptoJS.enc.Utf8);
    return plaintext;
  }
}

Now, add the following code to the AppComponent.ts file.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EncryptionServiceService } from './encryption-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  encryptpassword: string | any;
  decryptpassword: string | any;
  encryptForm = new FormGroup({
    encryptStr: new FormControl(),
    decryptStr: new FormControl()
  });

  decryptForm = new FormGroup({
    decryptStr: new FormControl()
  });

  constructor(private encrypt: EncryptionServiceService) { }

  ngOnInit() {
  }

  encryptData() {
    this.encryptpassword = this.encrypt.encryptionAES(this.encryptForm.value.encryptStr);
  }
  decryptData() {
    this.decryptpassword = this.encrypt.decryptionAES(this.encryptpassword);
  }
}

Finally, add the following code into the app.component.html file where we perform the  Encrypt And Decrypt operation.

<div class="container">
    <div class="row">
        <div class="col-10">
            <div class="jumbotron">
                <h2>How To Data Encrypt And Decrypt In Angular</h2>
                <form name="encryptForm" [formGroup]="encryptForm" (ngSubmit)="encryptData()">
                    <div class="form-group">
                        <label for="text">Plain text</label>
                        <input type="text" class="form-control" formControlName="encryptStr" />
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Encrypt</button>
                    </div>
                    <label>Output: {{encryptpassword}}</label>
                </form>
                <hr>
                <form name="decryptForm" [formGroup]="decryptForm" (ngSubmit)="decryptData()">
                    <div class="form-group">
                        <label for="text">Encrypted text</label>
                        <input type="text" class="form-control" formControlName="decryptStr"
                            value="{{encryptpassword}}" />
                    </div>
                    <div class="form-group">                                            
                        <button class="btn btn-primary">Decrypt</button>
                    </div>
                    <label>Output: {{decryptpassword}}</label>
                </form>
            </div>
        </div>
    </div>
</div>

Now, Add this CDN under the index.html file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Now, run the application and see what the output screen that looks like below.

Conclusion

In this article, we learned how to encrypt and decrypt data in Angular using examples. The code is available on my Github.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.