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

Posted 2023-02-23

【中文标题】getAuth() 在不同路径中的问题 - SvelteKit

【英文标题】：Problem with getAuth() in a different route - 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 导出到我的登录路径。

【参考方案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 />

这样可以吗？