Leverage jsencrypt in Ionic 3

Struggling to hash passwords for login on my Ionic 3 app, I attempted using jsencrypt following a tutorial but encountered issues as I couldn't grasp how it works...

Here's what I tried :

npm install --save jsencrypt

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiDatabaseService } from '../../providers/api-database-service';
import Encrypt from 'jsencrypt';
import { Injectable } from '@angular/core';

@Component({
  selector: 'page-Login',
  templateUrl: 'Login.html'
})

@Injectable()

export class LoginPage {

  private prem: string = `my_key`;
  Users:any = []; // Contains all users 

  constructor(public navCtrl: NavController, public serviceOne: ApiDatabaseService) {
    this.serviceOne.getDataUser().subscribe( // Calling API to access database
            data => this.Users = data
        );
  }

  public create(name: string): string { // Password encryption function
        let encrypt = new Encrypt.JSEncrypt();
        encrypt.setPublicKey(this.pem);
        return encrypt.encrypt(name);
    };
}

Encountering this error :

Typescript Error
Property 'pem' does not exist on type 'LoginPage'.

Additionally, while Ionic 2 has extensive documentation like , there seems to be a lack of resources for Ionic 3, which is puzzling.

Answer №1

Revise the given instruction

encrypt.setPublicKey(this.pem);

With

encrypt.setPublicKey(this.prem);

Answer №2

When you utilize the Ionic service, your application transmits your unencrypted password to Ionic's server during account creation and login processes. The authentication service will take care of all encryption procedures.

Furthermore, there isn't a separate documentation specifically for Ionic 3 since it shares many similarities with Ionic 2, although there have been some enhancements and bug fixes incorporated. While there have been a few alterations that may cause disruptions, they are not extensive. Unlike the transition from Ionic 1 to Ionic 2, which involved a complete overhaul, the move to Ionic 3 is more seamless. Additionally, Ionic has adopted semantic versioning, making major updates more frequent, akin to Angular's development cycle.

Answer №3

updates must be made

private prem: string = `my_key`;

change to:

`private pre: string = `my_key`;

Answer №4

modify the following line

private prem: string = `my_key`;

to read as

private pem: string = `my_key`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is TextAngular not working as intended?

Recently, I made the switch from using summernote to angularText as my HTML editor. While everything worked perfectly with summernote, I encountered a major issue with angularText. Upon opening the editor, all the previously entered HTML content from summ ...

Typescript error handling: Handle 404s on all Koa routes

Issue Encountering problems while setting up Auth Controllers Difficulty using Bcrypt and JWT for encryption All POST Calls to Koa resulting in 404 errors Calls to other routes are functioning correctly Potential issue with the scope of the code. impo ...

Tips for optimizing the use of ES6 imports in an AngularJS application

When it comes to ES5, most individuals tend to include all their components using HTML tags like <script src="app/listCtrl.js"></script> and then attach the component in the same file where it was declared. The process isn't as straightfo ...

Manipulating arrays of objects using JavaScript

I am working with an array of objects represented as follows. data: [ {col: ['amb', 1, 2],} , {col: ['bfg', 3, 4], },] My goal is to transform this data into an array of arrays like the one shown below. [ [{a: 'amb',b: [1], c ...

Avoiding useCallback from being called unnecessarily when in conjunction with useEffect (and ensuring compliance with eslint-plugin-react-hooks)

I encountered a scenario where a page needs to call the same fetch function on initial render and when a button is clicked. Here is a snippet of the code (reference: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx): import ...

Utilizing the URL path name for data retrieval in Next.js 14 - A step-by-step guide

I'm currently developing a blog using AWS Amplify Gen 2 and GraphQL for a Next.js 14 project with TypeScript. As part of my application, I need to fetch specific data based on the URL path name. Here's how I've approached it: My approach in ...

Utilize interface as a field type within a mongoose Schema

I am currently working with typescript and mongoose. I have defined an interface like this: interface Task { taskid: Boolean; description: Boolean; } My goal is to create a schema where one of the fields contains an array of Tasks: const employeeSche ...

Looking for assistance with my MEAN stack To Do App project development

For a test at an enterprise, I have been tasked with creating a "to do APP" using Node js, Express, MongoDB & Angular Js. This is new territory for me as I have never worked with the MEAN Stack before but I am excited to explore it! The base project has al ...

Tips for incorporating flow and TypeScript typings into an NPM module

Are there any resources available for adding both flow and typescript typings to an NPM module at the same time? I've been struggling to find a comprehensive guide on this topic, and it seems to be a common issue faced by open source library maintain ...

The first argument passed to CollectionReference.doc() must be a string that is not empty

I'm facing an issue with my Ionic app while attempting to update records in Firebase. The error message I keep encountering has me stumped as to where I might be going wrong. Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Functi ...

Error message appears when using TypeScript with a React Material table showing a generic type error

I am currently attempting to implement react-material in a Typescript project. As a newcomer to Typescript, I am encountering some errors that I am unsure how to resolve. In this gist, I am trying to create a reusable React component (Please view the gis ...

Create a dynamic Prisma data call by using the syntax: this.prisma['dataType'].count()

I'm currently working on implementing a counting function that can be utilized in all of my objects. In my 'core' file, Prisma is involved in this process. This allows me to execute commands like this.user.count() or this.company.count() I ...

Creating JSON arrays for multiple elements using the same model name

I am using Angular to generate JSON data for multiple elements. Currently, the output looks like this: {"field":{"name":{"0":"a","1":"b"},"length":{"0":10,"1":20}}} However, I would like the JSON data to be more sophisticated and in array form, like this ...

Ways to navigate private property using the App Component in Angular 4

I have successfully implemented code in my app component to retrieve the current URL and display it in app.component.html. app.component.ts import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Compone ...

Difficulties with angular ui-router authentication problems

When setting notify to true, the login.html does not render - it shows up as a blank page. However, if set to false, I receive multiple errors in the console: RangeError: Maximum call stack size exceeded at $.resolve (angular-ui-router.min.js:1) a ...

Transitioning from ng-repeat filter to Typescript

As I migrate my project from AngularJS to modern Angular 8, one of the steps is converting JavaScript code to TypeScript. During this process, I encountered a challenging issue with the `ng-repeat` filter feature. Initially, my HTML template looked like t ...

iPhone failing to interpret HTML entities

I am currently developing a website for a client, who is facing a bug that I have not been able to replicate... For reference, here is an example page: The issue my client is experiencing involves using an iPhone to navigate the website. It appears that ...

Uniform retrieval function for interaction with API

I have developed my server backend using PHP and now I am looking to establish communication between the frontend (typescript) and backend. For each of my API requests, I desire to receive a standardized response. Hence, every response from the server fol ...

The rendered output from ThreeJs OBJLoader appears quite distorted with noticeable pixelation

I'm currently attempting to load a .obj file using the OBJLoader in an AngularJS application. However, the output appears very pixelated. https://i.sstatic.net/eRnmg.png I've tried adjusting the camera position and perspective (codes are commen ...

Using TypeORM to Retrieve Data from Many-to-Many Relationships with Special Attributes

Hey there, I'm diving into the world of TypeORM and could really use some guidance. I've been attempting to set up many-to-many relationships with custom properties following the instructions provided here However, I've run into a few iss ...