Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Improved docs about globalMiddleware #541

Closed
wants to merge 3 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 68 additions & 1 deletion docs/content/v0.6/3.application-side/4.protecting-pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,51 @@ Briefly summarized, you can enable global protection (1) in your `nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
globalAppMiddleware: true
globalAppMiddleware: true // Boolean or GlobalMiddlewareOptions
}
})
```

Now *all pages* will require sign-in. Learn how to add excepted pages [below](/nuxt-auth/v0.6/application-side/protecting-pages#disabling-the-global-middleware-locally)

You can also set an object as the `globalAppMiddleware` in which you can futhur customize the behaviour of the global protection.

```ts
/**
* Configuration for the global application-side authentication-middleware.
*/
interface GlobalMiddlewareOptions {
/**
* Whether to add a global authentication middleware that protects all pages.
*
* @example true
* @default false
*/
isEnabled: boolean
/**
* Whether to enforce authentication if the target-route does not exist. Per default the middleware redirects
* to Nuxts' default 404 page instead of forcing a sign-in if the target does not exist. This is to avoid a
* user-experience and developer-experience of having to sign-in only to see a 404 page afterwards.
*
* Note: Setting this to `false` this may lead to `vue-router` + node related warnings like: "Error [ERR_HTTP_HEADERS_SENT] ...",
* this may be related to https://github.com/nuxt/framework/issues/9438.
*
* @example false
* @default true
*/
allow404WithoutAuth?: boolean
/**
* Whether to automatically set the callback url to the page the user tried to visit when the middleware stopped them. This is useful to disable this when using the credentials provider, as it does not allow a `callbackUrl`. Setting this
* to a string-value will result in that being used as the callbackUrl path. Note: You also need to set the global `addDefaultCallbackUrl` setting to `false` if you want to fully disable this.
*
* @example false
* @example /i-caught-you-but-now-you-are-signed-in
* @default true
*/
addDefaultCallbackUrl?: boolean | string
}
```

To enable page-local protection (2), add the following `definePageMeta` directive to a page:
```vue
<!-- file: ~/pages/protected.vue -->
Expand Down Expand Up @@ -48,18 +86,47 @@ That's it! Every page of your application will now need authentication for the u

### Middleware Options

In order to use these options, you will still have to define the middleware inside of the [`definePageMeta` macro](https://nuxt.com/docs/api/utils/define-page-meta#definepagemeta)

#### `unauthenticatedOnly`

Whether to only allow unauthenticated users to access this page. Authenticated users will be redirected to `/` or the route defined in `navigateAuthenticatedTo`

```vue
<script setup>
definePageMeta({
middleware: 'auth',
auth: { unauthenticatedOnly: true }
})
</script>
```

#### `navigateAuthenticatedTo`

Where to redirect authenticated users if `unauthenticatedOnly` is set to true

```vue
<script setup>
definePageMeta({
middleware: 'auth',
auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/profile' }
})
</script>
```

#### `navigateUnauthenticatedTo`

Where to redirect unauthenticated users if this page is protected

```vue
<script setup>
definePageMeta({
middleware: 'auth',
auth: { navigateUnauthenticatedTo: '/signIn' }
})
</script>
```

### Disabling the global middleware locally

To disable the global middleware on a specific page only, you can use the [`definePageMeta` macro](https://nuxt.com/docs/api/utils/define-page-meta#definepagemeta) to turn `auth` off:
Expand Down