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.