Role base access control with firebase user claims with SSR

[noook]

How to protect a route given the roles a user might have in their token claims ?

As of now, I already set the role claim and gave it an array of roles, however the claims are not available within the user returned by getCurrentUser() in a middleware. However, the claims are available in the decoded IdToken, but the functions to get it / read it are not available server-side

export default defineNuxtRouteMiddleware(async () => {
  // User is typed as any ?
  const user = await getCurrentUser();
  if (!user) {
    return navigateTo('/login');
  }

  const token = await (user as User).getIdToken();
});

[Vue Router warn]: uncaught error during route navigation:                                                                  19:46:51
Error: The function User.getIdToken() is not available on the server.                                                       19:46:51
    at Proxy.<anonymous> (/Users/nook/work/tls-test/node_modules/vuefire/dist/server/index.mjs:88:11)
    at /Users/nook/work/tls-test/middleware/admin.ts:12:82
    at Module.executeAsync (file:///Users/nook/work/tls-test/node_modules/unctx/dist/index.mjs:92:19)
    at /Users/nook/work/tls-test/middleware/admin.ts:12:60
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.callAsync (file:///Users/nook/work/tls-test/node_modules/unctx/dist/index.mjs:53:16)
    at async /Users/nook/work/tls-test/node_modules/nuxt/dist/pages/runtime/plugins/router.mjs:119:22

update:
By using console.log I noticed there is actually the property customClaims attached to the user. After digging into the typedefs from getCurrentUser, I was using the User type from firebase/auth on which there is no such property.
I guess the real issue here is what is the real return type of getCurrentUser, and why is it inferred to any on a Nuxt 3 (3.2) project ?

The ideal way would be to do that:

const claims = process.server
  ? user.customClaims
  : (await (user as User).getIdTokenResult()).claims;

[posva]

I will have to take a look. With the new nuxt payload plugins there might be a way to have a universal customClaims but I'm not sure yet

[strid3r21]

@noook did you ever get this working? its something im needing to add on my end as well.

[Eronne]

I faced the same issue some time ago and made a getUserClaims composable to manage claims access on client and server. I am able to use it in my pages / components and also in my middlewares to check user claims before accessing a page.

I know this is a temporary check and wanted to have an opinion on this (does it have to be handled by vuefire or not?).

Here is my composable:

// `~/composables/useUser.ts`

import { getIdTokenResult, ParsedToken } from "firebase/auth";
import { CustomClaims } from "~/types/users";

export const getUserCustomClaims = async (): Promise<
  (ParsedToken & CustomClaims) | null
> => {
  if (process.server || import.meta.env.MODE === 'production') {
    const idTokenResult = await getIdTokenResult(await getCurrentUser());
    return idTokenResult.claims;
  } else {
    const user = useCurrentUser();

    if (user.value) {
      const idTokenResult = await getIdTokenResult(user.value);
      return idTokenResult.claims;
    } else {
      return null;
    }
  }
};

[chrisspiegl]

I think this works, though it does not revalidate if the claims have changed on the server side in the mean time since the user has logged in.

Personally, I just implemented this through a firebase function which triggers whenever the user object (which I use to manage the claims anyway) changes.

After updating the user claims, then there is a timestamp written to the user object, which in turn triggers the frontend to update the useDocument(__REF BASED ON CURRENT USER UID_).

Function to Keep the Claims in Sync with Firestore Document

export async function documentWriteUser(event) {
  logger.log('documentWriteUser: Started execution')

  if (event.data?.before.exists && !event.data.after.exists) {
    // NOTE: document was deleted!
    return // processDelete(event.data.before)
  }

  // if (!event.data?.before.exists && event.data?.after.exists) {
  //   // NOTE: document was created
  //   return // processCreate(event.data.after)
  // }

  const beforeData = event.data?.before?.data() || {}
  const afterData = event.data?.after?.data() || {}
  // Skip updates where _userClaimsLastCommittedAt field changed, to avoid infinite loops
  // NOTE: this would be based on a _userClaimsLastCommittedAt variable which I do not want to carry around and update
  const skipUpdate
      = beforeData._userClaimsLastCommittedAt
      && afterData._userClaimsLastCommittedAt
      && !beforeData._userClaimsLastCommittedAt.isEqual(afterData._userClaimsLastCommittedAt)
  if (skipUpdate) {
    logger.log('Skipping - Based on _userClaimsLastCommittedAt check')
    return
  }

  // NOTE: make sure the auth user even exists in the auth system and if not create one if possible!
  try {
    await getAuth().getUser(event.data?.after?.id)
    logger.log('docUpdateUser: user found in auth system', event.data?.after?.id)
  }
  catch (error) {
    // Ignore the error that the user is not found because then we just create it!
    if (error.code !== 'auth/user-not-found') {
      logger.error('docUpdateUser: error while checking if the user is already in the auth system.', error)
      throw error
    }
    logger.log('docUpdateUser: no user found in auth system, creating with document data')
    if (!afterData?.email)
      throw new Error('docUpdateUser: I really can not do shit without at least an email for the user')

    // Create the user with a random password if they do not exist already in the auth system.
    await auth.createUser({
      uid: event.data?.after?.id,
      email: afterData.email,
      password: nanoid(),
      displayName: afterData.displayName || '',
      disabled: false,
    })
  }

  // Create a new JSON payload so that we can easily recreate it for before/after!
  function makeClaims({ userDb }) {
    return {
      roles: userDb.roles?.sort() || [],
      stripe: {
        status: userDb.stripe?.subscription?.status,
      },
    }
  }
  const afterClaims = makeClaims({ userDb: afterData })

  // Check that the payload is under the 1000 character max
  const stringifiedClaims = JSON.stringify(afterClaims)
  if (stringifiedClaims.length > 1000) {
    logger.error('New custom claims object string > 1000 characters', stringifiedClaims)
    return
  }
  // Read id from parameters of the change document event
  const uid = event.params.id
  logger.log(`Setting custom claims for ${uid}`, afterClaims)
  await getAuth().setCustomUserClaims(uid, afterClaims)
  logger.log('Updating document timestamp')
  if (event.data?.after) {
    await event.data.after.ref.update({
      _userClaimsLastCommittedAt: FieldValue.serverTimestamp(),
    })
  }
}

Frontend Pinia Store (SSR Capable) [excerpt]

const userCurrentFirestore = ref<UserCurrent>()
const userCurrentClaims = ref<CustomUserClaims>({})
const userCurrent = computed(() => (useCurrentUser(firebaseApp).value))
const userReference = computed(() => (getUid.value ? docWithConverter(createCollection<UserCurrent>('User', useFirestore(firebaseApp)), getUid.value) : null))
    

const userClaimsLastCommittedAt = ref()
if (process.client) {
  useDocument(userReference, {
    maxRefDepth: 0,
    target: userCurrentFirestore,
    ssrKey: 'UserStore/UserCurrentFirestore',
  })

  // NOTE: watch for user claim changes by having a listener on the database document UserMetadata update and if it changes, trigger a claims update.
  watch(userCurrentFirestore, async (data) => {
    logger.log('Claims Updated on Server', data)
    if (!data) {
      logger.log('no data in claims update, probably no user login present?')
      return
    }

    if (
      data._userClaimsLastCommittedAt
      && userCurrent.value
      && userClaimsLastCommittedAt.value
      && data._userClaimsLastCommittedAt !== userClaimsLastCommittedAt.value
    ) {
      // Force a refresh of the user's ID token
      logger.warn('Refreshing IdToken because claims were updated on the server!')
      refreshClaims(userCurrent.value, true)
    }
    userClaimsLastCommittedAt.value = data._userClaimsLastCommittedAt
  })
}

async function refreshClaims(user: User, forceRefresh = false) {
  logger.log('called refresh claims')
  if (user) {
    const refreshResult = await getIdTokenResult(user, forceRefresh)
    userCurrentClaims.value = (refreshResult.claims as CustomUserClaims) || {}
    logger.log('result of claims refresh', userCurrentClaims.value)
  }
  else {
    logger.log('no user data present can not refresh user claims')
    userCurrentClaims.value = {}
  }
}

Note that the refreshClaims is also triggered somewhere inside the onAuthStateChanged.

Plugin to Make Sure the Store is Initialized

import { consola } from 'consola'
import { usePendingPromises } from 'vuefire'

const logger = consola.withTag('Plugin/VuefireAuthUserStore')

export default defineNuxtPlugin(async (nuxtApp) => {
  logger.debug('🛠️ Setup')
  try {
    const fba = useFirebaseApp()
    await usePendingPromises(fba)
    const userStore = useUserStore(fba.name)
    await userStore.checkUserAuth()
    logger.log('👨‍💻 Auth Middleware [userStore.userCurrentFirebaseAuth]', userStore.userCurrentFirebaseAuth?.uid)
    logger.log('👨‍💻 Auth Middleware [userStore.userCurrent.uid]', userStore.userCurrent?.uid)
    logger.log('👨‍💻 Auth Middleware [userStore.userCurrentClaims]', userStore.userCurrentClaims)
  }
  catch (error: any) {
    logger.error('🔥 Error while logging in the user', error?.code, error)
  }
})

• The above code runs inside a UserStore Pinia store. Which is a nice way for me to handle all the things.
• The Pinia Store is initialized first in a /plugin/00_vuefireAuthUserStore.js file.
• In the Plugin I do give the store the useFirebaseApp() because that appears to be a bit of a struggle to retrieve in the Pinia store (specifically on SSR renders).

export function useUserStore(firebaseApp?: string) {})

Hope these pieces are helpful. The main reason for this implementation: I have the flexibility to access the userCurrentClaims from anywhere easily and they are a reference which updates when a) the user logs out/in and b) the claims change on server (e.g. when user upgrades their stripe subscription).

[Eronne]

@chrisspiegl just to be sure, your Frontend Pinia Store (SSR Capable) is here to access the user's claims or also tu access user properties? It doesn't replace useCurrentUser from vuefire isn't it?

Thanks for your detailed answer!

[michael-strain]

Maybe I can help with this one!

For client-side, there are two ways I've generally used to handle RBAC.

useCurrentUser():

<template>
<div v-if="useCurrentUser() && roles.includes('special')">Hello Logged In User</div>
</template>
<script setup>
const user = useCurrentUser()
onMounted(async()=>{
  roles.value = await (await useCurrentUser().value.getIdTokenResult()).claims.roles
  if(!user.value || !Array(roles.value).includes('special'||'extra-special')){
    console.log("Unauthorized user detected O_O")
    useRouter().push('/login') //optional redirect
   }
})
</script>

getCurrentUser()

<template>
<div v-if="loaded">Hello Logged In User</div>
</template>

<script setup>
onMounted(async() => {

  const currUser = await getCurrentUser()
  if(!currUser){
    useRouter().push('/login')
  } else {
    const res = await currUser.getIdTokenResult()
    roles.value = res.claims.roles
    if(roles.value.includes('special'){
        loaded.value = true
    }
  }
</script>

For server-side stuff like API endpoints, I use firebase-admin directly. Been way easier IMO to pass a token as a header, then verify/decode with firebase-admin SDK. If anyone's got a better way to do the server-side stuff feel free to lmk.

Server-Side (API Endpoint) w/ Firebase-Admin SDK

import * as auth from 'firebase-admin/auth'

export default defineEventHandler(async (event) => {  
  const headers = getHeaders(event)
  const token = headers.token
  await auth.getAuth().verifyIdToken(token).then(async(decodedToken)=>{
    if(decodedToken.roles.includes('imaginary-role')){
      const result = await doStuff()
      return result
    }else{
      return {error:'Unauthorized'}
    }
  })
})