oauth-authorizator.html

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

<script>
    /**
     * `oauth-authorizator`
     *
     * A Polymer 2.0 Element that performs the OAuth2 authorization code flow.
     *
     * @customElement
     * @polymer
     */
    class OauthAuthorizator extends Polymer.Element {
        static get errors() {
            return {
                AUTH_WINDOW_CLOSED: 'auth_window_closed',
                HTTP_ERROR: 'http',
                INVALID_PARAMETER: 'parameter',
                OAUTH_ERROR: 'oauth_error',
                STATE_MISMATCH: 'state_mismatch',
                UNKNOWN: 'unknown'
            };
        }

        static get is() {
            return 'oauth-authorizator';
        }

        static get properties() {
            return {
                /**
                 * A valid access token.
                 *
                 * This will automatically be refreshed before it times out.
                 *
                 * @type String
                 */
                accessToken: {
                    type: String,
                    notify: true,
                },

                /**
                 * The authorization endpoint.
                 *
                 * This is the site that will be opened in the popup window and this
                 * is where the actual authentication with the 3rd party takes place.
                 *
                 * E.g. https://accounts.spotify.com/authorize
                 *
                 * @type String
                 */
                authorizationUrl: {
                    type: String
                },

                /**
                 * The client ID.
                 *
                 * @type String
                 */
                clientId: {
                    type: String
                },

                /**
                 * Custom headers to send to the token services.
                 *
                 * @type Object
                 */
                headers: {
                    type: Object
                },

                /**
                 * Indicates whether the authentication process currently is in process.
                 *
                 * @type Boolean
                 */
                inProgress: {
                    type: Boolean,
                    notify: true
                },

                /**
                 * The key of the local storage item to save the refresh token to.
                 *
                 * Defaults to `oauth-authorizator:refreshToken`.
                 *
                 * @type String
                 */
                localStorageKey: {
                    type: String,
                    value: () => 'oauth-authorizator:refreshToken'
                },

                /**
                 * The URI to redirect to when the authorization has completed.
                 *
                 * This is the site the `oauth-receiver` must be hosted on.
                 *
                 * @type String
                 */
                redirectUrl: {
                    type: String
                },

                /**
                 * The authorization scopes to request.
                 *
                 * @type String|String[]
                 */
                scopes: {
                    type: Array
                },

                /**
                 * The URI to exchange the authorization code into a full access token through.
                 *
                 * @type String
                 */
                tokenExchangeUrl: {
                    type: String
                },

                /**
                 * The URL to refresh an expired access token through.
                 *
                 * If this is null when `login` is called, the obtained access token
                 * will not automatically be refreshed.
                 *
                 * @type String
                 */
                tokenRefreshUrl: {
                    type: String
                },

                /**
                 * The interval descriptor for the token refresh task.
                 *
                 * @type Number
                 */
                _refreshInterval: {
                    type: Number
                }
            };
        }

        /**
         * Forgets the currently logged-in user and stops the automatic access
         * token refresh process.
         */
        forget() {
            localStorage.removeItem(this.localStorageKey);
            clearInterval(this._refreshInterval);

            this.setProperties({
                accessToken: null,
                _refreshInterval: null
            });
        }

        /**
         * Performs the OAuth authorization process.
         *
         * First, this attempts to relogin the current user. If that doesn't
         * work, this method triggers the full OAuth authorization. When that is
         * done, it starts the automatic access token refresh process.
         */
        login() {
            if (!this.authorizationUrl) {
                throw new Error(
                    "Authentication URL is null or empty!",
                    OauthAuthorizator.errors.INVALID_PARAMETER
                );
            }
            if (!this.redirectUrl) {
                throw new Error(
                    "Redirect URL is null or empty!",
                    OauthAuthorizator.errors.INVALID_PARAMETER
                );
            }
            if (!this.tokenExchangeUrl) {
                throw new Error(
                    "Token exchange URL is null or empty!",
                    OauthAuthorizator.errors.INVALID_PARAMETER
                );
            }

            this.inProgress = true;
            return this._refresh()
                .then(resp => resp ? resp : this._authenticate())
                .then(res => {
                    this.inProgress = false;
                    return res;
                })
                .catch(err => {
                    this.inProgress = false;
                    return Promise.reject(err);
                });
        }

        /**
         * Performs the authentication.
         *
         * @returns {Promise.<Object>} A promise with the authentication data.
         * @private
         */
        _authenticate() {
            return new Promise((res, rej) => {
                // Generate random ASCII string
                const state = (Math.random().toString(36) + '00000000000000000').slice(2, 9);

                const authUrl = new URL(this.authorizationUrl);
                const redirUrl = new URL(this.redirectUrl);

                const params = new URLSearchParams(authUrl.search);
                params.set('client_id', this.clientId);
                params.set('redirect_uri', this.redirectUrl);
                params.set('response_type', 'code');
                params.set(
                    'scope',
                    Array.isArray(this.scopes) ? this.scopes.join(' ') : this.scopes
                );
                params.set('state', state);
                params.set('show_dialog', true);

                authUrl.search = params.toString();

                const w = window.open(authUrl.toString());
                if (!w) {
                    return rej(new Error(
                        "Window handle was null.",
                        OauthAuthorizator.errors.UNKNOWN
                    ));
                }

                const cancelListeners = () => {
                    clearInterval(interval);
                    window.removeEventListener('message', handleFunction);
                };

                const interval = setInterval(() => {
                    if (!w.closed) {
                        return;
                    }

                    cancelListeners();

                    return rej(new Error(
                        "Authorization window has been closed.",
                        OauthAuthorizator.errors.AUTH_WINDOW_CLOSED
                    ));
                }, 100);

                const handleFunction = (/** @type MessageEvent */ev) => {
                    if (ev.origin !== redirUrl.origin) {
                        console.warn(`Received message from invalid domain ${ev.origin}.`);
                        return;
                    }

                    cancelListeners();
                    w.close();

                    if (!ev.data) {
                        return rej(new Error(
                            "Received no data with authorization message.",
                            OauthAuthorizator.errors.UNKNOWN
                        ));
                    }
                    if (ev.data.state !== state) {
                        return rej(new Error(
                            "State value didn't match.",
                            OauthAuthorizator.errors.STATE_MISMATCH
                        ));
                    }
                    if (ev.data.error) {
                        return rej(new Error(
                            ev.data.error,
                            OauthAuthorizator.errors.OAUTH_ERROR
                        ));
                    }

                    return res(ev.data.code);
                };

                window.addEventListener('message', handleFunction);
            })
                .then(code => {
                    const body = new URLSearchParams();
                    body.append('code', code);
                    body.append('callbackUrl', this.redirectUrl);
                    return OauthAuthorizator._retry(() => fetch(this.tokenExchangeUrl, {
                        body: body,
                        headers: new Headers(this.headers || {}),
                        method: 'post'
                    }), 5000, 10);
                })
                .then(OauthAuthorizator._ensureOk)
                .then(response => response.json())
                .then(response => {
                    if (response.refresh_token && response.expires_in) {
                        localStorage.setItem(this.localStorageKey, response.refresh_token);

                        clearInterval(this._refreshInterval);
                        this._refreshInterval = setInterval(
                            () => this._refresh(),
                            response.expires_in * 950
                        );
                    }

                    this.accessToken = response.access_token;
                    return response;
                });
        }

        /**
         * Attempts to refresh the current session without going through the full auth screen.
         *
         * @returns {Promise.<TResult>} A promise with the authentication data or null, if the user couldn't be authed.
         * @private
         */
        _refresh() {
            const rt = localStorage.getItem(this.localStorageKey);
            if (!rt || !this.tokenRefreshUrl) {
                clearInterval(this._refreshInterval);
                return Promise.resolve();
            }

            const body = new URLSearchParams();
            body.append('refresh_token', rt);
            return OauthAuthorizator._retry(() => fetch(this.tokenRefreshUrl, {
                body: body,
                headers: new Headers(this.headers || {}),
                method: 'post'
            }), 5000, 10)
                .then(OauthAuthorizator._ensureOk)
                .then(response => response.json())
                .then(response => {
                    if (response.expires_in) {
                        clearInterval(this._refreshInterval);
                        this._refreshInterval = setInterval(
                            () => this._refresh(),
                            response.expires_in * 950
                        );
                    }

                    this.accessToken = response.access_token;
                    return response;
                })
                .catch(() => Promise.resolve());
        }

        /**
         * Ensures the given HTTP response's status code is ok.
         *
         * @param response Response the HTTP response
         * @returns {Promise.<Response>} A promise that is either resolved or rejected depending on the status of the response.
         */
        static _ensureOk(response) {
            return response.ok ?
                Promise.resolve(response) :
                Promise.reject(new Error(
                    `Received non-ok status code ${response.status}.`,
                    OauthAuthorizator.errors.HTTP_ERROR
                ));
        }

        /**
         * Executes the given function and retries it, if the Promise, the function
         * returned, didn't complete successfully.
         *
         * @param fn Function the function to execute
         * @param delay Number the delay to wait between executions
         * @param max Number the maximum amount of retries
         * @returns {Promise} The promise with the eventual result.
         * @private
         */
        static _retry(fn, delay, max) {
            return new Promise((res, rej) => {
                const attempt = () => {
                    Promise.resolve(fn())
                        .then(res)
                        .catch(err => {
                            if (max-- > 0) {
                                setTimeout(attempt, delay);
                            } else {
                                rej(err);
                            }
                        });
                };

                attempt();
            });
        }
    }

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