Myujth

So I have an API and I am trying to authenticate by hitting an endpoint with credentials (this part I've gotten working) and then save the received token and use it in all subsequent requests.

My problem is that the authenticate() method is asynchronous, but all other request methods like get() need the token from the authenticate() method. So I can't just export my get() method because the export is synchronous (as I've read) and it will be exported before authentication happens. I could authenticate for every request but that seems wasteful and inefficient.

I am not sure what to do here, I'm using axios, what's the proper way of doing this?

Edit

I'll be a bit more specific here. I have created an axios instance:

var instance = axios.create(
 baseURL: `http://$config.server:$config.port`,
 timeout: 1000,
 headers: 
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 
)

I want to get the authentication token, and include it in the instance header:

async function authenticate(instance) 
 const result = await instance.post(
 '/session',
 
 'username': config.username,
 'password': config.password
 
 )
 instance['X-Token'] = result.data.token

Now I want to export that instance to be used in other files

You can use async/await. This is semi-pseudocode:

async function doStuff() 
 const result = await axios.authenticate();
 const token = // extract token from whatever format of result is
 const data = await axios.get(/* supply token to get */); 

Alternatively, you can just use then:

function doStuff(token) 
 const token = // extract token from whatever format of result is
 const data = await axios.get(/* supply token to get */); 


axios.authenticate().then(result => 
 const token = // extract token from whatever format of result is
 doStuff(token);

With Axios you have the ability to set default values for all requests.

So for just a single axios instance you can do...

async function authenticate(instance) 
 const result = await instance.post(
 '/session',
 
 'username': config.username,
 'password': config.password
 
 )
 instance.defaults.headers.common['X-Token'] = result.data.token;

Alternatively, (which it sounds like you want to do) you can add it for the default Axios export. Then all requests will automatically have the header.

async function authenticate(endpoint, username, password) 
 const res = await axios.post(`$endpoint/session`, username, password );
 axios.defaults.headers.common['X-Token'] = result.data.token; 

Then you don't have to worry about passing around an instance between all parts of your app and can just use import * as axios from 'axios' and have the header set.

Axios also provides and extremely helpful function called interceptors which you can use to inspect a request prior to making it. You can use to check to make sure that the request has the auth header and if it doesn't you can perform that logic. I came up with this and it seems to work well!

axios.interceptors.request.use(async (config) => 
 // request intercepted, check (1) the header is missing and (2) that the intercepted request isn't authorizing
 if (!config.headers.common['X-Token'] && config.authorizing !== true) 
 const endpoint, username, password = appConfig;

 // make a request to get your token AND pass our custom config
 const result = await axios.post(`$endpoint/session`, username, password , authorizing: true );

 // update axios to include the header for future requests
 axios.defaults.headers.common['X-Token'] = result.data.token;
 
 return config;
);

Two things that you'll want to note -- not only do I check for the existence of your X-token header I also check for a new authorization value in the config. You want to check for that config value, because we are going to use it as a flag to let the interceptor know if it should skip a request. If you don't do this, the authorization request will trigger another authorization request and infinite loop.