Prevent getTokenSilently to be called concurrently

__tests__/utils.test.ts

@@ -14,8 +14,10 @@ import {
   urlDecodeB64
 } from '../src/utils';
 import { DEFAULT_AUTHORIZE_TIMEOUT_IN_SECONDS } from '../src/constants';
+import { InternalError } from '../src/errors';
 
 (<any>global).TextEncoder = TextEncoder;
+const TIMEOUT_ERROR = { error: 'timeout', error_description: 'Timeout' };
 
 describe('utils', () => {
   describe('getUniqueScopes', () => {
@@ -244,7 +246,6 @@ describe('utils', () => {
     });
   });
   describe('runPopup', () => {
-    const TIMEOUT_ERROR = { error: 'timeout', error_description: 'Timeout' };
     const setup = customMessage => {
       const popup = {
         location: { href: '' },
@@ -347,11 +348,11 @@ describe('utils', () => {
     });
   });
   describe('runIframe', () => {
-    const TIMEOUT_ERROR = { error: 'timeout', error_description: 'Timeout' };
     const setup = customMessage => {
       const iframe = {
         setAttribute: jest.fn(),
-        style: { display: '' }
+        style: { display: '' },
+        id: ''
       };
       const url = 'https://authorize.com';
       const origin =
@@ -365,6 +366,13 @@ describe('utils', () => {
         expect(type).toBe('iframe');
         return iframe;
       });
+      window.document.getElementById = <any>jest
+        .fn()
+        .mockImplementationOnce(id => undefined)
+        .mockImplementationOnce(id => {
+          expect(id).toBe('a0-spajs-iframe');
+          return iframe;
+        });
       window.document.body.appendChild = jest.fn();
       window.document.body.removeChild = jest.fn();
       return { iframe, url, origin };
@@ -382,7 +390,6 @@ describe('utils', () => {
       const { iframe, url } = setup(message);
       await runIframe(url, origin);
 
-      expect(message.source.close).toHaveBeenCalled();
       expect(window.document.body.appendChild).toHaveBeenCalledWith(iframe);
       expect(window.document.body.removeChild).toHaveBeenCalledWith(iframe);
       expect(iframe.setAttribute.mock.calls).toMatchObject([
@@ -391,6 +398,29 @@ describe('utils', () => {
         ['src', url]
       ]);
       expect(iframe.style.display).toBe('none');
+      expect(iframe.id).toBe('a0-spajs-iframe');
+    });
+    it('throws an error when the iframe already exists', async () => {
+      const origin = 'https://origin.com';
+      const { iframe, url } = setup('');
+
+      //the mock returns undefined in the first time
+      //and an object in the second time, so call it
+      //once here so when the method runs, it will
+      //return the object and throw
+      window.document.getElementById('foobar');
+
+      try {
+        await runIframe(url, origin);
+      } catch (error) {
+        expect(error).toBeInstanceOf(InternalError);
+        expect(error.error_description).toBe(
+          "`getTokenSilently` can only be called once at a time. Check your code to make sure you're not calling it multiple times."
+        );
+        expect(window.document.body.appendChild).not.toHaveBeenCalledWith(
+          iframe
+        );
+      }
     });
     describe('with invalid messages', () => {
       [
@@ -434,7 +464,6 @@ describe('utils', () => {
       await expect(runIframe(url, origin)).resolves.toMatchObject(
         message.data.response
       );
-      expect(message.source.close).toHaveBeenCalled();
       expect(window.document.body.removeChild).toHaveBeenCalledWith(iframe);
     });
     it('returns authorization error message', async () => {
@@ -451,7 +480,6 @@ describe('utils', () => {
       await expect(runIframe(url, origin)).rejects.toMatchObject(
         message.data.response
       );
-      expect(message.source.close).toHaveBeenCalled();
       expect(window.document.body.removeChild).toHaveBeenCalledWith(iframe);
     });
     it('times out after 60s', async () => {

src/errors.ts

@@ -9,3 +9,12 @@ export class AuthenticationError extends Error {
     Object.setPrototypeOf(this, AuthenticationError.prototype);
   }
 }
+
+export class InternalError extends Error {
+  public error = 'internal_error';
+  constructor(public error_description: string = 'Internal Error') {
+    super(error_description);
+    //https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work
+    Object.setPrototypeOf(this, InternalError.prototype);
+  }
+}

src/utils.ts

@@ -2,10 +2,12 @@ import * as qs from 'qss';
 import fetch from 'unfetch';
 
 import { DEFAULT_AUTHORIZE_TIMEOUT_IN_SECONDS } from './constants';
+import { InternalError } from './errors';
+
+const TIMEOUT_ERROR = { error: 'timeout', error_description: 'Timeout' };
 
 const dedupe = arr => arr.filter((x, i) => arr.indexOf(x) === i);
 
-const TIMEOUT_ERROR = { error: 'timeout', error_description: 'Timeout' };
 export const getUniqueScopes = (...scopes: string[]) => {
   const scopeString = scopes.filter(Boolean).join();
   return dedupe(scopeString.replace(/\s/g, ',').split(','))
@@ -22,11 +24,18 @@ export const parseQueryResult = (hash: string) => {
 };
 
 export const runIframe = (authorizeUrl: string, eventOrigin: string) => {
+  const IFRAME_ID = 'a0-spajs-iframe';
+  if (document.getElementById(IFRAME_ID)) {
+    throw new InternalError(
+      "`getTokenSilently` can only be called once at a time. Check your code to make sure you're not calling it multiple times."
+    );
+  }
   return new Promise<AuthenticationResult>((res, rej) => {
     var iframe = window.document.createElement('iframe');
     iframe.setAttribute('width', '0');
     iframe.setAttribute('height', '0');
     iframe.style.display = 'none';
+    iframe.id = IFRAME_ID;
 
     const timeoutSetTimeoutId = setTimeout(() => {
       rej(TIMEOUT_ERROR);
@@ -36,11 +45,14 @@ export const runIframe = (authorizeUrl: string, eventOrigin: string) => {
     const iframeEventHandler = function(e: MessageEvent) {
       if (e.origin != eventOrigin) return;
       if (!e.data || e.data.type !== 'authorization_response') return;
-      (<any>e.source).close();
+
       e.data.response.error ? rej(e.data.response) : res(e.data.response);
       clearTimeout(timeoutSetTimeoutId);
       window.removeEventListener('message', iframeEventHandler, false);
-      window.document.body.removeChild(iframe);
+
+      try {
+        window.document.body.removeChild(document.getElementById(IFRAME_ID));
+      } catch (error) {}
     };
     window.addEventListener('message', iframeEventHandler, false);
     window.document.body.appendChild(iframe);