feat: add more configuration options (#181)

Author: codiini

README.md

@@ -32,7 +32,10 @@ export default defineNuxtConfig({
     // 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'
+    // cookieName: 'hanko',
+    // cookieSameSite: 'Lax',
+    // cookieDomain: 'nuxt.com',
+    // storageKey: 'hanko',
     // redirects: {
     //   login: '/login',
     //   success: '/',
@@ -41,6 +44,14 @@ export default defineNuxtConfig({
     // },
     // registerComponents: true,
     // augmentContext: true,
+    // components: {
+    //   shadow: true,
+    //   injectStyles: true,
+    //   enablePasskeys: true,
+    //   hidePasskeyButtonOnLogin: true,
+    //   translations: {},
+    //   fallbackLanguage: 'en'
+    // }
   },
 })
 ```

src/module.ts

@@ -1,12 +1,6 @@
-import {
-  defineNuxtModule,
-  addPlugin,
-  createResolver,
-  addImportsSources,
-  addRouteMiddleware,
-  addServerHandler,
-  addTemplate,
-} from '@nuxt/kit'
+import type { PublicRuntimeConfig } from 'nuxt/schema'
+import { defineNuxtModule, addPlugin, createResolver, addImportsSources, addRouteMiddleware, addServerHandler, addTemplate } from '@nuxt/kit'
+import type { CookieSameSite, RegisterOptions } from '@teamhanko/hanko-elements'
 import { defu } from 'defu'
 
 export interface ModuleOptions {
@@ -17,12 +11,24 @@ export interface ModuleOptions {
   registerComponents?: boolean
   augmentContext?: boolean
   cookieName?: string
+  cookieSameSite?: CookieSameSite
+  cookieDomain?: string
+  storageKey?: string
   redirects?: {
     login?: string
     home?: string
     success?: string
     followRedirect?: boolean
   }
+  components?: {
+    shadow?: RegisterOptions['shadow']
+    injectStyles?: RegisterOptions['injectStyles']
+    enablePasskeys?: RegisterOptions['enablePasskeys']
+    hidePasskeyButtonOnLogin?: RegisterOptions['hidePasskeyButtonOnLogin']
+    translations?: RegisterOptions['translations']
+    translationsLocation?: RegisterOptions['translationsLocation']
+    fallbackLanguage?: RegisterOptions['fallbackLanguage']
+  }
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -51,10 +57,13 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public, {
       hanko: {
-        apiURL: options.apiURL,
-        cookieName: options.cookieName,
-      },
-    })
+        apiURL: options.apiURL!,
+        cookieName: options.cookieName!,
+        cookieSameSite: options.cookieSameSite || undefined,
+        cookieDomain: options.cookieDomain || undefined,
+        components: options.components || {},
+      } satisfies PublicRuntimeConfig['hanko'],
+    }) as PublicRuntimeConfig
 
     nuxt.options.appConfig = defu(nuxt.options.appConfig, {
       hanko: {
@@ -128,3 +137,16 @@ export default defineNuxtModule<ModuleOptions>({
     })
   },
 })
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    hanko: {
+      apiURL: NonNullable<ModuleOptions['apiURL']>
+      cookieName: NonNullable<ModuleOptions['cookieName']>
+      cookieSameSite?: ModuleOptions['cookieSameSite']
+      cookieDomain?: ModuleOptions['cookieDomain']
+      storageKey?: ModuleOptions['storageKey']
+      components: ModuleOptions['components']
+    }
+  }
+}

src/runtime/composables/index.ts

@@ -12,9 +12,10 @@ export function useHanko() {
   }
 
   const hankoConfig = useRuntimeConfig().public.hanko
-  const hankoOptions = {
+  return new Hanko(hankoConfig.apiURL, {
     cookieName: hankoConfig.cookieName,
-    localStorageKey: hankoConfig.cookieName,
-  }
-  return new Hanko(hankoConfig.apiURL, hankoOptions)
+    localStorageKey: hankoConfig.storageKey,
+    cookieSameSite: hankoConfig.cookieSameSite,
+    cookieDomain: hankoConfig.cookieDomain,
+  })
 }

src/runtime/plugins/components.client.ts

@@ -3,12 +3,14 @@ import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
-  const hankoOptions = {
-    storageKey: config.public.hanko.cookieName,
-  }
   nuxtApp.hook('app:mounted', async () => {
     // register hanko web components
     // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
-    await register(config.public.hanko.apiURL, hankoOptions)
+    await register(config.public.hanko.apiURL, {
+      storageKey: config.public.hanko.storageKey,
+      cookieSameSite: config.public.hanko.cookieSameSite,
+      cookieDomain: config.public.hanko.cookieDomain,
+      ...config.public.hanko.components,
+    })
   })
 })