Nuxt Auth V5 + custom scheme, refresh method fires twice

[avxkim]

Package version: "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1"

Using custom scheme:

refreshTokens() {
    // Refresh endpoint is disabled
    if (!this.options.endpoints.refresh) {
      return Promise.resolve()
    }

    // Token and refresh token are required but not available
    if (!this.check().valid) {
      return Promise.resolve()
    }

    // Get refresh token status
    const refreshTokenStatus = this.refreshToken.status()

    // Refresh token is expired. There is no way to refresh. Force reset.
    if (refreshTokenStatus.expired()) {
      this.$auth.reset()

      throw new ExpiredAuthSessionError()
    }

    // Delete current token from the request header before refreshing, if `tokenRequired` is disabled
    if (!this.options.refreshToken.tokenRequired) {
      this.requestHandler.clearHeader()
    }

    const endpoint = {
      data: `grant_type=refresh_token&client_id=${
        this.options.clientId
      }&refresh_token=${this.refreshToken.get()}`,
    }

    return this.$auth
      .request(endpoint, this.options.endpoints.refresh)
      .then(response => {
        // Update tokens
        this.updateTokens(response, { isRefreshing: true })
        return response
      })
      .catch(error => {
        this.$auth.callOnError(error, { method: 'refreshToken' })
        return Promise.reject(error)
      })
}

Also using auth middleware in nuxt.config.js:

router: {
  middleware: ['auth'],
}

Causing an issue, when access token expires, it successfully calls for a refresh method and i'm getting the new access/refresh token, but auth middleware fires refresh method 2nd time, thus causing an error and logging me out:

First request ended with success, but the 2nd one is getting invoked by auth middleware with the same refresh token value, causing error 400: Maximum allowed refresh token reuse exceeded

UPDATE 1

It happens when i have api request call bound to a button click, auth middleware fires at the same time with the API request, but it's always after API request. If i navigate normally between the routes (not calling api on the same route) auth middleware works as intended.

[sts-ryan-holton]

@avxkim I'm getting a similar issue, except in my example I'm using the Laravel JWT scheme and I'm seeing 7 hits to my refresh token endpoint, first succeeds, the others fail and the app logs me out, even during normal page route changes on my app, and idea how to resolve?

[dgtvc]

@avxkim I'm getting a similar issue, except in my example I'm using the Laravel JWT scheme and I'm seeing 7 hits to my refresh token endpoint, first succeeds, the others fail and the app logs me out, even during normal page route changes on my app, and idea how to resolve?

FYI @sts-ryan-holton @avxkim

Try to change schema to refresh i don't know why, but default schema overrides updateOnRefresh and refresh token is not replaced with new one.

https://github.com/nuxt-community/auth-module/blob/dev/src/schemes/laravel-jwt.ts

Example:

  auth: {
    strategies: {
      default: {
        provider: 'laravel/jwt',
        scheme: 'refresh',
        url: 'http://example.com',
        endpoints: {
          ...,
        },
        token: {
          property: 'access_token',
          maxAge: 10 * 1,
        },
        refreshToken: {
          property: 'refresh_token',
          required: true,
          data: 'refresh_token',
          tokenRequired: true,
          maxAge: 60 * 60 * 24 * 30,
        },
      },
    },
  },

[Fauphi]

@avxkim I had the same problem and think I found a solution by extending your scheme with a "isRefreshing" flag:

refreshTokens() {
    // Refresh endpoint is disabled
    if (!this.options.endpoints.refresh) {
        return Promise.resolve()
    }

    // Token and refresh token are required but not available
    if (!this.check().valid) {
        return Promise.resolve()
    }

    // Get refresh token status
    const refreshTokenStatus = this.refreshToken.status()

    // Refresh token is expired. There is no way to refresh. Force reset.
    if (refreshTokenStatus.expired()) {
        this.$auth.reset()

        throw new ExpiredAuthSessionError()
    }

    // Delete current token from the request header before refreshing, if `tokenRequired` is disabled
    if (!this.options.refreshToken.tokenRequired) {
        this.requestHandler.clearHeader()
    }

    const endpoint = {
        data: {
            refreshToken: this.refreshToken.get(),
        },
    }

    // this prevents multiple refresh-token requests
    if (this.isRefreshing) {
        return this.refreshPromise
    }

    this.isRefreshing = true

    this.refreshPromise = this.$auth
        .request(endpoint, this.options.endpoints.refresh)
        .then((response) => {
            this.isRefreshing = false
            this.refreshPromise = null
            // Update tokens
            this.updateTokens(response, { isRefreshing: true })
            return response
        })
        .catch((error) => {
            this.isRefreshing = false
            this.refreshPromise = null
            this.$auth.callOnError(error, { method: 'refreshToken' })
            return Promise.reject(error)
        })

    return this.refreshPromise
}

[avxkim]

@Fauphi what exact version you got? I kinda solved this issue, but can't remember how.

[Fauphi]

@avxkim
Version: "@nuxtjs/auth-next": "5.0.0-1637745161.ea53f98"

Works fine for me now.