use native fetch (if available)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 4.6.0
 
+### Features
+
+- [#585](https://github.com/okta/okta-auth-js/pull/585) Uses native fetch, if available
+
 ### Other
 
 - [#583](https://github.com/okta/okta-auth-js/pull/583) Better error handling for redirect flows: if redirect URI contains `error` or `error_description` then `isLoginRedirect` will return true and `parseFromUrl` will throw `OAuthError`

lib/fetch/fetchRequest.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import fetch from 'cross-fetch';
+import crossFetch from 'cross-fetch';
 import { FetchOptions, FetchResponse, HttpResponse } from '../types';
 
 function readData(response: FetchResponse): Promise<object | string> {
@@ -52,7 +52,7 @@ function fetchRequest(method: string, url: string, args: FetchOptions) {
   if (contentType === 'application/json' && body && typeof body !== 'string') {
     body = JSON.stringify(body);
   }
-
+  var fetch = global.fetch || crossFetch;
   var fetchPromise = fetch(url, {
     method: method,
     headers: args.headers,

test/karma/spec/loginFlow.js

@@ -46,6 +46,7 @@ describe('Complete login flow', function() {
   var _history;
   var _location;
   var $app;
+  var fetch;
 
   beforeEach(function() {
     _history = {
@@ -60,12 +61,15 @@ describe('Complete login flow', function() {
     date.setTime(ASSUMED_TIME * 1000);
     jasmine.clock().mockDate(date);
     jasmine.Ajax.install();
+    fetch = window.fetch;
+    window.fetch = null; // disable native fetch, force XHR
   });
 
   afterEach(function() {
     document.body.removeChild(document.getElementById('root'));
     jasmine.clock().uninstall();
     jasmine.Ajax.uninstall();
+    window.fetch = fetch;
   });
 
   async function bootstrap(config, pathname) {

test/karma/spec/renewToken.js

@@ -30,21 +30,24 @@ describe('Renew token', function() {
   const JWKS_URI = 'http://myfake.jwks.local';
 
   var sdk;
-
+  var fetch;
 
   beforeEach(function() {
     document.body.insertAdjacentHTML('beforeend', '<div id="root"></div>');
     var date = new Date();
     date.setTime(ASSUMED_TIME * 1000);
     jasmine.clock().mockDate(date);
     jasmine.Ajax.install();
+    fetch = window.fetch;
+    window.fetch = null; // disable native fetch, force XHR
   });
 
   afterEach(function() {
     document.body.removeChild(document.getElementById('root'));
     jasmine.clock().uninstall();
     jasmine.Ajax.uninstall();
     token.$imports.$restore();
+    window.fetch = fetch;
   });
 
   function bootstrap(config) {

test/spec/fetch-request.js

@@ -1,3 +1,4 @@
+/* global window */
 describe('fetchRequest', function () {
   let fetchSpy;
 
@@ -45,6 +46,34 @@ describe('fetchRequest', function () {
     requestUrl = 'http://fakey.local';
   });
 
+  describe('fetch implementation', () => {
+    let defaultFetch;
+    beforeEach(() => {
+      defaultFetch = window.fetch;
+      window.fetch = null;
+    });
+    afterEach(() => {
+      window.fetch = defaultFetch;
+    });
+    it('uses cross-fetch if no native fetch', () => {
+      return fetchRequest(requestMethod, requestUrl, {})
+      .then(() => {
+        expect(fetchSpy).toHaveBeenCalled();
+      });
+    });
+    it('uses native fetch if available', () => {
+      const globalFetch = jest.fn(() => {
+        return Promise.resolve(response);
+      });
+      window.fetch = globalFetch;
+      return fetchRequest(requestMethod, requestUrl, {})
+      .then(() => {
+        expect(globalFetch).toHaveBeenCalled();
+        expect(fetchSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
   describe('request', () => {
     it('JSON encodes request body if request header Content-Type is application/json', function() {
       const requestJSON = {