feat(authentication): persist the token

Storing on cookie or localStorage

Closes #3, #7

Author: lucaperret

package.json

@@ -53,9 +53,11 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "js-cookie": "^2.2.0",
     "qs": "^6.5.1"
   },
   "devDependencies": {
+    "@types/js-cookie": "^2.1.0",
     "@types/qs": "^6.5.1",
     "@types/sinon": "^4.3.1",
     "ava": "^1.0.0-beta.4",

src/lib/sdk.spec.ts

@@ -40,15 +40,65 @@ test('Create an instance', t => {
       'getFile',
       'upload',
       'setToken',
-      'clearToken'
+      'clearToken',
+      'isBrowser'
     ]
   );
 
-  t.deepEqual(Object.getOwnPropertyNames(t.context.strapi), ['axios']);
+  t.deepEqual(Object.getOwnPropertyNames(t.context.strapi), [
+    'axios',
+    'storeConfig'
+  ]);
 
   t.deepEqual(t.context.strapi.axios.defaults.baseURL, 'http://strapi-host');
 });
 
+test.serial('Create an instance with existing token on localStorage', t => {
+  browserEnv(['window']);
+  const globalAny: any = global;
+  globalAny.window.localStorage = storageMock();
+  const setItem = sinon.spy(globalAny.window.localStorage, 'setItem');
+  globalAny.window.localStorage.setItem('jwt', '"XXX"');
+  const strapi = new Strapi('http://strapi-host', {
+    cookie: false
+  });
+
+  t.is(strapi.axios.defaults.headers.common.Authorization, 'Bearer XXX');
+  t.true(setItem.calledWith('jwt', '"XXX"'));
+  delete strapi.axios.defaults.headers.common.Authorization;
+  delete globalAny.window;
+});
+
+test('Create an instance with existing token on cookies', t => {
+  browserEnv(['window', 'document']);
+  const Cookies = require('js-cookie');
+  const globalAny: any = global;
+  Cookies.set('jwt', 'XXX');
+  // const CookieGet = sinon.spy(Cookies)
+
+  const strapi = new Strapi('http://strapi-host', {
+    localStorage: false
+  });
+
+  t.is(strapi.axios.defaults.headers.common.Authorization, 'Bearer XXX');
+  // TODO: Mock Cookies
+  // t.true(CookieGet.calledWith('jwt'));
+  delete strapi.axios.defaults.headers.common.Authorization;
+  delete globalAny.window;
+});
+
+test.serial('Create an instance without token', t => {
+  browserEnv(['window']);
+  const globalAny: any = global;
+  const strapi = new Strapi('http://strapi-host', {
+    cookie: false,
+    localStorage: false
+  });
+
+  t.is(strapi.axios.defaults.headers.common.Authorization, undefined);
+  delete globalAny.window;
+});
+
 test('Make a request', async t => {
   t.context.axiosRequest.resolves({
     data: [{ foo: 'bar' }]
@@ -243,19 +293,18 @@ test('Provider authentication on Node.js', async t => {
 });
 
 test.serial('Provider authentication on browser', async t => {
-  const globalAny: any = global;
   browserEnv(['window'], {
     url: 'http://localhost?access_token=XXX'
   });
+  const globalAny: any = global;
+  globalAny.window.localStorage = storageMock();
   t.context.axiosRequest.resolves({
     data: {
       jwt: 'foo',
       user: {}
     }
   });
-  const authentication = await t.context.strapi.authenticateProvider(
-    'github'
-  );
+  const authentication = await t.context.strapi.authenticateProvider('github');
 
   t.true(
     t.context.axiosRequest.calledWithExactly({
@@ -401,3 +450,53 @@ test('Set token', t => {
     'Bearer foo'
   );
 });
+
+test('Set token on Node.js', t => {
+  browserEnv(['window', 'document']);
+  // const Cookies = require('js-cookie');
+  const globalAny: any = global;
+  globalAny.window.localStorage = storageMock();
+  const setItem = sinon.spy(globalAny.window.localStorage, 'setItem');
+  // const CookieSet = sinon.spy(Cookies, 'set')
+
+  const strapi = new Strapi('http://strapi-host', {
+    cookie: false,
+    localStorage: false
+  });
+  strapi.setToken('XXX');
+
+  t.is(strapi.axios.defaults.headers.common.Authorization, 'Bearer XXX');
+  t.true(setItem.notCalled);
+  // t.true(CookieSet.notCalled)
+  delete globalAny.window;
+});
+
+test('Clear token without storage', t => {
+  browserEnv(['window']);
+  const globalAny: any = global;
+  globalAny.window.localStorage = storageMock();
+  const setItem = sinon.spy(globalAny.window.localStorage, 'setItem');
+  const strapi = new Strapi('http://strapi-host', {
+    cookie: false,
+    localStorage: false
+  });
+  strapi.axios.defaults.headers.common.Authorization = 'Bearer XXX';
+  strapi.clearToken();
+  t.true(setItem.notCalled);
+  t.is(strapi.axios.defaults.headers.common.Authorization, undefined);
+});
+
+function storageMock() {
+  const storage: any = {};
+  return {
+    setItem(key: string, value: string) {
+      storage[key] = value || '';
+    },
+    getItem(key: string) {
+      return key in storage ? storage[key] : null;
+    },
+    removeItem(key: string) {
+      delete storage[key];
+    }
+  };
+}

src/lib/sdk.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import * as Cookies from 'js-cookie';
 import * as qs from 'qs';
 
 export interface Authentication {
@@ -14,20 +15,65 @@ export interface Token {
   oauth_token?: string;
 }
 
+export interface CookieConfig {
+  key: string;
+  options: object;
+}
+
+export interface LocalStorageConfig {
+  key: string;
+}
+
+export interface StoreConfig {
+  cookie?: CookieConfig | false;
+  localStorage?: LocalStorageConfig | false;
+}
+
 export default class Strapi {
   public axios: AxiosInstance;
+  public storeConfig: StoreConfig;
 
   /**
    * Default constructor.
    * @param baseURL Your Strapi host.
    * @param axiosConfig Extend Axios configuration.
    */
-  constructor(baseURL: string, requestConfig?: AxiosRequestConfig) {
+  constructor(
+    baseURL: string,
+    storeConfig?: StoreConfig,
+    requestConfig?: AxiosRequestConfig
+  ) {
     this.axios = axios.create({
       baseURL,
       paramsSerializer: qs.stringify,
       ...requestConfig
     });
+    this.storeConfig = {
+      cookie: {
+        key: 'jwt',
+        options: {
+          path: '/'
+        }
+      },
+      localStorage: {
+        key: 'jwt'
+      },
+      ...storeConfig
+    };
+
+    if (this.isBrowser()) {
+      let existingToken;
+      if (this.storeConfig.cookie) {
+        existingToken = Cookies.get(this.storeConfig.cookie.key);
+      } else if (this.storeConfig.localStorage) {
+        existingToken = JSON.parse(window.localStorage.getItem(
+          this.storeConfig.localStorage.key
+        ) as string);
+      }
+      if (existingToken) {
+        this.setToken(existingToken, true);
+      }
+    }
   }
 
   /**
@@ -163,7 +209,7 @@ export default class Strapi {
   ): Promise<Authentication> {
     this.clearToken();
     // Handling browser query
-    if (typeof window !== 'undefined') {
+    if (this.isBrowser()) {
       params = qs.parse(window.location.search, { ignoreQueryPrefix: true });
     }
     const authentication: Authentication = await this.request(
@@ -285,14 +331,47 @@ export default class Strapi {
    * Set token on Axios configuration
    * @param token Retrieved by register or login
    */
-  public setToken(token: string): void {
+  public setToken(token: string, comesFromStorage?: boolean): void {
     this.axios.defaults.headers.common.Authorization = 'Bearer ' + token;
+    if (this.isBrowser() && !comesFromStorage) {
+      if (this.storeConfig.localStorage) {
+        window.localStorage.setItem(
+          this.storeConfig.localStorage.key,
+          JSON.stringify(token)
+        );
+      }
+      if (this.storeConfig.cookie) {
+        Cookies.set(
+          this.storeConfig.cookie.key,
+          token,
+          this.storeConfig.cookie.options
+        );
+      }
+    }
   }
 
   /**
    * Remove token from Axios configuration
    */
-  private clearToken(): void {
+  public clearToken(): void {
     delete this.axios.defaults.headers.common.Authorization;
+    if (this.isBrowser()) {
+      if (this.storeConfig.localStorage) {
+        window.localStorage.removeItem(this.storeConfig.localStorage.key);
+      }
+      if (this.storeConfig.cookie) {
+        Cookies.remove(
+          this.storeConfig.cookie.key,
+          this.storeConfig.cookie.options
+        );
+      }
+    }
+  }
+
+  /**
+   * Check if it runs on browser
+   */
+  private isBrowser(): boolean {
+    return typeof window !== 'undefined';
   }
 }