I am trying to implement Firebase Authentication for my application authentication, but I get a Cannot read property 'signInWithEmailAndPassword' of undefined error.
Below follows the code.
index.html
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
my-app.html
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
I'm using Polymer 1.0 and Firebase 3.0. Am I missing something? Thanks.