Cannot read properties of null (reading 'photoURL')

[mrleblanc101]

Reproduction

https://github.com/mrleblanc101/neobigben

Steps to reproduce the bug

• Login
• Click the User acount menu in the top-right
• Logout
• This warning message appear in the console:

Cannot read properties of null (reading 'photoURL')

But my logout method redirect to an empty logout page with an empty layout before login out, so the user account component is not even mounted anymore when this error happen.
Here is my logout method:

async function logout() {
    const auth = useFirebaseAuth()!;
    const localeRoute = useLocaleRoute();
    const store = useIndexStore();

    await navigateTo( // navigate to an empty page with an empty layout
        localeRoute({
            name: 'logout',
        }),
    );
    store.$reset(); // reset my useCollection
    await signOut(auth); // signout
    return navigateTo( // redirect to guarded login page after logout
        localeRoute({
            name: 'login',
        }),
    );
}

Expected behavior

There should not cause a warning in an unmounted component

Actual behavior

This cause an warning on a unmounted component

Additional information

No response

[mrleblanc101]

Using optional chaining user?.photoURL or v-if fix the issue but I do not understand why

[mrleblanc101]

Maybe it's related, but after using the above workaround, I get this error on logout:

Uncaught (in promise) FirebaseError: Function where() called with invalid data. Unsupported field value: undefined.

My useCollection has a where where('user', '==', user.value?.uid), to only get data from the logged in user as bellow:

const entries = useCollection<Entry>(
    computed(() =>
        query(
            collection(db, 'entries').withConverter(dateConverter),
            where('user', '==', user.value?.uid),
            where('date', '>=', weekStart.value),
            where('date', '<=', weekEnd.value),
        ),
    ),
    {
        ssrKey: 'entries',
    },
);

So before my logout, I call store.$reset which should "unbind" the useCollection ?
I'm not sure if it's the right way, but pinia does not have a build-in store.reset for setup store and vue-fire has un $unbind but only in the option API, so maybe i'm doing something wrong.

function $reset() {
    projects.value = [];
    priorities.value = [];
    entries.value = [];
}

[mrleblanc101]

I also get this, so I guess I'm doing something wrong when I try to force Vue to stop triggering my useCollection when I logout.

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core

[mrleblanc101]

I wonder if this is not a bug with Nuxt 3, as clearly my "on loged out" should be called after the mount of the logout page.
I even added a nextTick just to be sure !

async function logout() {
    console.log('on logout');
    const auth = useFirebaseAuth()!;
    const localeRoute = useLocaleRoute();
    const store = useIndexStore();

    await navigateTo(
        localeRoute({
            name: 'logout',
        }),
    );
    store.$reset();
    await nextTick();
    console.log('loged out');
    await signOut(auth);
    return navigateTo(
        localeRoute({
            name: 'login',
        }),
    );
}

[mrleblanc101]

I've moved everything after the first redirect into the onMounted of the logout page.
I also added a nextTick to wait for the mount of the new layout before loggin out.
I'm not 100% sure what was wrong, but I think it's related to the difference between created and mounted.

onMounted(async () => {
    await nextTick();
    store.$reset();
    await signOut(auth);
    navigateTo(
        localePath({
            name: 'login',
        }),
    );
});