Grab UID from storeToRefs rather than direct reference

src/components/CardAdministration.vue

@@ -156,7 +156,7 @@ import { setBarChartData, setBarChartOptions } from '@/helpers/plotting';
 const router = useRouter();
 
 const authStore = useAuthStore();
-const { roarfirekit, administrationQueryKeyIndex } = storeToRefs(authStore);
+const { roarfirekit, administrationQueryKeyIndex, uid } = storeToRefs(authStore);
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -390,7 +390,7 @@ const fetchTreeOrgs = async () => {
 };
 
 const { data: orgs, isLoading: loadingDsgfOrgs } = useQuery({
-  queryKey: ['dsgfOrgs', authStore.uid, props.id],
+  queryKey: ['dsgfOrgs', uid, props.id],
   queryFn: () => fetchTreeOrgs(),
   keepPreviousData: true,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/CreateOrgs.vue

@@ -216,7 +216,7 @@ const isTestData = ref(false);
 const isDemoData = ref(false);
 const toast = useToast();
 const authStore = useAuthStore();
-const { roarfirekit } = storeToRefs(authStore);
+const { roarfirekit, uid } = storeToRefs(authStore);
 const isLevante = import.meta.env.MODE === 'LEVANTE';
 
 const state = reactive({
@@ -245,8 +245,8 @@ onMounted(() => {
 });
 
 const { isLoading: isLoadingClaims, data: userClaims } = useQuery({
-  queryKey: ['userClaims', authStore.uid],
-  queryFn: () => fetchDocById('userClaims', authStore.uid),
+  queryKey: ['userClaims', uid],
+  queryFn: () => fetchDocById('userClaims', uid.value),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/ListOrgs.vue

@@ -99,11 +99,11 @@ const schoolPlaceholder = computed(() => {
 
 // Authstore and Sidebar
 const authStore = useAuthStore();
-const { roarfirekit, userQueryKeyIndex } = storeToRefs(authStore);
+const { roarfirekit, uid, userQueryKeyIndex } = storeToRefs(authStore);
 
 const { isLoading: isLoadingClaims, data: userClaims } = useQuery({
-  queryKey: ['userClaims', authStore.uid, userQueryKeyIndex],
-  queryFn: () => fetchDocById('userClaims', authStore.uid),
+  queryKey: ['userClaims', uid, userQueryKeyIndex],
+  queryFn: () => fetchDocById('userClaims', uid.value),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes
@@ -149,7 +149,7 @@ const activeOrgType = computed(() => {
 const claimsLoaded = computed(() => !isLoadingClaims.value);
 
 const { isLoading: isLoadingDistricts, data: allDistricts } = useQuery({
-  queryKey: ['districts', authStore.uid, orgsQueryKeyIndex],
+  queryKey: ['districts', uid, orgsQueryKeyIndex],
   queryFn: () => orgFetcher('districts', undefined, isSuperAdmin, adminOrgs),
   keepPreviousData: true,
   enabled: claimsLoaded,
@@ -161,7 +161,7 @@ const schoolQueryEnabled = computed(() => {
 });
 
 const { isLoading: isLoadingSchools, data: allSchools } = useQuery({
-  queryKey: ['schools', authStore.uid, selectedDistrict, orgsQueryKeyIndex],
+  queryKey: ['schools', uid, selectedDistrict, orgsQueryKeyIndex],
   queryFn: () => orgFetcher('schools', selectedDistrict, isSuperAdmin, adminOrgs),
   keepPreviousData: true,
   enabled: schoolQueryEnabled,
@@ -173,7 +173,7 @@ const {
   isFetching,
   data: orgData,
 } = useQuery({
-  queryKey: ['orgsPage', authStore.uid, activeOrgType, selectedDistrict, selectedSchool, orderBy, orgsQueryKeyIndex],
+  queryKey: ['orgsPage', uid, activeOrgType, selectedDistrict, selectedSchool, orderBy, orgsQueryKeyIndex],
   queryFn: () =>
     orgPageFetcher(
       activeOrgType,

src/components/ListUsers.vue

@@ -54,7 +54,7 @@ import { singularizeFirestoreCollection } from '@/helpers';
 
 const authStore = useAuthStore();
 
-const { roarfirekit } = storeToRefs(authStore);
+const { roarfirekit, uid } = storeToRefs(authStore);
 const initialized = ref(false);
 
 const page = ref(0);
@@ -80,7 +80,7 @@ const {
   isFetching,
   data: users,
 } = useQuery({
-  queryKey: ['usersByOrgPage', authStore.uid, props.orgType, props.orgId, page, orderBy],
+  queryKey: ['usersByOrgPage', uid, props.orgType, props.orgId, page, orderBy],
   queryFn: () => fetchUsersByOrg(props.orgType, props.orgId, ref(1000000), page, orderBy),
   keepPreviousData: true,
   enabled: initialized,

src/components/NavBar.vue

@@ -60,7 +60,7 @@ import LanguageSelector from './LanguageSelector.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
-const { roarfirekit } = storeToRefs(authStore);
+const { roarfirekit, uid } = storeToRefs(authStore);
 const initialized = ref(false);
 const menu = ref();
 const screenWidth = ref(window.innerWidth);
@@ -88,8 +88,8 @@ onUnmounted(() => {
 // ---------------------------------------------------------------
 
 const { data: userClaims, isLoading: userClaimsLoading } = useQuery({
-  queryKey: ['userClaims', authStore.uid],
-  queryFn: () => fetchDocById('userClaims', authStore.uid),
+  queryKey: ['userClaims', uid],
+  queryFn: () => fetchDocById('userClaims', uid.value),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/OrgPicker.vue

@@ -101,6 +101,7 @@ import { fetchDocById, orderByDefault } from '@/helpers/query/utils';
 
 const initialized = ref(false);
 const authStore = useAuthStore();
+const { roarfirekit, uid } = storeToRefs(authStore);
 
 const selectedDistrict = ref(undefined);
 const selectedSchool = ref(undefined);
@@ -141,8 +142,8 @@ watch(
 );
 
 const { isLoading: isLoadingClaims, data: userClaims } = useQuery({
-  queryKey: ['userClaims', authStore.uid],
-  queryFn: () => fetchDocById('userClaims', authStore.uid),
+  queryKey: ['userClaims', uid],
+  queryFn: () => fetchDocById('userClaims', uid.value),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes
@@ -252,8 +253,6 @@ const init = () => {
   initialized.value = true;
 };
 
-const { roarfirekit } = storeToRefs(authStore);
-
 unsubscribe = authStore.$subscribe(async (mutation, state) => {
   if (state.roarfirekit.restConfig) init();
 });

src/components/auth/AuthEmailLink.vue

@@ -23,13 +23,13 @@ import { fetchDocById } from '@/helpers/query/utils';
 
 const router = useRouter();
 const authStore = useAuthStore();
-const { roarfirekit } = storeToRefs(authStore);
+const { roarfirekit, uid } = storeToRefs(authStore);
 const success = ref(false);
 
 authStore.$subscribe(async () => {
-  if (authStore.uid) {
-    const userData = await fetchDocById('users', authStore.uid);
-    const userClaims = await fetchDocById('userClaims', authStore.uid);
+  if (uid.value) {
+    const userData = await fetchDocById('users', uid.value);
+    const userClaims = await fetchDocById('userClaims', uid.value);
     authStore.userData = userData;
     authStore.userClaims = userClaims;
     success.value = true;
@@ -79,9 +79,9 @@ const loginFromEmailLink = async (email) => {
       }
     })
     .then(async () => {
-      if (authStore.uid) {
-        const userData = await fetchDocById('users', authStore.uid);
-        const userClaims = await fetchDocById('userClaims', authStore.uid);
+      if (uid) {
+        const userData = await fetchDocById('users', uid.value);
+        const userClaims = await fetchDocById('userClaims', uid.value);
         authStore.userData = userData;
         authStore.userClaims = userClaims;
         success.value = true;

src/components/tasks/TaskCrowding.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskFluency.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskLetter.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskLevante.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskMultichoice.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskPA.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskRan.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskSRE.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskSWR.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/components/tasks/TaskVocab.vue

@@ -29,7 +29,7 @@ const router = useRouter();
 const gameStarted = ref(false);
 const authStore = useAuthStore();
 const gameStore = useGameStore();
-const { isFirekitInit, roarfirekit } = storeToRefs(authStore);
+const { isFirekitInit, roarfirekit, uid } = storeToRefs(authStore);
 
 const initialized = ref(false);
 let unsubscribe;
@@ -46,8 +46,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 });
 
 const { isLoading: isLoadingUserData, data: userData } = useQuery({
-  queryKey: ['userData', authStore.uid, 'studentData'],
-  queryFn: () => fetchDocById('users', authStore.uid, ['studentData']),
+  queryKey: ['userData', uid, 'studentData'],
+  queryFn: () => fetchDocById('users', uid.value, ['studentData']),
   keepPreviousData: true,
   enabled: initialized,
   staleTime: 5 * 60 * 1000, // 5 minutes

src/pages/ClassLinkLanding.vue

@@ -6,19 +6,21 @@
 </template>
 <script setup>
 import { useAuthStore } from '@/store/auth.js';
+import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
 import _get from 'lodash/get';
 import AppSpinner from '@/components/AppSpinner.vue';
 import { fetchDocById } from '@/helpers/query/utils';
 
 const router = useRouter();
 const authStore = useAuthStore();
+const { uid } = storeToRefs(authStore);
 
 let userDataCheckInterval;
 
 async function checkForUserType() {
   try {
-    const userData = await fetchDocById('users', authStore.uid);
+    const userData = await fetchDocById('users', uid.value);
     const userType = _get(userData, 'userType');
     if (userType && userType !== 'guest') {
       clearInterval(userDataCheckInterval);