Auth-module: refresh token with expired authorization token

[HenriqueLimaUpp]

Hi guys, i'm using v5 and facing a issue to get auto refresh token, because the request to get a new token is being sent when the authorization token is already expired, then i'm receiving status code 403 from response. What can i do on my client side to fix that?

[Atinux]

cc @JoaoPedroAS51

[JoaoPedroAS51]

Hi @HenriqueLimaUpp ! The refresh endpoint in your backend shouldn't be protected by authorization token. That's the easier way to fix.

But if there is no way to fix the endpoint, I recommend creating a custom sheme that extends the refresh scheme, then add a method to schedule auto refresh. See #910

The built-in auto refresh feature was removed, but you can take a look a the code at #634

If you need help to make the auto refresh, just ping me. :)

[HenriqueLimaUpp]

Custom scheme worked like a charm! Thank you very much, @JoaoPedroAS51

[HenriqueLimaUpp]

One last thing @JoaoPedroAS51 , although it worked great, i did override the login method for initialize auto refresh schedule when user sign in. It's there another way to add listener in to login request or call initializeScheduledRefresh method properly?

[HenriqueLimaUpp]

I figout out there is a watchState method, that works great as well ;)

[JoaoPedroAS51]

Hi @HenriqueLimaUpp! When creating your custom scheme, import the refresh scheme like this:

import RefreshScheme from '~auth/schemes/refresh'

Otherwise, you may get the error: Cannot use import statement outside a module

I just updated #910, fixing the example.

[CavalcanteLeo]

Custom scheme worked like a charm! Thank you very much, @JoaoPedroAS51

Can you share the code?

[HenriqueLimaUpp]

Custom scheme worked like a charm! Thank you very much, @JoaoPedroAS51

Can you share the code?

nuxt.config.js

  auth: {
    strategies: {
      local: {
        // scheme: 'refresh',
        scheme: '~/schemes/auto-refresh-token',
        token: {
          property: 'token',
          type: ''
        },
        refreshToken: {
          property: 'refresh_token',
          tokenRequired: true
        },

schemes/auto-refresh-token.js

import RefreshScheme from '@nuxtjs/auth-next/dist/schemes/refresh'
import Token from '@nuxtjs/auth-next/dist/inc/token'
import RefreshController from '@nuxtjs/auth-next/dist/inc/refresh-controller'

export default class CustomScheme extends RefreshScheme {
  constructor ($auth, options) {
    super($auth, options)
    this.token = new Token(this, this.$auth.$storage)
    this.refreshController = new RefreshController(this)
    this._refreshInterval = undefined

    this.$auth.$storage.watchState('loggedIn', () => {
      if (this.$auth.loggedIn) {
        this.initializeScheduledRefresh()
      } else {
        clearInterval(this._refreshInterval)
      }
    })
  }

  refreshIn () {
    return (this.token._getExpiration() - Date.now()) * 0.75
  }

  initializeScheduledRefresh () {
    if (!this.$auth.loggedIn) {
      return
    }

    let intervalDurationMillis = this.refreshIn()

    if (intervalDurationMillis < 1000) {
      // in case you misconfigured refreshing this will save your auth-server from a self-induced DDoS-Attack
      intervalDurationMillis = 1000
    }

    clearInterval(this._refreshInterval)

    this._refreshInterval = setInterval(() => {
      this.refreshController.handleRefresh()
        .then(() => this.initializeScheduledRefresh())
    }, intervalDurationMillis)
  }
}

[HenriqueLimaUpp]

Hi @HenriqueLimaUpp! When creating your custom scheme, import the refresh scheme like this:

import RefreshScheme from '~auth/schemes/refresh'

Otherwise, you may get the error: Cannot use import statement outside a module

I just updated #910, fixing the example.

I don't got this error, but i'm gonna fix the import. Thank you!

[JoaoPedroAS51]

@HenriqueLimaUpp @CavalcanteLeo Hey guys! Next release of auth-next will introduce a breaking change to custom schemes.

This will be the new way to import schemes:

import { RefreshScheme } from '~auth/runtime'

Note that it wasn't released yet.

It was released right now: 5.0.0-1608136537.029f778

[CavalcanteLeo]

I updated to auth-next, but something weird is happening.

After login, the page is not redirected, and even if i type the URL on browser, it goes to login page, and the cache is all set with the a valid token after login. @JoaoPedroAS51

[JoaoPedroAS51]

@CavalcanteLeo Thank you for report! Can you open a new issue, with your config and if possible, a repro link? This would make it easier to understand what is happening :)