Update hank-elements to v2

package.json

@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.0.0",
-    "@teamhanko/hanko-elements": "1.5.2",
+    "@teamhanko/hanko-elements": "2.3.0",
     "defu": "^6.1.4",
     "jose": "^6.0.0",
     "ufo": "^1.5.4"

playground/pages/login.vue

@@ -8,10 +8,13 @@ definePageMeta({
   <main>
     <h1>Log in</h1>
     <p>
-      Only logged out users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-out'],
-})</pre>
+      Only logged out users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-out'],
+    })
+      </code></pre>
     <p v-if="$route.query.redirect">
       You were redirected here from {{ $route.query.redirect }}, once you login, you'll be sent back automatically!
     </p>

playground/pages/protected.vue

@@ -12,10 +12,13 @@ function logout() {
   <div>
     <h1>Protected Page</h1>
     <p>
-      Only logged in users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-in'],
-})</pre>
+      Only logged in users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-in'],
+    })
+      </code></pre>
     <button @click="logout">
       Log me out
     </button>

playground/pages/user.vue

@@ -20,10 +20,13 @@ async function tryAuthenticatedRequest() {
   <main>
     <h1>You are logged in!</h1>
     <p>
-      Only logged in users can see this page<pre>definePageMeta({
-  middleware: ['hanko-logged-in'],
-})</pre>
+      Only logged in users can see this page
     </p>
+    <pre><code>
+    definePageMeta({
+      middleware: ['hanko-logged-in'],
+    })
+      </code></pre>
     <button @click="logout">
       Log me out
     </button>

src/module.ts

@@ -28,6 +28,8 @@ export interface ModuleOptions {
     translations?: RegisterOptions['translations']
     translationsLocation?: RegisterOptions['translationsLocation']
     fallbackLanguage?: RegisterOptions['fallbackLanguage']
+    sessionCheckInterval?: RegisterOptions['sessionCheckInterval']
+    sessionTokenLocation?: RegisterOptions['sessionTokenLocation']
   }
 }
 

src/runtime/components.d.ts

@@ -7,7 +7,7 @@ declare module 'vue' {
        * Currently supported values are "en" for English and "de" for German.
        * If the value is omitted, "en" is used.
        */
-      lang?: 'en' | 'de' | (string & {})
+      lang?: 'bn' | 'de' | 'en' | 'fr' | 'it' | 'pt-BR' | 'zh' | (string & {})
       /** A space-separated list of experimental features to be enabled. See experimental features. */
       experimental?: string
     }>
@@ -16,7 +16,7 @@ declare module 'vue' {
        * Currently supported values are "en" for English and "de" for German.
        * If the value is omitted, "en" is used.
        */
-      lang?: 'en' | 'de' | (string & {})
+      lang?: 'bn' | 'de' | 'en' | 'fr' | 'it' | 'pt-BR' | 'zh' | (string & {})
     }>
     HankoEvents: DefineComponent<Record<string, unknown>>
   }

src/runtime/composables/index.ts

@@ -1,5 +1,5 @@
 import { Hanko } from '@teamhanko/hanko-elements'
-import { useRuntimeConfig } from '#imports'
+import { useRuntimeConfig, useState, toValue } from '#imports'
 
 /**
  * This composable returns a Hanko instance.
@@ -10,12 +10,17 @@ export function useHanko() {
   if (import.meta.server) {
     return null
   }
-
   const hankoConfig = useRuntimeConfig().public.hanko
-  return new Hanko(hankoConfig.apiURL, {
-    cookieName: hankoConfig.cookieName,
-    localStorageKey: hankoConfig.storageKey,
-    cookieSameSite: hankoConfig.cookieSameSite,
-    cookieDomain: hankoConfig.cookieDomain,
-  })
+
+  const hanko = useState(
+    'single-hanko-instance',
+    () =>
+      new Hanko(hankoConfig.apiURL, {
+        cookieName: hankoConfig.cookieName,
+        localStorageKey: hankoConfig.storageKey,
+        cookieSameSite: hankoConfig.cookieSameSite,
+        cookieDomain: hankoConfig.cookieDomain,
+      }),
+  )
+  return toValue(hanko)
 }

src/runtime/middleware/logged-in.ts

@@ -1,6 +1,5 @@
 import { withQuery } from 'ufo'
 import { defineNuxtRouteMiddleware, navigateTo, useRouter, useAppConfig, useHanko, useRequestEvent } from '#imports'
-import type {} from 'nuxt/app'
 
 export default defineNuxtRouteMiddleware(async (to) => {
   const redirects = useAppConfig().hanko.redirects
@@ -16,7 +15,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
   const hanko = useHanko()!
 
-  if (!(await hanko.user.getCurrent().catch(() => null)) && to.path !== redirects.login) {
+  if (!(await hanko.getUser().catch(() => null)) && to.path !== redirects.login) {
     return navigateTo(withQuery(redirects.login, { redirect: to.path }))
   }
 

src/runtime/middleware/logged-out.ts

@@ -14,7 +14,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
   const hanko = useHanko()!
 
-  if ((await hanko.user.getCurrent().catch(() => null)) && to.path !== redirects.home) {
+  if ((await hanko.getUser().catch(() => null)) && to.path !== redirects.home) {
     return navigateTo(redirects.home)
   }