feat: improve module (nuxt-community#922)

* demo: use type `NuxtConfig` in `nuxt.config.ts`

* feat: improve types

* feat(schemes): set constructor types

* refactor: rename contract `PartialOptions` to `SchemePartialOptions`

* feat(providers): add contracts `ProviderOptions` and `ProviderPartialOptions`

* feat(sanctum provider): improve types

* chore: fix lint

* refactor(sanctum provider): reorder extends

* fix(provider): fix type `ProviderPartialOptions`

* fix(schemes): `property` and `data` of `refreshToken` should accept `false`

* fix(schemes): fix types of `scope` and `endpoints`

* feat(jwt provider): improve types

* feat(passport provider): improve types

* refactor(sanctum provider): use `typeof strategy` for `DEFAULTS` type

* feat(github provider): improve types

* feat(facebook provider): improve types

* feat(google provider): improve types

* feat(auth0 provider): improve types

* feat(module): improve types

* chore(eslint): use recommended typescript rules

* feat(schemes): improve types

* feat(schemes): use `protected` and `private` modifiers

* fix(schemes): return type of logout should be `Promise<void> | void`

* fix(oauth2 scheme): return type of logout should be `void`

* feat(providers): improve types

* feat(inc): improve types

* feat(inc): use `private` modifiers

* fix(types): add plugins option to type `ModuleOptions`

* feat(types): improve option types of `ModuleOptions`

* feat(module): improve types

* fix(oauth2 scheme): use `+ ''` instead of `toString()`

* test: fix method names

* fix(token, refresh token): use type `string | boolean`

* feat(utils): improve types

* fix(types): add `ignoreExceptions` option to type `ModuleOptions`

* fix(scheme): fix type `Scheme`

* fix(scheme): fix type `RefreshableScheme`

* fix(refresh scheme): fix type of `setUserToken` params

* fix(core): fix property `tokenName` in `requestWith`

* fix(local scheme): fix return type of `mounted`

* fix(utils): fix types

* fix(inc): fix types

* feat(core): improve types

* chore(tsconfig): enable `resolveJsonModule`

* chore(eslint): fix extends order

* chore(dev-deps): add `vue` and `@types/lodash.get`

* chore(dev-deps): add @types/cookie-parser, @types/express-jwt, and @types/jsonwebtoken

* demo: improve types

* demo: update tsconfig

* chore: update tsconfig

* chore(scripts): use `import` instead of `require`

* fix(schemes): fix return type of `mounted`

* fix(utils): fix type of `encodeQuery`

* fix(local scheme): fix type of `login` endpoint in `LocalSchemeOptions`

* fix(providers): add `clientSecret` to type `ProviderOptions`

* feat(utils): improve types of provider utilities

* demo: update tsconfig

* demo: use `nuxt/components`

* demo: fix auth options

* demo(api): fix export default

* fix(module): set default value of `ignoreExceptions` to `false`

* test: improve types

* test: update tsconfig

* chore(jest): use `tsconfig` instead of `tsConfig`

The option `tsConfig` is deprecated and will be removed in ts-jest 27, use `tsconfig` instead.

* chore(jest): ignore fixture

* demo: convert api and store files back to js

* chore(eslint): ignore test/fixture

* fix: add `_` prefix to private methods

* refactor(providers): move contracts to index.ts

* refactor(schemes): move contracts to index.ts

* refactor(schemes): export scheme options directly in scheme file

* feat: export scheme and provider types at top level

* chore(tsconfig): set `baseUrl`

* chore(dev-deps): use `latest` version

* refactor: simplify types, update structure and use named exports

* refactor: type leftovers

* refactor: simplify and apply prettier rules

* refactor: update module and demo

* chore: show error trace in demo

* feat: throw better errors for invalid strategy

* fix typo in template

* update demo

* chore: fix lint errors

* fix custom scheme imports

* test: use @nuxt/test-utils

* feat(pkg): use siroc

* fix: resolve rescursive types

* update top level index.d

* fix getProp

* update ci

* remove dependency on nanoid and jwt-decode named exports

* fix demo types

* revert demo to custom vps because of sticky sessions

Co-authored-by: Pooya Parsa <[email protected]>

.eslintignore

@@ -3,3 +3,4 @@ node_modules
 .nuxt
 dist
 docs/static/sw.js
+test/fixture

.eslintrc

@@ -2,20 +2,12 @@
   "extends": [
     "@nuxtjs/eslint-config-typescript",
     "prettier",
-    "prettier/vue",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "prettier/vue"
   ],
   "plugins": [
     "prettier"
   ],
   "rules": {
-    "prettier/prettier": "error",
-    "require-await": "off",
-    "no-useless-constructor": "off",
-    // Correct support for unused var detection in Typescript:
-    // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error"]
+    "prettier/prettier": "error"
   }
 }

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [10]
+        node: [14]
       fail-fast: true
 
     steps:

.gitignore

@@ -9,4 +9,3 @@ coverage
 dist
 package-lock.json
 _book
-types

demo/api/auth.js

@@ -1,8 +1,8 @@
-const express = require('express')
-const bodyParser = require('body-parser')
-const cookieParser = require('cookie-parser')
-const jwt = require('express-jwt')
-const jsonwebtoken = require('jsonwebtoken')
+import express from 'express'
+import bodyParser from 'body-parser'
+import cookieParser from 'cookie-parser'
+import jwt from 'express-jwt'
+import jsonwebtoken from 'jsonwebtoken'
 
 // Create app
 const app = express()
@@ -123,7 +123,7 @@ app.use((err, _req, res) => {
 })
 
 // -- export app --
-module.exports = {
+export default {
   path: '/api/auth',
   handler: app
 }

demo/api/oauth2mockserver.js

@@ -1,4 +1,4 @@
-const express = require('express')
+import express from 'express'
 
 // Generated at http://jwtbuilder.jamiekurtz.com/
 const TOKEN_NEVER_EXPIRING =
@@ -36,7 +36,7 @@ app.get('/cats', (_req, res) => {
 })
 
 // -- export app --
-module.exports = {
+export default {
   path: '/oauth2mockserver',
   handler: app
 }

demo/layouts/default.vue

@@ -40,10 +40,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import get from 'lodash.get'
 
-export default {
+export default Vue.extend({
   computed: {
     picture() {
       return (
@@ -53,5 +54,5 @@ export default {
       ) // GitHub
     }
   }
-}
+})
 </script>

demo/nuxt.config.ts

@@ -1,12 +1,13 @@
-import authModule from '../src/module'
+import { NuxtConfig } from '@nuxt/types'
 
-export default {
+export default <NuxtConfig>{
   build: {
     extractCSS: true
   },
   serverMiddleware: ['~/api/auth', '~/api/oauth2mockserver'],
   buildModules: ['@nuxt/typescript-build'],
-  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', authModule],
+  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '../src/module'],
+  components: true,
   axios: {
     proxy: true
   },
@@ -64,7 +65,6 @@ export default {
       //   clientId: 'FAJNuxjMTicff6ciDKLiZ4t0D'
       // },
       laravelJWT: {
-        provider: 'laravel/jwt',
         url: '/laravel',
         endpoints: {
           login: {
@@ -82,11 +82,9 @@ export default {
         }
       },
       laravelSanctum: {
-        provider: 'laravel/sanctum',
         url: '/laravel'
       },
       laravelPassport: {
-        provider: 'laravel/passport',
         url: 'https://laravel-auth.nuxtjs.app',
         endpoints: {
           userInfo: '/api/auth/passport/user'
@@ -102,7 +100,7 @@ export default {
       },
       laravelPassportPasswordGrant: {
         name: 'laravelPassportPassword',
-        provider: 'laravel/passport',
+        provider: 'laravelPassport',
         url: '/laravel',
         endpoints: {
           user: {

demo/pages/index.vue

@@ -21,12 +21,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import { version } from '../../package.json'
 
-export default {
+export default Vue.extend({
   computed: {
     version: () => version
   }
-}
+})
 </script>

demo/pages/login.vue

@@ -108,11 +108,10 @@
   </div>
 </template>
 
-<script>
-import busyOverlay from '~/components/busy-overlay'
+<script lang="ts">
+import Vue from 'vue'
 
-export default {
-  components: { busyOverlay },
+export default Vue.extend({
   middleware: ['auth'],
   data() {
     return {
@@ -156,7 +155,7 @@ export default {
     }
   },
   methods: {
-    async login() {
+    login() {
       this.error = null
 
       return this.$auth
@@ -166,12 +165,14 @@ export default {
             password: this.password
           }
         })
-        .catch((e) => {
-          this.error = e.response.data
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error(err)
+          this.error = err.response?.data
         })
     },
 
-    async localRefresh() {
+    localRefresh() {
       this.error = null
 
       return this.$auth
@@ -181,12 +182,14 @@ export default {
             password: this.password
           }
         })
-        .catch((e) => {
-          this.error = e.response.data
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error(err)
+          this.error = err.response?.data
         })
     },
 
-    async loginJWT() {
+    loginJWT() {
       this.error = null
 
       return this.$auth
@@ -201,15 +204,15 @@ export default {
         })
     },
 
-    async loginPassport() {
+    loginPassport() {
       this.error = null
 
       return this.$auth.loginWith('laravelPassport').catch((e) => {
         this.error = e.response ? e.response.data : e.toString()
       })
     },
 
-    async loginPassportGrantFlow() {
+    loginPassportGrantFlow() {
       this.error = null
 
       return this.$auth
@@ -224,7 +227,7 @@ export default {
         })
     },
 
-    async loginSanctum() {
+    loginSanctum() {
       this.error = null
 
       return this.$auth
@@ -239,7 +242,7 @@ export default {
         })
     }
   }
-}
+})
 </script>
 
 <style scoped>

demo/pages/oauth2RefreshTest.vue

@@ -59,8 +59,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   middleware: ['auth'],
   data() {
     return {
@@ -129,10 +131,10 @@ export default {
     },
     updateDisplayedTokens() {
       this.tokenExpiresAt = this.getTokenExpirationDateString(
-        this.$auth.strategy.token._getExpiration()
+        this.$auth.strategy.token?._getExpiration()
       )
       this.refreshTokenExpiresAt = this.getTokenExpirationDateString(
-        this.$auth.strategy.refreshToken._getExpiration()
+        this.$auth.strategy.refreshToken?._getExpiration()
       )
     },
     getTokenExpirationDateString(tokenExpiration) {
@@ -143,5 +145,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

demo/pages/oauth2mockLogin.vue

@@ -23,8 +23,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   methods: {
     login() {
       const hash = this.parseQuery(this.$auth.ctx.route.hash.substr(1))
@@ -42,5 +44,5 @@ export default {
       return query
     }
   }
-}
+})
 </script>

demo/pages/public.vue

@@ -6,11 +6,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   middleware: ['auth'],
-  options: {
-    auth: false
-  }
-}
+  // @ts-ignore
+  auth: false
+})
 </script>

demo/pages/secure.vue

@@ -34,8 +34,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   middleware: ['auth'],
   computed: {
     state() {
@@ -49,5 +51,5 @@ export default {
       })
     }
   }
-}
+})
 </script>

demo/pages/signed-out.vue

@@ -4,11 +4,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   middleware: ['auth'],
-  options: {
-    auth: false
-  }
-}
+  // @ts-ignore
+  auth: false
+})
 </script>