es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema con getAuth() en una ruta diferente – SvelteKit

26 Jul, 2023 Programación

Estoy intentando configurar la autenticación de correo electrónico/contraseña de Firebase en SvelteKit. En __layout.svelte inicializo mi aplicación de Firebase:

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


onMount(() => {
    // Configuración de Firebase de tu aplicación web
    const firebaseConfig = {
        apiKey: '***',
        authDomain: '***.firebaseapp.com',
        projectId: '***',
        storageBucket: '***.appspot.com',
        messagingSenderId: '***',
        appId: '***'
    };

    // Inicializar Firebase
    const app = initializeApp(firebaseConfig);
});

`

Para mi ruta de inicio de sesión/registro, necesito llamar a getAuth()pero cada vez que lo hago, obtengo un error:
svelte

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

`
“`
El error que obtengo es:

Firebase: No se ha creado ninguna aplicación de Firebase ‘[DEFAULT]’ – llama a Firebase App.initializeApp()

Creo que esto se debe a que necesito pasar la app de __layout.svelte dentro de la función getAuth(), pero no sé cómo exportar app a mi ruta de inicio de sesión para hacerlo.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para exportar la instancia app desde __layout.svelte a una ruta de inicio de sesión en SvelteKit, puedes utilizar el $app store de SvelteKit.

    En __layout.svelte, agrega la instancia app al $app store:

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

    onMount(() => {
        // Configuración de Firebase de tu aplicación web
        const firebaseConfig = {
            apiKey: '***',
            authDomain: '***.firebaseapp.com',
            projectId: '***',
            storageBucket: '***.appspot.com',
            messagingSenderId: '***',
            appId: '***'
        };

        // Inicializar Firebase
        const app = initializeApp(firebaseConfig);
        setContext('firebase_app', app); // <-- Agrega esta línea para establecer la instancia `app` en `$app`
    });
</script>

    Luego, en tu ruta de inicio de sesión, puedes obtener la instancia app desde el $app store:

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

    onMount(() => {
        const app = getContext('firebase_app'); // <-- Obtén la instancia `app` desde `$app`
        const auth = getAuth(app); // <-- Pasa la instancia `app` a `getAuth()`
        connectAuthEmulator(auth, 'http://localhost:9099');
    });
</script>

    Utilizando el sistema de store y contexto de SvelteKit, puedes compartir fácilmente datos e instancias entre componentes y rutas.

Comments are closed.