Refactor Token in API calls

Author: luizrrodrigues

.circleci/config.yml

@@ -28,7 +28,7 @@ jobs:
       - attach_workspace:
           at: .
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
-      - run: npm publish
+      - run: npm publish --tag test-release
 # dont change anything
 workflows:
   version: 2

__tests__/services/api.js

@@ -78,44 +78,48 @@ describe('Test api', () => {
   }
 
   let api;
-  test('API v2 service works without auth token', () => {
-    api = getApi('V2');
+  test('API v2 service works without auth token', async () => {
+    api = await getApi('V2');
     return testApi(api, config.API.V2);
   });
 
-  test('API v2 service works with auth token', () => {
-    api = getApi('V2', 'TOKEN');
+  test('API v2 service works with auth token', async () => {
+    api = await getApi('V2', 'TOKEN');
     return testApi(api, config.API.V2, 'TOKEN');
   });
 
   test(
-    'API v2 service from the previous call is re-used, if token is the same',
-    () => expect(getApi('V2', 'TOKEN')).toBe(api),
+    'API v2 service from the previous call is re-used, if token is the same', async () => {
+      const api2 = await getApi('V2', 'TOKEN');
+      expect(api2).toBe(api);
+    },
   );
 
-  test('New API v2 service is created if token is new', () => {
-    const api2 = getApi('V2', 'TOKEN2');
+  test('New API v2 service is created if token is new', async () => {
+    const api2 = await getApi('V2', 'TOKEN2');
     expect(api2).not.toBe(api);
     return testApi(api2, config.API.V2, 'TOKEN2');
   });
 
-  test('API v3 service works without auth token', () => {
-    api = getApi('V3');
+  test('API v3 service works without auth token', async () => {
+    api = await getApi('V3');
     return testApi(api, config.API.V3);
   });
 
-  test('API v3 service works with auth token', () => {
-    api = getApi('V3', 'TOKEN');
+  test('API v3 service works with auth token', async () => {
+    api = await getApi('V3', 'TOKEN');
     return testApi(api, config.API.V3, 'TOKEN');
   });
 
   test(
-    'API v3 service from the previous call is re-used, if token is the same',
-    () => expect(getApi('V3', 'TOKEN')).toBe(api),
+    'API v3 service from the previous call is re-used, if token is the same', async () => {
+      const api2 = await getApi('V3', 'TOKEN');
+      return expect(api2).toBe(api);
+    },
   );
 
-  test('New API v3 service is created if token is new', () => {
-    const api2 = getApi('V3', 'TOKEN2');
+  test('New API v3 service is created if token is new', async () => {
+    const api2 = await getApi('V3', 'TOKEN2');
     expect(api2).not.toBe(api);
     return testApi(api2, config.API.V3, 'TOKEN2');
   });

package.json

@@ -31,7 +31,7 @@
     "lint:js": "./node_modules/.bin/eslint --ext .js,.jsx .",
     "test": "npm run lint && npm run jest"
   },
-  "version": "1.1.1",
+  "version": "1000.25.3",
   "dependencies": {
     "auth0-js": "^6.8.4",
     "config": "^3.2.0",

src/actions/auth.js

@@ -37,11 +37,11 @@ async function checkErrorV5(res) {
  * @param {String} userTokenV3 v3 authentication token.
  * @return {Action}
  */
-function loadProfileDone(userTokenV3) {
+async function loadProfileDone(userTokenV3) {
   if (!userTokenV3) return Promise.resolve(null);
   const user = decodeToken(userTokenV3);
-  const apiV3 = getApiV3(userTokenV3);
-  const apiV5 = getApiV5(userTokenV3);
+  const apiV3 = await getApiV3(userTokenV3);
+  const apiV5 = await getApiV5(userTokenV3);
   return Promise.all([
     apiV3.get(`/members/${user.handle}`)
       .then(res => res.json()).then(res => (res.result.status === 200 ? res.result.content : {})),

src/actions/smp.js

@@ -21,8 +21,9 @@ function deleteSubmissionInit() {}
  * @param {Number|String} submissionId Submission ID.
  * @return {Action}
  */
-function deleteSubmissionDone(tokenV3, submissionId) {
-  return getApi('V5', tokenV3).delete(`/submissions/${submissionId}`)
+async function deleteSubmissionDone(tokenV3, submissionId) {
+  const apiV5 = await getApi('V5', tokenV3);
+  return apiV5.delete(`/submissions/${submissionId}`)
     .then(() => submissionId);
 }
 

src/services/__mocks__/challenges.js

@@ -253,11 +253,12 @@ class ChallengesService {
    * Gets possible challenge types.
    * @return {Promise} Resolves to the array of challenge type names.
    */
-  getChallengeTypes() {
+  async getChallengeTypes() {
+    const apiV2 = await this.private.apiV2;
     return Promise.all([
-      this.private.apiV2.get('/design/challengetypes')
+      apiV2.get('/design/challengetypes')
         .then(res => (res.ok ? res.json() : new Error(res.statusText))),
-      this.private.apiV2.get('/develop/challengetypes')
+      apiV2.get('/develop/challengetypes')
         .then(res => (res.ok ? res.json() : new Error(res.statusText))),
     ]).then(([a, b]) => a.concat(b));
   }
@@ -266,8 +267,9 @@ class ChallengesService {
    * Gets possible challenge tags (technologies).
    * @return {Promise} Resolves to the array of tag strings.
    */
-  getChallengeTags() {
-    return this.private.api.get('/technologies')
+  async getChallengeTags() {
+    const api = await this.private.api;
+    return api.get('/technologies')
       .then(res => (res.ok ? res.json() : new Error(res.statusText)))
       .then(res => (
         res.result.status === 200
@@ -311,9 +313,10 @@ class ChallengesService {
    * @param {String} challengeId
    * @return {Promise}
    */
-  register(challengeId) {
+  async register(challengeId) {
+    const apiV2 = await this.private.apiV2;
     const endpoint = `/challenges/${challengeId}/register`;
-    return this.private.apiV2.postJson(endpoint)
+    return apiV2.postJson(endpoint)
       .then(res => (res.ok ? res.json() : new Error(res.statusText)));
   }
 
@@ -322,9 +325,10 @@ class ChallengesService {
    * @param {String} challengeId
    * @return {Promise}
    */
-  unregister(challengeId) {
+  async unregister(challengeId) {
+    const apiV2 = await this.private.apiV2;
     const endpoint = `/challenges/${challengeId}/unregister`;
-    return this.private.apiV2.post(endpoint)
+    return apiV2.post(endpoint)
       .then(res => (res.ok ? res.json() : new Error(res.statusText)));
   }
 

src/services/__mocks__/groups.js

@@ -184,8 +184,9 @@ class GroupService {
    * @param {String} membershipType
    * @return {Promise}
    */
-  addMember(groupId, memberId, membershipType) {
-    return this.private.api.postJson(`/groups/${groupId}/members`, {
+  async addMember(groupId, memberId, membershipType) {
+    const api = await this.private.api;
+    return api.postJson(`/groups/${groupId}/members`, {
       param: { memberId, membershipType },
     }).then(handleApiResponse);
   }
@@ -202,12 +203,13 @@ class GroupService {
    *  whether the response should information about sub-groups, if any.
    * @return {Promise} On success resolves to the group data object.
    */
-  getGroup(groupId, withSubGroups = true) {
+  async getGroup(groupId, withSubGroups = true) {
+    const api = await this.private.api;
     let url = `/groups/${groupId}`;
     if (withSubGroups) {
       url = `${url}/getSubGroups?includeSubGroups=true&oneLevel=false`;
     }
-    return this.private.api.get(url).then(handleApiResponse);
+    return api.get(url).then(handleApiResponse);
   }
 
   /**
@@ -255,8 +257,9 @@ class GroupService {
    * @return {Promise} On sucess resolves to the array of member objects,
    *  which include user IDs, membership time, and some bookkeeping data.
    */
-  getMembers(groupId) {
-    return this.private.api.get(`/groups/${groupId}/members`)
+  async getMembers(groupId) {
+    const api = await this.private.api;
+    return api.get(`/groups/${groupId}/members`)
       .then(handleApiResponse);
   }
 

src/services/api.js

@@ -6,6 +6,7 @@
 import _ from 'lodash';
 import fetch from 'isomorphic-fetch';
 import { config, isomorphy } from 'topcoder-react-utils';
+import { isTokenExpired, getFreshToken, configureConnector } from '@topcoder-platform/tc-auth-lib';
 import { auth } from 'tc-core-library-js';
 import { delay } from '../utils/time';
 import {
@@ -251,12 +252,25 @@ const lastApiInstances = {};
  * @param {String} token Optional. Auth token for Topcoder API.
  * @return {Api} API service object.
  */
-export function getApi(version, token) {
+export async function getApi(version, token) {
+  let nToken = token;
+  if (isomorphy.isClientSide() && nToken && isTokenExpired(nToken)) {
+    configureConnector({
+      connectorUrl: config.URL.ACCOUNTS_APP_CONNECTOR,
+      frameId: 'tc-accounts-iframe',
+      frameTitle: 'Accounts authentication window',
+    });
+    console.log('currently Token: ', nToken);
+    console.log('token expired, getting new one...');
+    nToken = await getFreshToken();
+    console.log('newToken: ', nToken);
+  }
+
   if (!version || !config.API[version]) {
     throw new Error(`${version} is not a valid API version`);
   }
-  if (!lastApiInstances[version] || lastApiInstances[version].private.token !== token) {
-    lastApiInstances[version] = new Api(config.API[version], token);
+  if (!lastApiInstances[version] || lastApiInstances[version].private.token !== nToken) {
+    lastApiInstances[version] = new Api(config.API[version], nToken);
   }
   return lastApiInstances[version];
 }
@@ -266,10 +280,10 @@ export function getApi(version, token) {
  * DO NOT USE THEM FOR NEW IMPLEMENTATIONS.
  * USE THE getApi(version, token) FACTORY.
  */
-export const getApiV2 = token => getApi('V2', token);
-export const getApiV3 = token => getApi('V3', token);
-export const getApiV4 = token => getApi('V4', token);
-export const getApiV5 = token => getApi('V5', token);
+export const getApiV2 = async token => getApi('V2', token);
+export const getApiV3 = async token => getApi('V3', token);
+export const getApiV4 = async token => getApi('V4', token);
+export const getApiV5 = async token => getApi('V5', token);
 
 /**
  * Gets a valid TC M2M token, either requesting one from TC Auth0 API, or

src/services/billing.js

@@ -30,8 +30,9 @@ class Billing {
    * Gets billing accounts accessible to service user.
    * @return {Promise} Resolves to the list of billing account objects.
    */
-  getUserBillingAccounts() {
-    return this.private.api.fetch();
+  async getUserBillingAccounts() {
+    const api = await this.private.api;
+    return api.fetch();
   }
 }