feat: refresh support

docs/.vuepress/config.js

@@ -30,6 +30,7 @@ module.exports = {
           collapsable: false,
           children: [
             '/schemes/local',
+            '/schemes/refresh',
             '/schemes/oauth2'
           ]
         },

docs/api/auth.md

@@ -113,6 +113,28 @@ Universally set token. The `name` parameter is optional and defaults to `options
 this.$auth.setToken('local', '.....')
 ```
 
+### `setRefreshToken(strategy, token)`
+
+Universally set refresh token.
+
+```js
+// Update refresh token
+this.$auth.setRefreshToken('local', '.....')
+```
+
+### `refreshToken()`
+
+Refreshes the token.
+
+
+
+> **TIP:** Useful to manually refresh the token when [autoRefresh](../schemes/refresh.md#autorefresh) is disabled
+
+```js
+// Refresh the token
+this.$auth.refreshToken()
+```
+
 ### `onError(handler)`
 
 Listen for auth errors: (`plugins/auth.js`)

docs/schemes/local.md

@@ -28,10 +28,14 @@ Example for a token based flow:
 auth: {
   strategies: {
     local: {
+      token: {
+        property: 'token'
+      },
+      user: 'user',
       endpoints: {
-        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
+        login: { url: '/api/auth/login', method: 'post' },
         logout: { url: '/api/auth/logout', method: 'post' },
-        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
+        user: { url: '/api/auth/user', method: 'get' }
       },
       // tokenRequired: true,
       // tokenType: 'bearer'
@@ -65,9 +69,18 @@ Each endpoint is used to make requests using axios. They are basically extending
 To disable each endpoint, simply set it's value to `false`.
 :::
 
-#### `propertyName`
+### `token`
+
+Here you configure the token options.
+
+#### `property`
+
+`property` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.token`.
+
+### `user`
+
+`user` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.user`.
 
-`propertyName` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.user`.
 
 ### `tokenRequired`
 

docs/schemes/refresh.md

@@ -0,0 +1,222 @@
+# Refresh
+
+[Source Code](https://github.com/nuxt-community/auth-module/blob/dev/lib/schemes/refresh.js)
+
+`refresh` is an extended version of `local` scheme, made for systems that use token refresh.
+
+You can set `_scheme` to `refresh` to enable it.
+
+## Usage
+
+To do a password based login by sending credentials in request body as a JSON object:
+
+```js
+this.$auth.loginWith('local', {
+  data: {
+    username: 'your_username',
+    password: 'your_password'
+  }
+})
+```
+
+To manually refresh the token:
+
+```js
+this.$auth.refreshToken()
+```
+
+Or enable [autoRefresh](#autorefresh) option to automatically refresh tokens.
+
+## Options
+
+Example for a token based flow:
+
+```js
+auth: {
+    strategies: {
+      local: {
+        _scheme: 'refresh',
+        token: {
+          property: 'access_token'
+        },
+        expiresIn: 'expires_in',
+        refreshToken: {
+          property: 'refresh_token'
+        },
+        user: 'user',
+        endpoints: {
+          login: { url: '/api/auth/login', method: 'post' },
+          refresh: { url: '/api/auth/refresh', method: 'post' },
+          user: { url: '/api/auth/user', method: 'get' },
+          logout: { url: '/api/auth/logout', method: 'post' }
+        },
+        // tokenType: 'bearer'
+      }
+    }
+  }
+```
+
+Example of auto refresh usage:
+
+```js
+auth: {
+    strategies: {
+      local: {
+        _scheme: 'refresh',
+        token: {
+          property: 'access_token'
+        },
+        expiresIn: 'expires_in',
+        refreshToken: {
+          property: 'refresh_token'
+        },
+        user: 'user',
+        endpoints: {
+          login: { url: '/api/auth/login', method: 'post' },
+          refresh: { url: '/api/auth/refresh', method: 'post' },
+          user: { url: '/api/auth/user', method: 'get' },
+          logout: { url: '/api/auth/logout', method: 'post' }
+        },
+        autoRefresh: {
+          enable: true
+        },
+        autoLogout: true,
+        // tokenType: 'bearer'
+      }
+    }
+  }
+```
+
+### `endpoints`
+
+Each endpoint is used to make requests using axios. They are basically extending Axios [Request Config](https://github.com/axios/axios#request-config).
+
+::: tip
+To disable each endpoint, simply set it's value to `false`.
+:::
+
+### `token`
+
+Here you configure the token options.
+
+#### `property`
+
+`property` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.token`.
+
+#### `maxAge`
+
+- Default: `1800`
+
+Different from [expiresIn](#expiresin), here you set the default expiration time of the token, in **milliseconds**.
+This time will be used if for some reason we couldn't get the value of [expiresIn](#expiresin).
+
+By default its value is 30 minutes.
+
+### `expiresIn`
+
+This is the token expiration time, in **milliseconds**. We will use this value to automatically generate the expiration date if we couldn't decode the token.
+
+`expiresIn` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.expires_in`
+
+### `issuedAt`
+
+`issuedAt` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.created_at`
+
+By default we try to decode the token, if we couldn't decode the token we will automatically generate the issue date if `issuedAt` is not defined.
+
+### `expiresAt`
+
+`expiresAt` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.created_at`
+
+By default we try to decode the token, if we couldn't decode the token we will automatically generate the expiration date using the [expiresIn](#expiresin) and [issuedAt](#issuedat) values if `expiresAt` is not defined.
+
+### `refreshToken`
+
+Here you configure the refresh token options.
+
+#### `property`
+
+`property` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.refresh_token`.
+
+#### `maxAge`
+
+- Default: `60 * 60 * 24 * 30`
+
+Here you set the expiration time of the refresh token, in **milliseconds**.
+You can set it to `false` if your refresh token doesn't expire.
+
+### `dataRefreshToken`
+
+- Default: `refresh_token`
+
+`dataRefreshToken` can be used to set the name of the property you want to send in the request.
+
+If you don't need it, you can set it to `false`.
+
+### `user`
+
+`user` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.user`.
+
+### `clientId`
+
+`clientId` can be used to specify which field of the response JSON to be used for value. It can be `false` to directly use API response or being more complicated like `auth.client_id`
+
+This option is for systems that uses client id. If you don't use client id, you can set it to `false`.
+
+### `dataClientId`
+
+- Default: `client_id`
+
+`dataClientId` can be used to set the name of the property you want to send in the request.
+
+This option is for systems that uses client id. If you don't use client id, you can set it to `false`.
+
+### `grantType`
+
+- Default: `refresh_token`
+
+It's the value of the grant type you want.
+
+This option is for systems that uses grant type. If you don't use grant type, you can set it to `false`.
+
+### `dataGrantType`
+
+- Default: `grant_type`
+
+`dataGrantType` can be used to set the name of the property you want to send in the request.
+
+This option is for systems that uses grant type. If you don't use grant type, you can set it to `false`.
+
+### `autoRefresh`
+
+Here you configure the auto refresh options.
+
+When enabled it will refresh the token before it expires. The auto refresh will happen when the time reach 75% of the expiration time or when the page is reloaded.
+
+#### `enable`
+
+- Default: `false`
+
+This option enables auto refresh.
+
+### `autoLogout`
+
+- Default: `false`
+
+This option will logout the user on load the page, if token has expired.
+
+::: tip
+Mostly used with [`autoRefresh`](#autorefresh).
+:::
+
+### `tokenName`
+
+- Default: `Authorization`
+
+Authorization header name to be used in axios requests.
+
+### `tokenType`
+
+- Default: `Bearer`
+
+Authorization header type to be used in axios requests.

examples/api/auth.js

@@ -16,16 +16,21 @@ app.use(
   jwt({
     secret: 'dummy'
   }).unless({
-    path: '/api/auth/login'
+    path: ['/api/auth/login', '/api/auth/refresh']
   })
 )
 
+// Refresh tokens
+const refreshTokens = {}
+
 // -- Routes --
 
 // [POST] /login
 app.post('/login', (req, res, next) => {
   const { username, password } = req.body
   const valid = username.length && password === '123'
+  const expiresIn = 15
+  const refreshToken = Math.floor(Math.random() * (1000000000000000 - 1 + 1)) + 1
 
   if (!valid) {
     throw new Error('Invalid username or password')
@@ -37,17 +42,67 @@ app.post('/login', (req, res, next) => {
       picture: 'https://github.com/nuxt.png',
       name: 'User ' + username,
       scope: ['test', 'user']
-    },
-    'dummy'
+    }, 'dummy', {
+      expiresIn
+    }
   )
 
+  refreshTokens[refreshToken] = {
+    accessToken,
+    user: {
+      username,
+      picture: 'https://github.com/nuxt.png',
+      name: 'User ' + username
+    }
+  }
+
   res.json({
     token: {
-      accessToken
+      accessToken,
+      refreshToken,
+      expiresIn,
+      clientId: '123'
     }
   })
 })
 
+app.post('/refresh', (req, res, next) => {
+  const { refreshToken } = req.body
+
+  if ((refreshToken in refreshTokens)) {
+    const user = refreshTokens[refreshToken].user
+    const expiresIn = 15
+    const newRefreshToken = Math.floor(Math.random() * (1000000000000000 - 1 + 1)) + 1
+    delete refreshTokens[refreshToken]
+    const accessToken = jsonwebtoken.sign(
+      {
+        user: user.username,
+        picture: 'https://github.com/nuxt.png',
+        name: 'User ' + user.username,
+        scope: ['test', 'user']
+      }, 'dummy', {
+        expiresIn
+      }
+    )
+
+    refreshTokens[newRefreshToken] = {
+      accessToken,
+      user: user,
+      clientId: '123'
+    }
+
+    res.json({
+      token: {
+        accessToken,
+        refreshToken: newRefreshToken,
+        expiresIn
+      }
+    })
+  } else {
+    res.sendStatus(401)
+  }
+})
+
 // [GET] /user
 app.get('/user', (req, res, next) => {
   res.json({ user: req.user })