yolo-auth.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="yolo-auth">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

  </template>

  <script>
    /**
     * `yolo-auth`
     * Polymer wrapper around Google OneTap YOLO implementation
     *
     * ## Usage
     * ```html
     * <yolo-auth
     *  id="auth"
     *  user="{{user}}"
     *  client-id="your-google-oauth2-client-id">
     * <yolo-auth>
     * ```
     * Javascript sign-in calls can then be made to the `yolo-auth` object to attempt
     * Sign Up/Sign In
     * ```javascript
     * this.$.auth.signIn()
     *    .them((user) => {
     *      // Successful response
     *    })
     *    .catch((error) => {
     *      // Unsuccessful response : Something went wrong
     *    });
     * ```
     *
     * By this users are prompted to create an account with a dialog that's inline with
     * your page's content, so they're never taken out of context by a sign-up page.
     * With just one-tap they get secure, token-based, passwordless account with your service,
     * protected by their Google Account.
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class YoloAuth extends Polymer.Element {
      /**
       * Fired when `sign in` succeeds
       *
       * @event sign-in-success
       * @param {Object} credentials Credentials of the the user
       *
       */

      /**
       * Fired when `sign in` fails
       *
       * @event sign-in-fail
       * @param {Object} error Error object
       */

      /** Describes the custom tag name */
      static get is() { return 'yolo-auth'; }

      /** Describes properties of the object observed and managed by polymer */
      static get properties() {
        return {
          /** Google OAuth2 client ID */
          clientId: String,

          /**
           * Credentials provided by the Google YOLO API
           */
          user: {
            type: Object,
            notify: true
          },

          /**
           * YOLO request object sent to Google API during sign in/ sign up
           * Computed on the basis of clientID.
           */
          _yoloRequestObject: {
            type: Object,
            computed: '_computeYoloRequestObject(clientId)'
          }
        };
      }

      /**
       * Computes the YOLO request object to be sent to the Google API during sign in/ sign up
       *
       * @param {string} clientId The Google OAuth2 client ID
       *
       * @return {Object} The computed YOLO request object.
       */
      _computeYoloRequestObject(clientId) {
        return {
          supportedAuthMethods: [
              "https://accounts.google.com",
            ],
            supportedIdTokenProviders: [
              {
                uri: "https://accounts.google.com",
                clientId
              }
            ]
        };
      }

     /**
      * Loads the Google YOLO script asynchronously
      * Adds the script tag to the `head`, removes it if load was unsuccessful
      *
      * @return {Promise<Object>}
      * The promise which resolves when script load succeeds and rejects when it errors.
      */
      _loadYOLOScript() {
        return new Promise((resolve, reject) => {
          if (window.googleyolo) {
            resolve({ ok: true });
          } else {
            // Random Script ID
            const scriptId = `google-yolo-script-${Math.ceil(Math.random() * 1E6)}`;

            const yoloScript = document.createElement('script');
            yoloScript.setAttribute('src', 'https://smartlock.google.com/client');
            yoloScript.setAttribute('async', true);
            yoloScript.setAttribute('defer', true);
            yoloScript.setAttribute('id', scriptId);

            const firstScript = document.getElementsByTagName('script')[0];
            if (firstScript) {
              firstScript.parentNode.insertBefore(yoloScript, firstScript);
            } else {
              document.head.appendChild(yoloScript);
            }

            yoloScript.addEventListener('load', (resp) => resolve({ ok: true }));
            yoloScript.addEventListener('error', (err) => {
              const script = document.getElementById(scriptId);
              try {
                script.parentNode.removeChild(script);
              } catch (e) {
                // Ignore: if unable to remove the child, ie. child is already removed.
              }
              reject({ ok: false });
            });
          }
        });
      }

      /**
       * Attempts the YOLO sign up/sign in
       * To see the list of Google YOLO errors and response handling, visit
       * [Handling Google YOLO response](https://developers.google.com/identity/one-tap/web/retrieve-hints#handle_the_hint_request_result)
       *
       * @return {Promise<Object>}
       * The promise which resolves if sign up/sign in is successful, rejects when unsuccessful
       */
      signIn() {
        return new Promise((resolve, reject) => {
          if (this.user) {
            this.dispatchEvent(new CustomEvent('sign-in-success', {
              bubbles: true,
              detail: { credentials: this.user }
            }));
            resolve(this.user);
          } else {
            this._loadYOLOScript()
              .then(() => {
                window.googleyolo.retrieve(this._yoloRequestObject)
                  .then((credentials) => {
                    this.user = credentials;
                    this.dispatchEvent(new CustomEvent('sign-in-success', {
                      bubbles: true,
                      detail: { credentials }
                    }));
                    resolve(credentials);
                  })
                  .catch((error) => {
                    if (error.type === 'noCredentialsAvailable') {
                      window.googleyolo.hint(this._yoloRequestObject)
                        .then((credentials) => {
                          this.user = credentials;
                          this.dispatchEvent(new CustomEvent('sign-in-success', {
                            bubbles: true,
                            detail: { credentials }
                          }));
                          resolve(credentials);
                        })
                        .catch((error) => {
                          this.dispatchEvent(new CustomEvent('sign-in-fail', {
                            bubbles: true,
                            detail: { error }
                          }));
                          reject(error);
                        });
                    } else {
                      this.dispatchEvent(new CustomEvent('sign-in-fail', {
                        bubbles: true,
                        detail: { error }
                      }));
                      reject(error);
                    }
                  });
              })
              .catch(() => {
                this.dispatchEvent(new CustomEvent('sign-in-fail', {
                  bubbles: true,
                  detail: { error: { type: 'scriptLoadError' } }
                }));
                reject({ type: 'scriptLoadError' });
              });
          }
        });
      }

      /**
       * Signs out the user by resetting the the `user` property to `undefined`
       *
       * @return {Promise<void>}
       * The promise which resolves on successful sign-out and rejects on unsuccessful sign-out
       */
      signOut() {
        return new Promise((resolve, reject) => {
          if (this.user) {
            this.user = undefined;
            this.dispatchEvent(new CustomEvent('sign-out-success', { bubbles: true }));
            resolve();
          } else {
            this.dispatchEvent(new CustomEvent('sign-out-success', { bubbles: true }));
            resolve();
          }
        });
      }

      /**
       * Cancels the operation by closing the credentials selector
       *
       * @return {Promise<Object>}
       * The promise which resolves when credentials selector is closed, rejects if there is error
       */
      cancelOperation() {
        return new Promise((resolve, reject) => {
          if (window.googleyolo) {
            window.googleyolo.cancelLastOperation()
              .then(resp => resolve({ ok: true }))
              .catch(error => reject(error));
          } else {
            resolve({ ok: true });
          }
        });
      }
    }

    window.customElements.define(YoloAuth.is, YoloAuth);
  </script>
</dom-module>