CODEWITHSUNDEEP
javascripthtmlfirebasepolymerpolymerfire
hhwwww
hhwwww

Reputation: 83

use Polymerfire auth globally

What would be the best way if I have a firebase auth element using polymerfire, to use the user attribute globally?

For instance if I have an element with login buttons:

<dom-module id="tab-b">
<template>
   <style>
   </style>
<firebase-app auth-domain="example.firebaseapp.com"
    database-url="example.firebaseio.com/"
     api-key="">
</firebase-app>
<firebase-auth id="auth" location="{{location}}" user="{{user}}"provider="google" on-error="handleError">
</firebase-auth>

<paper-button id="googSignIn" class$="signInButton {{_getMiniClass()}}"on-tap="login" raised>
   Google
</paper-button>

</template>

<script>
 (function() {
  'use strict';
  Polymer({
    is: 'tab-b',

      properties:{

        user: {
        type: Object
        },

        statusKnown: {
        type: Object
        }
      },

   login: function(){
      return this.$.auth.signInWithPopup();
    },

   logout: function(){
      return this.$.auth.signOut();
    }
  });
})();
</script>
</dom-module>

And then I want to show or hide many components like this:

<element  show$={{!user}}><element>

Upvotes: 0

Views: 187

Answers (1)

JoelCode
JoelCode

Reputation: 336

From your app entry point (my-app.html), assign the user values to an object that. The object app become in charge of you app state, you can add any property to it

<!-- Firebase authentication -->
<firebase-auth
  id="auth"
  user="{{app.user}}"
  status-known="{{app.availability.available}}"
  online="{{app.availability.isOnline}}"
  signed-in="{{app.availability.userIsSignedIn}}"
  provider="google">
</firebase-auth>

Add more information to the app object such as the display state.

<iron-media-query id="mq-phone"
                  full
                  query="(max-width:480px)"
                  query-matches="{{app.display.isPhoneSize}}"></iron-media-query>
<iron-media-query id="mq-tablet"
                  full
                  query="(min-width:481px) and (max-width:840px)"
                  query-matches="{{app.display.isTabletSize}}"></iron-media-query>
<iron-media-query id="mq-desktop"
                  query="(min-width:841px)"
                  query-matches="{{app.display.isDesktopSize}}"></iron-media-query>

Bind the object to other elements

 <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" 
       class="drawer-list" role="navigation">
      <a name="view1" app="{{app}}" href="/view1">View One</a>
      <a name="view2" app="{{app}}" href="/view2">View Two</a>
      <a name="view3" app="{{app}}" href="/view3">View Three</a>
    </iron-selector>
  </app-drawer>

Upvotes: 1

Related Questions