Why can't I set persistence even though login functions work with Firebase?


#1

I have a component with a form that holds the email and password. Imports at the top:

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';
import * as firebase from 'firebase';

Next, I inject the service for the firebaseApp and session (session just has some attrs that I set to tell the app we’re authenticated – these will be refactored later):

session: service(),
firebaseApp: service(),

If I pass these values into the signInWithEmailAndPassword() function from fbApp.auth(), the account is validated and logged in. Works as expected:

login() {
  const session = this.get('session');
  const fbApp = this.get('firebaseApp');
  const e = this.get('form.email');
  const p = this.get('form.password');

  fbApp.auth().signInWithEmailAndPassword(e, p).then(u => {
    session.set('user.email', u.email);
    session.set('user.signedIn', true);
    this.get('goHome')(); // route transition to home
  }).catch(e => {
    this.set('error', 'Something went wrong. Try again?');
  });
}

Next, I wanted to persist the session so that the user is not logged out on refresh, only if the tab is closed. So I modified the code and wrapped the signInWithEmailAndPassword in with setPersistence as follows:

login() {
  const session = this.get('session');
  const fbApp = this.get('firebaseApp');
  const e = this.get('form.email');
  const p = this.get('form.password');
    
  fbApp.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
              .then(()=> {

    fbApp.auth().signInWithEmailAndPassword(e, p).then(u => {
      session.set('user.email', u.email);
      session.set('user.signedIn', true);
      this.get('goHome')(); // route transition to home
    }).catch(e => {
      this.set('error', 'Something went wrong. Try again?');
    });

  }).catch(e => {
    this.set('error', 'Something went wrong. Try again?');
  });
}

This doesn’t work. I get a Cannot read property 'SESSION' of undefined error in the console. I’m sure it has to do with how firebase is imported but I’m having trouble with it.


#2

Worth checking – what version of the library are you using? I’ve found at least two similar problems that were apparently solved by upgrading to the latest version of firebase library.