getAuth() 在不同路径中的问题 - SvelteKit答案

【问题标题】：Problem with getAuth() in a different route - SvelteKitgetAuth() 在不同路径中的问题 - SvelteKit
【发布时间】：2022-01-22 23:21:04
【问题描述】：

我正在尝试在 SvelteKit 中设置 Firebase 电子邮件/密码身份验证。在__layout.svelte 中，我初始化了我的 Firebase 应用：

<script lang="ts">
    import { onMount } from 'svelte';
    import { initializeApp } from 'firebase/app';

    onMount(() => {
        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: '***',
            authDomain: '***.firebaseapp.com',
            projectId: '***',
            storageBucket: '***.appspot.com',
            messagingSenderId: '***',
            appId: '***'
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
    });
</script>

对于我的登录/注册路线，我需要致电getAuth()，但无论何时我都会收到错误消息：

<script lang="ts">
    import { onMount } from 'svelte';
    import { getAuth, connectAuthEmulator } from 'firebase/auth';

    onMount(() => {
        const auth = getAuth(); //**ERROR HERE**
        connectAuthEmulator(auth, 'http://localhost:9099');
    });
</script>

我得到的错误是：

Firebase：没有创建 Firebase 应用“[DEFAULT]” - 调用 Firebase App.initializeApp()

我认为这是因为我需要在 getAuth() 函数内从 __layout.svelte 传递 app，但我不知道如何将 app 导出到我的登录路径。

【问题讨论】：

标签： firebase firebase-authentication routes svelte sveltekit

【解决方案1】：

我怀疑您遇到了异步问题...

文件：Auth.svelte

<script lang="ts">
    import { onMount } from 'svelte';
    import { initializeApp } from 'firebase/app';
    import { getAuth, connectAuthEmulator } from 'firebase/auth';

    onMount(async () => {
        const firebaseConfig = {
            apiKey: '***',
            authDomain: '***.firebaseapp.com',
            projectId: '***',
            storageBucket: '***.appspot.com',
            messagingSenderId: '***',
            appId: '***'
        };

        // Initialize Firebase
        const app = await initializeApp(firebaseConfig);
    
        const auth = getAuth(); // This should work... 
        connectAuthEmulator(auth, 'http://localhost:9099');
    });
</script>

在 __layout.svelte 中：

<script>
    import Auth from "$lib/Auth.svelte";
</script>

<Auth />

这样可以吗？

【讨论】：