How to do firebase authentication with polymer-2x

277 views Asked by At

I'm trying to use new Polymer-2.x with Polyfire to connect to firebase, this demo project only show list of place and use firebase authentication to ensure only registered user can access the place list.

but i cannot make firebase-authentication worked and no sample for this project, the only sample is for Polymer-1.x and still use the old code with Polymer object.

here is some of my code, the place list worked well, it can fetch the firebase database correctly, but the script not asking for authentication, because i not understand how to call it in ES6.

HTML Section:

<firebase-app
        auth-domain="blablabla.firebaseapp.com"
        database-url="https://blablabla.firebaseio.com"
        api-key="blablabla"
        storage-bucket="blablabla.appspot.com"
        messaging-sender-id="blablabla">
</firebase-app>
<firebase-auth id="auth" user="{{ user }}" provider="google" on-error="handleError">
</firebase-auth>

View Section:

<firebase-query
    id="query"
    path="/places"
    data="{{ places }}">
</firebase-query>

<ul>
   <template is="dom-repeat" items="{{ places }}" as="item">
       <li>[[ item.name ]]</li>
   </template>
</ul>

Script Section:

<script>
        class MyView1 extends Polymer.Element {
            static get is() {
                return 'my-view1';
            }

            static get properties() {
                return {
                    places: {
                        type: Object
                    }
                }
            }
        }

        window.customElements.define(MyView1.is, MyView1);
</script>

the question is, how to call popup authentication or any firebase-authentication method with this new ES6 script?

1

There are 1 answers

2
Niklas On BEST ANSWER

I just recently moved my firebase project from polymer1 to 2 and although it is not yet working a 100%, it seems as the polymerfire elements do work.

cant you just call:

   loginGoogle() {
        var that = this;
        this.$.auth.signInWithPopup().then(function(result) {
            // This gives you a Google Access Token
            var token = result.credential.accessToken;
            // The signed-in user info
            var user = result.user;

        }).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            // The email of the user's account used.
            var email = error.email;
            // The firebase.auth.AuthCredential type that was used.
            var credential = error.credential;
            console.log('Error during the login', errorCode, errorMessage);
        });
    }