Cannot read property 'set' of undefined(…) Secure Storage Ionic

[cristianchaparroa]

Actually I’m working with ionic 2 and Secure Storage, What I did, first of all

ionic plugin add cordova-plugin-secure-storage

After I installed the plugin,

import { Component }        from '@angular/core';
import { NavController }    from 'ionic-angular';
import { Platform}          from 'ionic-angular';
import { AlertController }  from 'ionic-angular';

import { Facebook}          from 'ionic-native';
import { SecureStorage }    from 'ionic-native';

import { TourPage }         from '../tour/tour';
import { HomePage }         from '../home/home';
import { LoginService }     from './login.service';


@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  providers: [LoginService]
})
export class LoginPage {
  tourPage = TourPage;
  secureStorage:SecureStorage = new SecureStorage();

  constructor(public nav: NavController,
              public alert: AlertController,
              public loginService:LoginService
             ) {

    this.secureStorage.create('mibank').then(
      () => console.log('Storage is ready!'),
      error => console.log(error)
    );
  }

  loginFb(){
    ...

    var self = this;
    self.loginService.register(token).subscribe(
        (user)=>{ self.saveUser(user)},
        error => console.error(`Error: ${error}`));
  }    

  saveUser(user:any) {
    console.log('save user...',user);
    this.secureStorage.set('token',user.token).then(
        data => {
            return this.secureStorage.get('tourShown');
        },
        error => console.log(error)
    ).then( (tourShown)=> {
        console.log('is tour shown?: ',tourShown);
        if(tourShown){
          this.nav.setRoot(HomePage);
        }else{
          this.nav.setRoot(TourPage);
        }
    });
  }
}

I always get the error

Cannot read property 'set' of undefined(…)

What is wrong in the above code?

[rapropos]

One thing that’s wrong is having providers in the @Component decoration.

[Un3qual]

I’m also having this issue. The full error message that I’m getting is:

10    564596   error    EXCEPTION: undefined is not an object (evaluating 'this.secureStorage.set')
11    564596   error    ORIGINAL STACKTRACE:
12    564597   error    storeDataAfterLogin@http://10.11.132.44:8100/build/main.js:9:25716
http://10.11.132.44:8100/build/main.js:9:24724
__tryOrUnsub@http://10.11.132.44:8100/build/main.js:15:23909
next@http://10.11.132.44:8100/build/main.js:15:23263
_next@http://10.11.132.44:8100/build/main.js:15:22574
next@http://10.11.132.44:8100/build/main.js:15:22246
d@http://10.11.132.44:8100/build/main.js:14:6389
invokeTask@http://10.11.132.44:8100/build/polyfills.js:3:14034
onInvokeTask@http://10.11.132.44:8100/build/main.js:38:632
invokeTask@http://10.11.132.44:8100/build/polyfills.js:3:13977
runTask@http://10.11.132.44:8100/build/polyfills.js:3:11399
invoke@http://10.11.132.44:8100/build/polyfills.js:3:15149
13    564598   error    TypeError: undefined is not an object (evaluating 'this.secureStorage.set'), http://10.11.132.44:8100/build/main.js, Line: 15

private secureStorage;

  constructor(public http: Http) {
    let secureStorage: SecureStorage = new SecureStorage();
  secureStorage.create('blabbr')
   .then(
     () => console.log('Storage is ready!'),
     error => console.log(error)
  );
  }
storeDataAfterLogin(accessToken, userId) {
    this.secureStorage.set('apiAccessToken', accessToken);
    this.secureStorage.set('apiUserId', userId);
  }

[litunny]

Hi Team, I’m also having the same error message “Runtime Error
Uncaught (in promise): TypeError: Cannot read property ‘get’ of undefined”, any fix yet?

[skyrocket777]

@Un3qual

private secureStorage;

Hi, wondering if you fixed the problem? Cuz I’m experiencing the same issue. Greetings

[qngtyde]

I get this when I’m running ionic serve. When running using the emulator it seems to work.

[cristianchaparroa]

Yes, basically I change Secure storage to Storage, so

1. Use import { Storage } from '@ionic/storage' instead of import { SecureStorage } from 'ionic-native';

2. The constructor look like

  constructor(public nav: NavController, public storage:Storage) {
    this.storage.set('your_key','your_value');
  }