GlobalMiddleware: allow all
+
+ This page is accessible for both logged in and logged out users.
+
+
+definePageMeta({
+ hanko: {
+ allow: 'all',
+ }
+})
+
+definePageMeta({
+ hanko: {
+ allow: 'all',
+ }
+})
+
+definePageMeta({
+ hanko: {
+ allow: 'logged-in',
+ }
+})
+
+definePageMeta({
+ hanko: {
+ allow: 'logged-out',
+ }
+})
+
+definePageMeta({
+ hanko: {
+ deny: 'logged-in',
+ }
+})
+
+definePageMeta({
+ hanko: {
+ deny: 'logged-out',
+ }
+})
+ In case you do, the middleware takes precedence.
+- Only logged out users can see this page
definePageMeta({
+
+ Only logged out users can see this page
+
+definePageMeta({
middleware: ['hanko-logged-out'],
})
-
+
- You were redirected here from {{ $route.query.redirect }}, once you login, you'll be sent back automatically!
+ You were redirected here from {{ $route.query.redirect }}, once you login, you'll be sent back
+ automatically!
- Only logged in users can see this page
definePageMeta({
+
+ Only logged in users can see this page
+
+definePageMeta({
middleware: ['hanko-logged-in'],
})
-
+
diff --git a/playground/pages/user.vue b/playground/pages/user.vue
index d1739f53..ed4c6a92 100644
--- a/playground/pages/user.vue
+++ b/playground/pages/user.vue
@@ -19,11 +19,13 @@ async function tryAuthenticatedRequest() {
You are logged in!
-
- Only logged in users can see this page
definePageMeta({
+
+ Only logged in users can see this page
+
+definePageMeta({
middleware: ['hanko-logged-in'],
})
-
+
diff --git a/src/module.ts b/src/module.ts
index 87823a5d..19e2ccf7 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -10,6 +10,7 @@ export interface ModuleOptions {
apiURL?: string
registerComponents?: boolean
augmentContext?: boolean
+ globalMiddleware?: boolean
cookieName?: string
cookieSameSite?: CookieSameSite
cookieDomain?: string
@@ -40,6 +41,7 @@ export default defineNuxtModule({
apiURL: '',
registerComponents: true,
augmentContext: true,
+ globalMiddleware: false,
cookieName: 'hanko',
redirects: {
login: '/login',
@@ -68,6 +70,7 @@ export default defineNuxtModule({
nuxt.options.appConfig = defu(nuxt.options.appConfig, {
hanko: {
redirects: options.redirects,
+ globalMiddleware: options.globalMiddleware,
},
})
@@ -83,6 +86,19 @@ export default defineNuxtModule({
})
}
+ if (options.globalMiddleware) {
+ addRouteMiddleware({
+ name: 'hanko-global-logged-in',
+ path: resolver.resolve('./runtime/middleware/global-logged-in'),
+ global: true,
+ })
+ nuxt.hook('prepare:types', ({ references }) => {
+ references.push({
+ path: resolver.resolve('./page-meta-global.d.ts'),
+ })
+ })
+ }
+
if (options.augmentContext) {
addServerHandler({
middleware: true,
@@ -107,6 +123,14 @@ export default defineNuxtModule({
from: resolver.resolve('./runtime/composables/index'),
imports: ['useHanko'],
})
+ addImportsSources({
+ from: resolver.resolve('./runtime/middleware/logged-in'),
+ imports: ['hankoLoggedIn'],
+ })
+ addImportsSources({
+ from: resolver.resolve('./runtime/middleware/logged-out'),
+ imports: ['hankoLoggedOut'],
+ })
const hankoElementsTemplate = addTemplate({
filename: 'hanko-elements.mjs',
diff --git a/src/page-meta-global.d.ts b/src/page-meta-global.d.ts
new file mode 100644
index 00000000..de67b12e
--- /dev/null
+++ b/src/page-meta-global.d.ts
@@ -0,0 +1,22 @@
+/**
+ * PageMeta augmentation for the hanko `globalMiddleware` feature.
+ * This file must live outside `src/runtime/` because Nuxt automatically
+ * includes every module's `dist/runtime` in the app's TypeScript project.
+ * If this augmentation were in runtime/, it would always be loaded and
+ * `hanko` would appear on PageMeta even when globalMiddleware is false.
+ * By living here, it is only loaded when we add it via prepare:types
+ * (which we do only when globalMiddleware is true).
+ */
+type HankoMeta
+ = | { allow?: 'all' | 'logged-in' | 'logged-out', deny?: never }
+ | { allow?: never, deny?: 'logged-in' | 'logged-out' }
+
+declare module 'nuxt/app' {
+ interface PageMeta {
+ hanko?: HankoMeta
+ }
+}
+
+// Required: makes this file a module so `declare module 'nuxt/app'` is treated
+// as an augmentation (merge) rather than a new module declaration.
+export {}
diff --git a/src/runtime/middleware/global-logged-in.ts b/src/runtime/middleware/global-logged-in.ts
new file mode 100644
index 00000000..e7a31e1f
--- /dev/null
+++ b/src/runtime/middleware/global-logged-in.ts
@@ -0,0 +1,45 @@
+import { defineNuxtRouteMiddleware, hankoLoggedIn, hankoLoggedOut } from '#imports'
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+ // If the requested location doesn't exist: let the router handle it
+ if (to.matched.length === 0) return
+
+ // Don't trigger on client-side navigation on the same-page
+ // (changes in to.query or to.hash)
+ if (import.meta.client && to.path === from.path) return
+
+ // If a hanko middleware is explicitly set, that middleware handles
+ // navigation and the default hankoLoggedIn is skipped
+ if ([to.meta.middleware].flat().some(isHankoMiddleware)) return
+
+ // Next it respects custom hanko PageMeta
+ if (to.meta.hanko) {
+ const { allow, deny } = to.meta.hanko
+
+ if (allow == 'all') return
+ else if (allow == 'logged-in') return await hankoLoggedIn(to)
+ else if (allow == 'logged-out') return await hankoLoggedOut(to)
+ else if (deny == 'logged-in') return await hankoLoggedOut(to)
+ else if (deny == 'logged-out') return await hankoLoggedIn(to)
+ }
+
+ // If no hanko middleware is set, default to hankoLoggedIn
+ return await hankoLoggedIn(to)
+})
+
+/**
+ * Checks if the given middleware is a valid Hanko middleware.
+ *
+ * @param middleware - The middleware to check.
+ * @description If middleware is undefined or a NavigationGuard (function), it
+ * is not a Hanko middleware. A valid Hanko middleware is a MiddlewareKey
+ * (string) with one of the following values:
+ * - `hanko-logged-in`
+ * - `hanko-logged-out`
+ */
+const isHankoMiddleware = (middleware: unknown) => {
+ return (
+ typeof middleware === 'string'
+ && ['hanko-logged-in', 'hanko-logged-out'].includes(middleware)
+ )
+}
diff --git a/src/runtime/middleware/logged-in.ts b/src/runtime/middleware/logged-in.ts
index bd79eed1..87327e48 100644
--- a/src/runtime/middleware/logged-in.ts
+++ b/src/runtime/middleware/logged-in.ts
@@ -1,8 +1,9 @@
import { withQuery } from 'ufo'
+import type { RouteMiddleware } from '#app'
import { defineNuxtRouteMiddleware, navigateTo, useRouter, useAppConfig, useHanko, useRequestEvent } from '#imports'
import type {} from 'nuxt/app'
-export default defineNuxtRouteMiddleware(async (to) => {
+export const hankoLoggedIn = (async (to) => {
const redirects = useAppConfig().hanko.redirects
if (import.meta.server) {
@@ -27,4 +28,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
removeHankoHook()
removeRouterHook()
})
-})
+}) satisfies RouteMiddleware
+
+export default defineNuxtRouteMiddleware(hankoLoggedIn)
diff --git a/src/runtime/middleware/logged-out.ts b/src/runtime/middleware/logged-out.ts
index e569ca6e..dafbb432 100644
--- a/src/runtime/middleware/logged-out.ts
+++ b/src/runtime/middleware/logged-out.ts
@@ -1,6 +1,7 @@
+import type { RouteMiddleware } from '#app'
import { defineNuxtRouteMiddleware, navigateTo, useRouter, useAppConfig, useHanko, useRequestEvent } from '#imports'
-export default defineNuxtRouteMiddleware(async (to) => {
+export const hankoLoggedOut = (async (to) => {
const redirects = useAppConfig().hanko.redirects
if (import.meta.server) {
@@ -29,4 +30,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
removeHankoHook()
removeRouterHook()
})
-})
+}) satisfies RouteMiddleware
+
+export default defineNuxtRouteMiddleware(hankoLoggedOut)
diff --git a/test/basic.test.ts b/test/basic.test.ts
deleted file mode 100644
index b88b50e9..00000000
--- a/test/basic.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { describe, it, expect } from 'vitest'
-import { setup, fetch, $fetch } from '@nuxt/test-utils'
-
-await setup({
- rootDir: fileURLToPath(new URL('../playground', import.meta.url)),
-})
-
-describe('ssr', async () => {
- it('redirects to the login page', async () => {
- const res = await fetch('/protected', { redirect: 'manual' })
- expect(res.headers.get('location')).toBe('/login?redirect=/protected')
- })
-
- it('respects custom elements', async () => {
- const html = await $fetch('/login')
- expect(html).toContain('