firebase connection

[cerulean dagger]

hi all, i learn next and i want use firebase for my project but i have this error (see picture)

i don't know how to solve this ... thx for your help

[vernal salmon]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[buoyant pier]

I am not quite sure if this should be like that (see attached). If undefined is fine, then provide more info

[cerulean dagger]

i don't know bro x) i never use nosql so it's new for me ..

look my config : ```js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
apiKey: process.env.FIREBASE_APIKEY,
authDomain: process.env.FIREBASE_AUTHDOMAIN,
projectId: process.env.FIREBASE_PROJECTID,
storageBucket: process.env.FIREBASE_STORAGEBUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING,
appId: process.env.FIREBASE_APPID,
measurementId: process.env.FIREBASE_MEASUREMENTID
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { app, db };```

and the code :

"use client"
import { createContext, useContext, useEffect, useState } from "react";
import { collection, onSnapshot } from "firebase/firestore";
import { db } from "../db/firebaseConfig";
import { DataType, DbContextType } from "../Types/useType";

const UsersContext = createContext<DbContextType | null>(null);

export const useFirebase = () => {
    const context = useContext(UsersContext);
    if (!context) {
        throw new Error("useUsers must be used within a UsersProvider")
    }
    return context;
}

export const UsersProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [users, setUsers] = useState<DataType[]>([]);

    useEffect(() => {
        const unsubscribe = onSnapshot(
            collection(db, "users"), 
            (snapshot) => {
                const data: DataType[] = snapshot.docs.map(doc => ({
                    id: doc.id,
                    ...doc.data()
                } as DataType));
                setUsers(data);
            },
            (error) => {
                console.error("Firestore snapshot error:", error);
            }
        );

        return () => unsubscribe();
    }, []);

    const value = { users };

    return (
        <UsersContext.Provider value={value}>
            {children}
        </UsersContext.Provider>
    );
}```

[buoyant pier]

You try to connect your client to the database. That does not work, because your env variables are only available serverside.

Two options now:

1. Make the env variables public (watch out)
2. Connect your client to the nextjs server (might not be supported)

[cerulean dagger]

i'm on local, and i use .env.local

ok without env local it work

but why ?

[buoyant pier]

did you added your .env variables to your hosting provider?

[subtle rapids]

Hi @cerulean dagger

@buoyant pier opinion is right.

you can add NEXT_PUBLIC_ prefix to your environment variables.

[buoyant pier]

yea, that's the 1. solution from here #1308103147750817902 message (<--- click)
Thanks for confirming this 👍

[cerulean dagger]

oh

thx

[cerulean dagger]

thx really ❤️

[subtle rapids]

You are welcome.