baseuri.ts

const baseuri = Axios.create({
	baseURL: `${chooseEnvironment().base}/api`,
	headers: {
		...getLocation(),
		...getDeviceDetails(),
		authorization: String(chooseEnvironment().auth),
		authentication: `Basic ${retrieveToken().token}`,
	},
});

/**
 * Intercept the axios requests and add the necessary header properties
 * that the backend expects
 */

baseuri.interceptors.request.use((request) => {
	let req = request;
	const timestamp = moment().valueOf().toString();

	req = sanitizeRequestData(request).request;

	if (req.headers) {
		req.headers.apisignature = getApiSignature(req, timestamp);
		req.headers.timestamp = timestamp;
		req.headers.authentication = `Basic ${retrieveToken().token}`;
		return req;
	}
	throw new Error('no headers object');
});

example-request.ts

export const retrieveBlacklistedUsers = createAsyncThunk(
	'compliance/retrieveBlacklistedUsers',
	async (params: any) => {
		const res = await baseuri.get('/admin/blacklisted-device', {
			params,
		});
		return res.data.data;
	}
);

export const addBlacklistedUser = async (data: any) => {
	try {
		await baseuri.post('/admin/blacklisted-device', data);

		message.success('Added Successfully!');

		return null;
	} catch (e: any) {
		message.error(`Add failed! ${e.toString()}`);
		return null;
	}
};

request-helpers.ts

export const sanitizeRequestData = (request: AxiosRequestConfig) => {
	if (request.method === 'get') {
		return {
			data: trimObj(request.params),
			request: { ...request, params: trimObj(request.params) },
		};
	}

	if (request.method === 'post') {
		const isFormData = request.data instanceof FormData;

		if (!isFormData) {
			return {
				data: trimObj(request.data),
				request: { ...request, data: trimObj(request.data) },
			};
		}
	}

	if (request.method === 'put') {
		return {
			data: trimObj(request.data),
			request: { ...request, data: trimObj(request.data) },
		};
	}

	if (request.method === 'delete') {
		return {
			data: trimObj(request.data),
			request: { ...request, data: trimObj(request.data) },
		};
	}

	return { request: { ...request } };
};

export const getApiSignature = (
	request: AxiosRequestConfig,
	timestamp: string
) => {
	const { token, accessSecret } = retrieveToken();

	let payload = '';

	const sanitizedData = sanitizeRequestData(request);

	if (sanitizedData) {
		payload = new URLSearchParams(sanitizedData.data).toString();
	}

	const sigPayload = payload ? `${payload}&` : '';
	const sigText = `${sigPayload}timestamp=${timestamp}&api-key=${token}&api-secret=${accessSecret}`;

	if (accessSecret) {
		const signature = cryptojs
			.HmacSHA256(sigText, accessSecret)
			.toString(cryptojs.enc.Hex);

		return signature;
	}
	return '';
};