Axios Interceptor Refresh Token called multiple times on parallel axios request

[tokidoki11]

Version

module: "5.0.0-1643791578.532b3d6"
nuxt: ^2.15.7

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

Reproduction

1. in the cookie, update token expiry to 1 (making the token expired)
2. Run axios request on parallel

What is expected?

1. RequestToken is only run once

What is actually happening?

1. Refresh Token runs twice

Additional information

I have separate axios instance for calling API other than auth0

const internalAxios = $axios.create()
internalAxios.onRequest(async (config: AxiosRequestConfig): Promise<AxiosRequestConfig> => {
    const auth0Strategy = app.$auth.strategy as Auth0Scheme
    if (!auth0Strategy.token.status().valid()) {
      if (auth0Strategy.refreshToken.status().valid()) {
        await app.$auth.refreshTokens()
      } else {
        app.$auth.reset()
        app.$auth.loginWith('auth0')
      }
    }
    config.headers.authorization = decodeURI(auth0Strategy.token.get() as string)
    return config
  })

Calling refreshToken via $auth will call the refresh Token only once
On further investigation calling refreshToken via $auth will trigger

auth-module/src/core/auth.ts

Lines 266 to 279 in c9880dc

	refreshTokens(): Promise<HTTPResponse | void> {
	if (!(this.getStrategy() as RefreshableScheme).refreshController) {
	return Promise.resolve()
	}
	return Promise.resolve(
	(
	this.getStrategy() as RefreshableScheme
	).refreshController.handleRefresh()
	).catch((error) => {
	this.callOnError(error, { method: 'refreshTokens' })
	return Promise.reject(error)
	})
	}

auth-module/src/inc/refresh-controller.ts

Lines 13 to 20 in c9880dc

	handleRefresh(): Promise<HTTPResponse | void> {
	// Another request has started refreshing the token, wait for it to complete
	if (this._refreshPromise) {
	return this._refreshPromise
	}
	return this._doRefresh()
	}

But the interceptor will call this in which it doesnt check whether refresh Token is still ongoing or not

auth-module/src/inc/request-handler.ts

Lines 61 to 68 in c9880dc

	isValid = await (this.scheme as RefreshableScheme)
	.refreshTokens()
	.then(() => true)
	.catch(() => {
	// Tokens couldn't be refreshed. Force reset.
	this.scheme.reset()
	throw new ExpiredAuthSessionError()
	})

auth-module/src/schemes/oauth2.ts

Line 433 in c9880dc

async refreshTokens(): Promise<HTTPResponse | void> {

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

[florianPat]

Hi @tokidoki11,
we face exactly the same issue. We decorated the RequestHandlers "requestInterceptor" and added a promise queue to let other requests wait on the one who initiated it:

async requestInterceptor(config) {
        // eslint-disable-next-line no-underscore-dangle,no-console
        console.log('this token', this)
        // eslint-disable-next-line no-underscore-dangle
        if (!this._needToken(config) || config.url === this.refreshEndpoint) {
            return config
        }
        const {
            valid,
            tokenExpired,
            refreshTokenExpired,
            isRefreshable,
        } = this.scheme.check(true)
        let isValid = valid
        if (refreshTokenExpired) {
            this.scheme.reset()
            throw new ExpiredAuthSessionError()
        }
        if (tokenExpired) {
            if (!isRefreshable) {
                this.scheme.reset()
                throw new ExpiredAuthSessionError()
            }
            // eslint-disable-next-line no-console
            console.log('token expired')
            if (this.promiseQueue.working) {
                // eslint-disable-next-line no-console
                console.log('waiting on the refresh')
                await this.promiseQueue.enqueue(() => new Promise((resolve) => {
                    resolve()
                }))
                return this.requestInterceptor(config)
            }
            isValid = await this.promiseQueue.enqueue(async () => {
                // eslint-disable-next-line no-console
                console.log('enqueue new refresh')
                this.scheme.refreshTokens()
                    .then(() => true)
                    .catch(() => {
                        this.scheme.reset()
                        throw new ExpiredAuthSessionError()
                    })
            })
        }
        const token = this.scheme.token.get()
        if (!isValid) {
            // eslint-disable-next-line no-underscore-dangle
            if (!token && this._requestHasAuthorizationHeader(config)) {
                throw new ExpiredAuthSessionError()
            }
            return config
        }
        // eslint-disable-next-line no-underscore-dangle
        return this._getUpdatedRequestConfig(config, token)
    }

    initializeRequestInterceptor(refreshEndpoint) {
        this.refreshEndpoint = refreshEndpoint
        this.interceptor = this.axios.interceptors.request.use(this.requestInterceptor.bind(this))
    }

What do people think about this solution?

Regards,
Flo

[thomasv]

That's fine @florianPat - could you post the implementation your promise queue? Maybe thats a fix that can be implemented directly in the RequestHandler.initializeRequestInterceptor()?

Or would it be an alternative to request a new token just every time before it gets expired and not when it is "too late". But, I know, requests during token updating would have to be queued, too.

[sadeghi-aa]

What do people think about this solution?

Regards, Flo

Where should I put this function?

[trandaison]

I opened a PR to fix this: #1796

[trandaison]

This bug has been fixed in v5.0.0-1667386184.dfbbb54.