Hanko integration for Nuxt

• ✨  Changelog

• 🎁  Hanko starter

• ✨ 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 to redirects.login instead, and then redirect back to this page once you login. You can disable this behaviour by setting redirects.followRedirect to false.)
• hanko-logged-out will prevent access to a page unless you are logged out. (It will redirect you to redirects.success when you log in, and otherwise to redirects.home.)
• hanko-allow-all will allow all users access to page, even if the globalMiddleware option is set to true. (If the globalMiddleware option is not set to true, 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.