nativeStorage getItem not working

Hi guys,

I’m using nativeStorage to get and set a password. It was totally working 2 days ago.
I uninstalled my app, re-installed it --> not working anymore.

It said that my ‘password’ is undefined.

It doesn’t go in my :

nativeStorage.getItem('password').then(data=>
       {
         if (data)
         {
           this.pwd = data;
         }
         else
         {
           this.nativeStorage.setItem('password', md5("PwD"));
           this.pwd = md5("PwD");
         }
       });

But it goes in my constructor. There is my full code :

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { md5 } from './md5';
import { NativeStorage } from '@ionic-native/native-storage';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage 
{
     private username = "Admin";
     private pwd: string;
     private password: string;

     constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage) 
     {
       nativeStorage.getItem('password').then(data=>
       {
         if (data)
         {
           this.pwd = data;
         }
         else
         {
           this.nativeStorage.setItem('password', md5("PwD"));
           this.pwd = md5("PwD");
         }
       });
     }

     protected checkLogin(formValues : any[])
     {
          if (formValues['name'] == this.username)
          {
            if (md5(formValues['password']) == this.pwd)
            {
              this.navCtrl.setRoot(HomePage);
            }
            else
            {
              alert ("Password is incorrect");
            }
          }
          else
          {
            alert ("Username is incorrect");
          }
     }
}

I knew that I didn’t change anything on this page. I check my commit in Bitbucket.
I also tried remove and re-add package.

Please help me, I need it to work today :confounded:

Thank you in advance for your time

Please post the exact error message.

By adding the Error return with the alert and the alert(this.pwd) like this :

constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage) 
     {
       
       nativeStorage.getItem(this.password).then(data=>
       {
         if (data)
         {
           this.pwd = data;
         }
         else
         {
           this.nativeStorage.setItem('password', md5("MdP"));
           this.pwd = md5("MdP");
         }
       }); (error) => {
         alert(error);
       }

       alert(this.pwd);
     }

I only receive one alert (not the error one)
alert(this.pwd) -->
Alert
Undefined

So when I try to login, the password check says : Password is incorrect

@Sujan12

1 Like

As setItem is an asynchronous method you can’t expect it to be set.
Especially as alert(this.pwd) will even be executed before getItem (which of course is also async) is done.

Alright but… It was working exactly like this 2 days ago. I didn’t change anything :neutral_face:

Why isn’t the getItem executed before the Alert, especially if it it asynchronous

@Sujan12

Because it is asynchronous. The code behind it can be executed before the code inside it. That’s the definition.

If it worked before you were lucky.

I understand that the alert returns ‘undefined’ because executed before the other part but I don’t get why the nativeStorage part doesn’t execute correctly.

The alerts I set in the if / else part never happens no matter what, like if the code doesn’t go in my “data” part, I don’t get why.

@Sujan12

There are no alerts (should better be console.log by the way) inside nativeStorage.getItem.

I use alerts because I test on my smartphone.

nativeStorage.getItem('password').then
       ((data) =>
       {
          alert ("in data");

          if (data)
          {
           alert("in the if");
           alert (data);
           this.pwd = data;
         }
         else
         {
           nativeStorage.setItem('password', md5("MdP"));
           this.pwd = md5("MdP");
         }
       }), error => {
         alert(error);
       };

It there is no problem with this. I can’t use the console.log because I don’t have the console on my phone.

You can also use dev tools for the device:

Follow these instructions here to debug the problem in Safari dev tools: Remote Debug your Ionic App · ionic.zone
Follow these instructions here to debug the problem in Chrome dev tools: Remote Debug your Ionic App · ionic.zone

Not necessarily, but alert stop code execution until dismissed - which might make your problems even worse.

Alright there is the console info :

main.js:1362 ERROR Error: Uncaught (in promise): [object Object]
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (main.js:4418)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at < anonymous >

and
Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
and
deviceready has not fired after 5 seconds.
Ionic Native: deviceready event fired after 35347 ms

THIS IS VERY IMPORTANT

Do not store authentication information on device.

Redesign the architecture so that this is not needed.

Do not use MD5 anywhere for anything

Alright, but what is the problem about that ?
@rapropos

Anybody that gets access to the device in an unlocked state has access to that password. Study after study has shown that people tend to reuse passwords, so this potentially means that your insecurely designed app could be responsible for people’s email, bank accounts, or medical records being compromised.

This post explains why MD5 is a bad choice for password hashing no matter where things are stored, and suggests several better alternatives. I use bcrypt.

2 Likes