Fetch server data on page load (Firebase example)

[bfgpab]

Dear community,

I am using cue petite with Firebase and I you Firebase's "onAuthStateChanged " outside of app and I need to pass Auth state and user details to Vue variable. In a class due I would achieve this with a method and Created() lifecycle hook, but I can't figure out how to do this with Petite. In the same was I would like to make a one time call to fetch further user data from db.

My code:

import {getAuth, onAuthStateChanged} from "Firebase";
import { createApp, reactive } from "https://unpkg.com/petite-vue?module";

// Check if user signed in
onAuthStateChanged(auth, function($result){
	if($result){
		const $userStore = reactive({
			$result
		});
	} else {
		window.location.replace("signin.html");
	};
});
createApp({
	user: {
		id: $userStore.uid
	}
}).mount();

Thank you!

[sqllyw]

I think you should put $userStore outside of onAuth method, like following untested code:

    import { getAuth, onAuthStateChanged } from "Firebase";
    import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

    const $userStore = reactive({
        uid: 'foo',
    })

    // Check if user signed in
    onAuthStateChanged(auth, function ($result) {
        if ($result) {
            $userStore.uid = ????
        } else {
            window.location.replace("signin.html");
        };
    });


    createApp({
        // share it with app scopes
        $userStore,
        user: { id: $userStore.uid }
    }).mount()

[bfgpab]

Indeed works like charm :) Thank you very much!