feat: configure server side rendering in the app

app/services/login.js

@@ -1,6 +1,7 @@
 import Service, { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { AUTH } from '../constants/urls';
+import { APPS, AUTH } from '../constants/urls';
+import fetch from 'fetch';
 
 export default class LoginService extends Service {
   @service store;
@@ -10,16 +11,26 @@ export default class LoginService extends Service {
   @service fastboot;
   @service featureFlag;
 
+  HeadersToCopy = ['Host', 'Cookie', 'User-Agent'];
+
   constructor() {
     super(...arguments);
-    if (!this.fastboot.isFastBoot) {
-      this.checkAuth();
-    }
+
+    this.checkAuth();
   }
 
   checkAuth() {
-    this.store
-      .findRecord('user', 'self')
+    //TODO: try working this with ember-data
+    fetch(`${APPS.API_BACKEND}/users/self`, {
+      credentials: 'include',
+      headers: this.buildHeaders(),
+    })
+      .then(function (response) {
+        if (response.status === 200) {
+          return response.json();
+        }
+        throw response;
+      })
       .then((user) => {
         if (user.incompleteUserDetails && !this.featureFlag.isDevMode)
           window.location.replace(AUTH.SIGN_UP);
@@ -34,4 +45,18 @@ export default class LoginService extends Service {
         this.isLoading = false;
       });
   }
+
+  buildHeaders(headers = {}) {
+    let isFastBoot = this.fastboot.isFastBoot;
+
+    if (!isFastBoot) {
+      return headers;
+    }
+
+    let requestHeaders = this.fastboot.request.headers;
+    this.HeadersToCopy.forEach((n) => (headers[n] = requestHeaders.get(n)));
+    headers['X-forwarded-by'] = 'FastBoot';
+
+    return headers;
+  }
 }

ember-cli-build.js

@@ -7,6 +7,11 @@ const { compatBuild } = require('@embroider/compat');
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
     // Add options here
+
+    //prefer native fetch on the client side and do not use ember-fetch pollyfill on client side
+    'ember-fetch': {
+      preferNative: true,
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

fastboot/initializers/ajax.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'ajax-service',
+  initialize() {
+    // noop
+    // This is to override Fastboot's initializer which prevents ember-fetch from working
+    // https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/fastboot/initializers/ajax.js
+  },
+};

tests/unit/services/login-test.js

@@ -11,30 +11,40 @@ module('Unit | Service | login', function (hooks) {
   setupTest(hooks);
 
   hooks.beforeEach(function () {
+    this.originalFetch = window.fetch;
     this.owner.register('service:fastboot', MockFasbootService);
+
+    //for mocking the fetch will be needing this for disabling eslint for next line only
+    // eslint-disable-next-line no-unused-vars
+    window.fetch = (url, configs) => {
+      const response = {
+        status: 200,
+        json: () =>
+          Promise.resolve({
+            incompleteUserDetails: false,
+          }),
+        clone: () => {
+          return {
+            blob: () => {
+              return Promise.resolve();
+            },
+          };
+        },
+      };
+
+      return Promise.resolve(response);
+    };
+  });
+
+  hooks.afterEach(function () {
+    window.fetch = this.originalFetch;
   });
 
   test('it should login the user and set isLoggedIn to true and isLoading to false', async function (assert) {
-    assert.expect(4);
+    assert.expect(2);
 
     let service = this.owner.lookup('service:login');
-
-    service.store = {
-      findRecord(model, id) {
-        assert.strictEqual(
-          model,
-          'user',
-          'findRecord called with correct model',
-        );
-        assert.strictEqual(id, 'self', 'findRecord called with correct id');
-        return Promise.resolve({
-          incompleteUserDetails: false,
-        });
-      },
-    };
-
-    await service.checkAuth();
-
+    await settled();
     assert.ok(service.get('isLoggedIn'), 'isLoggedIn is set to true');
     assert.ok(service);
   });
@@ -44,43 +54,37 @@ module('Unit | Service | login', function (hooks) {
 
     let service = this.owner.lookup('service:login');
 
-    service.store = {
-      findRecord(model, id) {
-        assert.strictEqual(
-          model,
-          'user',
-          'findRecord called with correct model',
-        );
-        assert.strictEqual(id, 'self', 'findRecord called with correct id');
-        return Promise.resolve({
-          incompleteUserDetails: false,
-        });
-      },
-    };
-
     await settled(); // wait for promises to settle
 
     assert.notOk(service.get('isLoading'), 'isLoading is set to false');
   });
 
   test('it should set isLoggedIn to false if promise gets rejected', async function (assert) {
     assert.expect(1);
-    let service = this.owner.lookup('service:login');
-
-    service.store = {
-      findRecord(model, id) {
-        assert.strictEqual(
-          model,
-          'user',
-          'findRecord called with correct model',
-        );
-        assert.strictEqual(id, 'self', 'findRecord called with correct id');
-        return Promise.reject('Authentication failed');
-      },
+    let fetch = window.fetch;
+
+    //for mocking the fetch will be needing this for disabling eslint for next line only
+    // eslint-disable-next-line no-unused-vars
+    window.fetch = (url, configs) => {
+      const response = {
+        status: 200,
+        json: () => Promise.reject('Authentication failed'),
+        clone: () => {
+          return {
+            blob: () => {
+              return Promise.resolve();
+            },
+          };
+        },
+      };
+
+      return Promise.resolve(response);
     };
 
+    let service = this.owner.lookup('service:login');
     await settled(); // wait for promises to settle
 
     assert.notOk(service.get('isLoggedIn'), 'isLoggedIn is set to false');
+    window.fetch = fetch;
   });
 });