blue-cats-auth.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymerfire/firebase-auth.html">

<dom-module id="blue-cats-auth">
    <template>
        <style media="screen">
            body {
                font-family: Roboto, sans-serif;
                padding: 36px;
            }
            table {
                margin: 24px 0;
                border: 1px solid #ccc;
                border-collapse: collapse;
            }
            th, td {
                padding: 8px;
                border-bottom: 1px solid #ccc;
            }
            th {
                text-align: right;
            }
            button {
                background: #2196F3;
                color: white;
                border: 0;
                border-radius: 3px;
                text-transform: uppercase;
                padding: 8px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 500;
            }
            input {
                padding: 8px;
                font-size: 14px;
                font-family: Roboto, sans-serif;
                border: 1px solid #ddd;
                display: block;
                max-width: 300px;
                margin-bottom: 8px;
            }
            .error {
                background: #f44336;
                color: white;
                padding: 8px;
                font-size: 14px;
                border-radius: 3px;
                margin: 16px auto;
                max-width: 800px;
            }
        </style>
        <firebase-auth id="auth" user="{{user}}" provider="google" on-error="showError"></firebase-auth>

        <div class="error" hidden$="[[!error]]">[[error.code]]: [[error.message]]</div>
        <div hidden$="[[user]]">
            <h3>Email/Password</h3>
            <form on-submit="signInWithEmailAndPassword">
                <input value="{{email::input}}" type="email" placeholder="Email">
                <input value="{{password::input}}" type="password" placeholder="Password">
                <button type="submit" on-tap="signInWithEmailAndPassword">Sign In</button>
                <button type="button" on-tap="createUserWithEmailAndPassword">Sign Up</button>
            </form>
            <h3>Anonymous/OAuth</h3>
            <p>
                <button on-tap="signInAnonymously">Sign In Anonymously</button>
                <button on-tap="signInWithGoogle">Sign In With Google</button>
            </p>
        </div>
        <div hidden$="[[!user]]">
            <table>
                <tr><th>uid</th> <td>[[user.uid]]</td></tr>
                <tr><th>displayName</th> <td>[[user.displayName]]</td></tr>
                <tr><th>email</th> <td>[[user.email]]</td></tr>
                <tr><th>emailVerified</th> <td>[[user.emailVerified]]</td></tr>
            </table>

            <button on-tap="signOut">Sign Out</button>
        </div>
</template>
<script>
    Polymer({
        is: "blue-cats-auth",
        properties: {
            user: {
                type: Object
            }
        },

        ready: function(){
            console.log(this.$.auth);
        },

        showError: function(e) {
            console.log(e);
            this.error = e.detail;
        },
        signInAnonymously: function () {
            this.error = null;
            this.$.auth.signInAnonymously();
        },
        signInWithGoogle: function () {
            this.error = null;
            this.$.auth.signInWithPopup();
        },
        signInWithEmailAndPassword: function(e) {
            if (e) { e.preventDefault(); }
            this.error = null;
            this.$.auth.signInWithEmailAndPassword(this.email, this.password);
            this.email = null;
            this.password = null;
        },
        createUserWithEmailAndPassword: function() {
            this.error = null;
            this.$.auth.createUserWithEmailAndPassword(this.email, this.password);
            this.email = null;
            this.password = null;
        },
        signOut: function() {
            this.error = null;
            this.$.auth.signOut();
        }

    });
</script>
</dom-module>