- ✨ Easy integration for Hanko
- 🧱 Type safety and auto-registration for Hanko web components
- 💪 Server utilities for full-stack auth
Install and add @nuxtjs/hanko
to your nuxt.config
.
npx nuxi@latest module add hanko
export default defineNuxtConfig({
modules: ['@nuxtjs/hanko'],
hanko: {
// You can also configure this by setting NUXT_PUBLIC_HANKO_API_URL at runtime
apiURL: '<YOUR_API_URL>',
// You can also customise these if required
// cookieName: 'hanko'
// redirects: {
// login: '/login',
// success: '/',
// home: '/',
// followRedirect: true
// },
// registerComponents: true,
// augmentContext: true,
// globalMiddleware: false,
},
})
To use, you can use the Hanko components anywhere in your app: <hanko-auth>
, <hanko-events>
and <hanko-profile>
. These are web components that will be rendered on the client-side only. Props are typed.
You can turn auto-registration of components off (if you wish to use Hanko just on the server side or programmatically) with registerComponents: false
.
Check out the Hanko documentation to learn more.
<template>
<hanko-auth />
</template>
By default three new route middlewares are available in your Nuxt app: hanko-logged-in
, hanko-logged-out
and hanko-allow-all
.
hanko-logged-in
will prevent access to a page unless you are logged in. (It will redirect you toredirects.login
instead, and then redirect back to this page once you login. You can disable this behaviour by settingredirects.followRedirect
tofalse
.)hanko-logged-out
will prevent access to a page unless you are logged out. (It will redirect you toredirects.success
when you log in, and otherwise toredirects.home
.)hanko-allow-all
will allow all users access to page, even if theglobalMiddleware
option is set totrue
. (If theglobalMiddleware
option is not set totrue
, this middleware has no effect.)
You can also create your own middleware for full control.
If the globalMiddleware
configuration is set to true
, the middleware is automatically applied to all of your pages.
You can still override this behavior on each page, by applying the hanko-logged-out
or the hanko-allow-all
middleware.
Note: The globalMiddleware
option will not apply any authentication checks to your API-paths.
useHanko
is exposed in the Vue part of your app to allow you direct access to the Hanko API. You can access the current user and much more. Note: It will return null
on the server.
The hankoLoggedIn
and hankoLoggedOut
middleware are exposed to enable you to extend their functionality, such as creating a custom global middleware.
By default you can access a verified JWT context on event.context.hanko
. (It will be undefined if the user is not logged in.) If you want to handle this yourself you can set augmentContext: false
.
verifyHankoEvent
is exposed in the Nitro part of your app to expose the underlying utility used to create event.context.hanko
if you want to handle things manually.
- Clone this repository
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install
- Stub module with
pnpm dev:prepare
- Run
pnpm dev
to start playground in development mode
Thanks to @McPizza0 for the push to make the module!
Made with ❤️
Published under the MIT License.