@motia/nuxt-auth-refresh

An ad hoc module to add authentication refresh to @nuxtjs/auth

Usage no npm install needed!

<script type="module">
  import motiaNuxtAuthRefresh from 'https://cdn.skypack.dev/@motia/nuxt-auth-refresh';
</script>

README

An ad-hoc module to periodically refresh @nuxtjs/auth for the local scheme. Build Status

Setup

  • Install the npm package
npm install nuxt-auth-refresh
# or 
yarn add nuxt-auth-refresh
  • Register the module before @nuxtjs/auth and @nuxtjs/axios
// nuxt.config.js
modules: [
    ['nuxt-auth-refresh', config.refreshAuth],
    ['@nuxtjs/auth', config.auth],
    ['@nuxtjs/axios', config.axios],
]

The module will automatically start the refresh interval after logging in.

  • Add a client side plugin to start the refresh interval for users authenticated from stored token.
// ~/plugins/refresh-auth-token.js
export default ({app, store}) => {
    await (
        app.$auth.loggedIn ? app.$auth.fetchUserOnce().catch((e) => {}) : null
    )

    if(app.$auth.user) {
        app.$authRefresh.initRefreshInterval()
    }
}

// nuxt.config.js
auth: {
    plugins: [
        '~/plugins/refresh-auth-token'
    ]
}
  • You can attach an error handler for the refresh attempts
app.$authRefresh.onRefreshError((e) => {
    // handle the token refresh here
})

Options

{
  // the namespace for our vuex module
  vuexNamespace: 'refreshAuth',

  // a key used to store the refresh token
  storageKey: 'my_refresh_token_key',

  // the link for login
  loginUrl: '/auth/login',

  // access token key in login success response and refresh request
  accessTokenKey: 'access_token',

  // refresh token key in login success response and refresh request
  refreshTokenKey: 'refresh_token',
}