fix: multi tenant auth should include tenantId in user/accesstoken during SSR

Author: JRaams

package.json

@@ -54,9 +54,9 @@
     "lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
     "lint:fix": "pnpm run lint --write",
     "test:types": "tsc --build tsconfig.json",
-    "test:unit": "vitest --coverage",
+    "test:unit": "cross-env GOOGLE_CLOUD_PROJECT='vue-fire-store' vitest --coverage",
     "firebase:emulators": "firebase emulators:start",
-    "test:dev": "vitest",
+    "test:dev": "cross-env GOOGLE_CLOUD_PROJECT='vue-fire-store' vitest",
     "test": "pnpm run lint && pnpm run test:types && pnpm run build && pnpm run -C packages/nuxt build && pnpm run test:unit run",
     "prepare": "simple-git-hooks"
   },
@@ -97,6 +97,7 @@
     "chalk": "^5.3.0",
     "consola": "^3.2.3",
     "conventional-changelog-cli": "^2.0.34",
+    "cross-env": "^7.0.3",
     "enquirer": "^2.4.1",
     "execa": "^8.0.1",
     "firebase": "^10.8.0",

packages/nuxt/package.json

@@ -32,8 +32,8 @@
     "build": "nuxt-module-build build",
     "lint": "eslint src",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l nuxt-vuefire -r 1",
-    "test": "vitest",
-    "dev": "nuxi dev playground",
+    "test": "cross-env GOOGLE_CLOUD_PROJECT='vue-fire-store' vitest",
+    "dev": "cross-env GOOGLE_CLOUD_PROJECT='vue-fire-store' nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub"
   },

packages/nuxt/playground/components/ServerOnlyPre.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+type Props = {
+  data: MaybeRef<unknown>,
+  testid: string
+}
+const props = defineProps<Props>()
+
+const serverState = useState();
+if (import.meta.server) {
+  serverState.value = JSON.parse(JSON.stringify(toValue(props.data)));
+}
+</script>
+
+<template>
+  <pre :data-testid="props.testid">{{ serverState }}</pre>
+</template>

packages/nuxt/playground/pages/authentication.vue

@@ -151,7 +151,13 @@ onMounted(() => {
     <!-- this is for debug purposes only, displaying it on the server would create a hydration mismatch -->
     <ClientOnly>
       <p>Current User:</p>
-      <pre data-testid="user-data">{{ user }}</pre>
+      <pre data-testid="user-data-client">{{ user }}</pre>
     </ClientOnly>
+
+    <ServerOnlyPre 
+      v-if="user" 
+      :data="user"
+      testid="user-data-server"
+    />
   </main>
 </template>

packages/nuxt/src/runtime/auth/plugin-authenticate-user.server.ts

@@ -35,7 +35,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   // this is also undefined if the user hasn't enabled the session cookie option
   if (uid) {
     // reauthenticate if the user is not the same (e.g. invalidated)
-    if (auth.currentUser?.uid !== uid) {
+    // OR multi tenancy is used, otherwise tenantId won't be present in SSR accessToken
+    if (auth.currentUser?.uid !== uid || tenant) {
       const customToken = await adminAuth
         .createCustomToken(uid)
         .catch((err) => {
@@ -45,6 +46,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       // console.timeLog('token', `got token for ${user.uid}`)
       if (customToken) {
         logger.debug('Signing in with custom token')
+        // Update firebase/auth tenantId to ensure it is set during SSR
+        auth.tenantId = tenant ?? null
         // TODO: allow user to handle error?
         await signInWithCustomToken(auth, customToken)
         // console.timeLog('token', `signed in with token for ${user.uid}`)

packages/nuxt/tests/auth.spec.ts

@@ -6,20 +6,20 @@ const { resolve } = createResolver(import.meta.url)
 
 await setup({
   rootDir: resolve('../playground'),
-  build: true,
+  build: false,
   server: true,
   browser: true,
   dev: true,
 
   browserOptions: {
     type: 'chromium',
     launch: {
-      headless: false,
+      headless: true,
     },
   },
 })
 
-describe.only('auth/multi-tenancy', async () => {
+describe('auth/multi-tenancy', async () => {
   it('should create a default tenant token if no tenant is specified', async () => {
     const page = await createPage('/authentication')
 
@@ -47,7 +47,7 @@ describe.only('auth/multi-tenancy', async () => {
     await signinResponse
 
     // 4. Assert user does in fact not have a tenant id
-    const userData = await page.getByTestId('user-data').textContent()
+    const userData = await page.getByTestId('user-data-client').textContent()
 
     expect(userData).toBeTruthy()
     if (!userData) return
@@ -85,12 +85,54 @@ describe.only('auth/multi-tenancy', async () => {
     await signinResponse
 
     // 4. Assert user does in fact not have a tenant id
-    const userData = await page.getByTestId('user-data').textContent()
+    const userData = await page.getByTestId('user-data-client').textContent()
 
     expect(userData).toBeTruthy()
     if (!userData) return
 
     const user = JSON.parse(userData)
     expect(user.tenantId).toEqual(tenantName)
   })
+
+  it('should return tenantId in server render', async () => {
+    const page = await createPage('/authentication')
+    const tenantName = 'tenant A'
+
+    // 1. Sign out, clear tenant to start clean
+    await page.getByTestId('sign-out').click()
+    await page.getByTestId('tenant').clear()
+    await page.getByTestId('tenant').fill(tenantName)
+
+    // 2. Ensure test account exists
+    const signupResponse = page.waitForResponse((r) =>
+      r.url().includes('accounts:signUp')
+    )
+    await page.getByTestId('email-signup').fill('[email protected]')
+    await page.getByTestId('password-signup').fill('testtest')
+    await page.getByTestId('submit-signup').click()
+    await signupResponse
+
+    // 3. Log in with test account, check tenant
+    // Call to sign in is 'accounts:signInWithPassword', but we need __session call to get user info
+    const signinResponse = page.waitForResponse((r) =>
+      r.url().includes('/api/__session')
+    )
+    await page.getByTestId('email-signin').fill('[email protected]')
+    await page.getByTestId('password-signin').fill('testtest')
+    await page.getByTestId('submit-signin').click()
+    await signinResponse
+
+    // 4. Reload the page to trigger server render
+    await page.reload({ waitUntil: 'domcontentloaded' })
+
+    const serverUserData = await page
+      .getByTestId('user-data-server')
+      .textContent()
+
+    expect(serverUserData).toBeTruthy()
+    if (!serverUserData) return
+
+    const serverUser = JSON.parse(serverUserData)
+    expect(serverUser.tenantId).toEqual(tenantName)
+  })
 })