Polymerfire google auth not working

Question

Polymerfire google auth not working

260 views Asked by Matrix Goblin At 23 December 2016 at 04:30

I'm new to Polymer and Firebase (and as a programmer as well), I'm trying to do a simple login with Google and show the user is logged in. Google Auth is enabled in Firebase. The logout button should be hidden when there is no user logged in, but when I click the login button, nothing happens. There are no warnings in the browser's console. Here is the code that I'm using:

<!DOCTYPE html>
<html>
 <head>
   <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/paper-button/paper-button.html">
</head>

  <body>
    <firebase-app
     auth-domain="xxx"
   database-url="xxxx"
  api-key="xxxxx">
 </firebase-app>

  <firebase-auth
   id="auth"
   user="{{user}}"
   status-known="{{statusKnown}}"
   provider="google">
  </firebase-auth>


   <template is="dom-if" if="[[user]]">
     <h1>Welcome [[user.displayName]]</h1>
</template>

  <paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
  <paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>

 </body>

 <script>
    Polymer({
      is: 'my-login',
     properties: {
      user: {
        type: Object
      },
      statusKnown: {
        type: Object
      }
    },
    login: function() {
      return this.$.auth.signInWithPopup();
    },
    logout: function() {
      return this.$.auth.signOut();
    },
  });
 </script>
 </html>

Original Q&A

There are 1 answers

**tony19** · Answer 1 · 2016-12-23 05:25:40

The problem is that you're trying to use bindings outside a custom element, which actually requires a dom-bind template, like this:

<!-- index.html -->
<body>
  <template is="dom-bind" id="t">
    <x-foo data="{{data}}"></x-foo>
  </template>
  <script>
    var t = document.getElementById('t');
    t.data = 'hello world';
  </script>
</body>

demo

If you have a custom element (e.g., x-login), you wouldn't need the dom-bind template above. The element would be defined similarly:

<!-- x-login.html -->
<dom-module id="x-login">
  <template>
    <firebase-app name="codepen"
                  api-key="AIzaSyDKI6ehwhVnQ-CcrtILhV6QhPukE9ZfarQ"
                  auth-domain="codepen-demos-bc5f2.firebaseapp.com"
                  database-url="https://codepen-demos-bc5f2.firebaseio.com">
    </firebase-app>

    <firebase-auth id="auth"
                   app-name="codepen"
                   provider="google"
                   signed-in="{{signedIn}}"
                   status-known="{{statusKnown}}"
                   user="{{user}}">
    </firebase-auth>

    <template is="dom-if" if="[[user]]">
      <h1>Welcome [[user.displayName]]</h1>
    </template>

    <paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
    <paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>
  </template>

  <script>
    Polymer({
      is: 'x-login',
      properties: {
        user: {
          type: Object
        },
        statusKnown: {
          type: Object
        }
      },
      login: function() {
        return this.$.auth.signInWithPopup();
      },
      logout: function() {
        return this.$.auth.signOut();
      },
    });
  </script>
</dom-module>

Then, you could import that element into index.html:

<head>
  <link rel="import" "x-login.html">
  ...
</head>
<body>
  <x-login></x-login>
</body>

demo

TechQA.

Polymerfire google auth not working

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in POLYMER

Related Questions in POLYMERFIRE

Popular Questions

Popular Tags

Trending Questions