Polymer 2.0: accessing authentication information in subclass - polymer-2.x

Question

I use polymerfire authentication in a parent class. After successful authentication I wish to access the email attribute in a subclass.
Problem: the authentication information is not available in the subclass.
I use polymer 2.2.0.
Here is the parent class:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-loginparent">
<template>
<style include="shared-styles">
:host { display: block; padding: 10px; }
</style>
<firebase-app
auth-domain="....firebaseapp.com"
database-url="....firebaseio.com/"
api-key="..."
storage-bucket="....."
messaging-sender-id=".."
project-id="..">
</firebase-app>
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
signed-in="{{signedIn}}"
status-known="{{statusKnown}}"
on-error="showError">
</firebase-auth>
<div class="card">
<div hidden$="[[user]]">
<h1>Login: Please select a login method</h1>
<div class="error" hidden$="[[!error]]">[[error.code]]: [[error.message]]</div>
<h3>b) Login with Google</h3>
<p>
<paper-button raised class="green" on-tap="mrLoginGoogle">Sign in with Google</paper-button>
</p>
</div>
</div>
</template>
<script type="text/javascript">
class MyLoginparent extends Polymer.Element {
static get is() { return 'my-loginparent'; }
static get properties() {
return {
user: { type: Object },
loggedin: { type: String, value: 'no'}
};
}
mrLoginGoogle() {
this.error = null;
this.authe = null;
this.$.auth.signInWithPopup()
.then(function (result) {
console.log('loginparent -> auth success: ' + result.user.email); // Works
})
.catch(function (error) {
console.log('loginparent -> auth fail: ' + error.code + "; " + error.message);
});
}
}
window.customElements.define(MyLoginparent.is, MyLoginparent);
Here is the childclass / subclass:
<link rel="import" href="my-loginparent.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<dom-module id="my-edt">
<template>
<style include="shared-styles">
:host { display: block; padding: 10px; }
</style>
<my-loginparent></my-loginparent>
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/edt/:eid" data="{{routeData}}">
</app-route>
<h2>User: [[user.email]]</h2>
</template>
<script>
class MyEdt extends MyLoginparent {
static get is() { return 'my-edt'; }
constructor() {
super();
}
ready() {
super.ready();
console.log("my-edt: ready: " + JSON.stringify(this.user) ); // result: undefined
console.log("my-edt: super-ready loggedin: " + this.loggedin); // no --> okay
}
}
window.customElements.define(MyEdt.is, MyEdt);
</script>
</dom-module>
The authentication in the parent class works.
In the child class the console.log shows "undefined" and no value in h2 user.email is shown.
What needs to be changed to get this work?
Demo: https://www.41max.com/edt

Answer 1

The console.log in my-edt shows undefined because it's called on ready, before the user is able to press the button and add the credentials...
I see other things:
Are you aware of the Firebase error msg?
Firebase: Firebase App named '[DEFAULT]' already exists
(app/duplicate-app)
In my-edt you forgot to import app-location and app-route