Merge pull request #104 from privy-open-source/feat/middleware

feat: middleware

Author: adenvt

README.md

@@ -163,6 +163,29 @@ export default defineNuxtConfig({
 })
 ```
 
+## Middleware Guard
+
+Since `0.7.0`, NuAuth include global middleware which redirect to login page if user not authenticated.
+If you want disabled it in some page, you can use set meta page `auth` to `false`.
+
+```vue
+<script setup lang="ts">
+  import { definePageMeta } from '#imports'
+
+  definePageMeta({ auth: false })
+</script>
+```
+
+Or you can set auth profile using it
+
+```vue
+<script setup lang="ts">
+  import { definePageMeta } from '#imports'
+
+  definePageMeta({ auth: 'github' })
+</script>
+```
+
 ## Contribution
 
 - Clone this repository

playground/middleware/auth.global.ts

@@ -0,0 +1,4 @@
+<template>
+  <h1>doc/index</h1>
+  <NuxtPage />
+</template>

playground/pages/doc/index.vue

@@ -0,0 +1,4 @@
+<template>
+  <h1>doc/detail</h1>
+  <NuxtPage />
+</template>

playground/pages/doc/index/detail.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>doc/detail/history</h1>
+</template>

playground/pages/doc/index/detail/history.vue

@@ -6,3 +6,9 @@
       height="500px" />
   </div>
 </template>
+
+<script setup lang="ts">
+import { definePageMeta } from '#imports'
+
+definePageMeta({ auth: false })
+</script>

playground/pages/iframe.vue

@@ -58,9 +58,9 @@ export interface NuAuth {
   refresh: () => Promise<string>,
 }
 
-export function useNuAuth (profile_?: string): NuAuth {
+export function useNuAuth (authProfile?: string): NuAuth {
   const config       = useRuntimeConfig()
-  const profile      = String(profile_ ?? config.public.defaultProfile ?? 'oauth')
+  const profile      = String(authProfile ?? config.public.defaultProfile ?? 'oauth')
   const event        = useRequestEvent()
   const token        = useState<string | undefined>(hash(`${profile}/token`), () => event && getCookie(event, `${profile}/token`))
   const refreshToken = useState<string | undefined>(hash(`${profile}/rtoken`), () => event && getCookie(event, `${profile}/refresh-token`))

src/core/index.ts

@@ -2,6 +2,7 @@ import { defu } from 'defu'
 import type { CookieSerializeOptions } from 'cookie-es'
 import {
   addImports,
+  addRouteMiddleware,
   addServerHandler,
   createResolver,
   defineNuxtModule,
@@ -41,6 +42,11 @@ export interface ModuleOptions {
      */
     names?: string[],
   },
+  /**
+   * Add guard middleware
+   * @default true
+   */
+  middleware?: boolean,
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -61,6 +67,7 @@ export default defineNuxtModule<ModuleOptions>({
       default: 'oauth',
       names  : ['oauth'],
     },
+    middleware: true,
   },
   setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
@@ -79,5 +86,13 @@ export default defineNuxtModule<ModuleOptions>({
         from: resolve('./core/index'),
       })
     }
+
+    if (options.middleware) {
+      addRouteMiddleware({
+        global: true,
+        name  : 'nuauth',
+        path  : resolve('./runtime/middleware'),
+      })
+    }
   },
 })

src/module.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/promise-function-async */
+import { defineNuxtRouteMiddleware } from '#imports'
+import { useNuAuth } from '@privyid/nuauth/core'
+
+declare module '#app' {
+  interface PageMeta {
+    /**
+     * Enable auth this page
+     * @default true
+     *
+     * @example
+     * // Enable auth
+     * auth: true
+     *
+     * // Enable auth with other profile
+     * auth: 'github'
+     *
+     * // Disable auth
+     * auth: false
+     */
+    auth?: boolean | string,
+  }
+}
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.meta.auth !== false) {
+    const profile          = typeof to.meta.auth === 'string' ? to.meta.auth : undefined
+    const { token, login } = useNuAuth(profile)
+
+    if (!token.value)
+      return login(to.fullPath)
+  }
+})