Firebase 身份验证有效，但 Ui 在 svelte 中将用户名闪烁为未定义

Question

1. It seems working shortly
2. The problem is blinking screen, when i do form action, ui shows email very shortly, but change to undefined

• +page.svelte

<div>
    <div>
        {$fbUser?.email}
    </div>
    {#if !$fbUser}
        <a href="/auth">go auth</a>
    {/if}
</div>

• +page.server.ts

export const actions: Actions = {
    register: async ({ request }) => {
        const data = await request.formData();
        const email = String(data.get('email'));
        const password = String(data.get('password'));
        try {
            await fbUser.createUser({ email, password });
        } catch (e) {
            if (e instanceof FirebaseError) {
                return fail(409, {
                    failed: true,
                    error: e.message
                });
            }
        }
        throw redirect(307, "/home")
    },

• writable store

const userWritable = writable<User | null>(fb_auth.currentUser);

function authStore() {
    const { set, subscribe, update } = userWritable;

    const changes = () => onAuthStateChanged(fb_auth, (u) => {
        if (u) set(u)
        else update((curr) => curr = u)
    })

    return {
        subscribe,
        createUser: async (user: Register) => {
            await createUserWithEmailAndPassword(fb_auth, user.email, user.password);
            changes()
        },

I tried installing onAuthStateChanged in +page.svelte instead of store using load function for onAuthStateChanged... but all result are same. email shows very shortly after that it is changed to undefined. seems serverside(firebase) works, but i think im missing something on ui concepts

Answer 1

Try to add an await block surround your div in +page.svelte

{#await fbUser}
<div>
    <div>
        {$fbUser?.email}
    </div>
    {#if !$fbUser}
        <a href="/auth">go auth</a>
    {/if}
</div>
{/await}