Next.js Discord

Discord Forum

Hide firebase API keys from the browser/public

Answered
Mini Lop posted this in #help-forum
Open in Discord
Mini LopOP
Hi,

So I have a website which uses firebase and the website retrieves data from it. The problem I am facing right now is I can't find a viable solution to hide the API keys from the browser. I didn't know next_public_ vars makes your .env public until today so I am kind of stuck about what to do next or how do I hide the keys or even how do I use firebase functions on server side?
Answered by joulev
firebase API keys must be exposed to the browser for the firebase package to work, because that package runs on the browser.

you should use [Security Rules](https://firebase.google.com/docs/rules) to limit which websites the API keys are valid for.

firebase-admin secrets should not be exposed to the browser, because firebase-admin bypasses the mentioned security rules and it runs on the server.
View full answer

9 Replies

Mini LopOP
Here are my codes:

// firebaseApp.ts

import { initializeApp, getApps } from 'firebase/app';

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const firebaseApp =
    getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export default firebaseApp;


// khutbas.ts

import {
    doc,
    getDoc,
    getDocs,
    getFirestore,
    collection,
    query,
    orderBy,
    limit,
    Timestamp,
} from 'firebase/firestore';
import { getStorage, getDownloadURL, ref } from 'firebase/storage';

import firebase from 'firebaseApp';

const db = getFirestore(firebase);

export const getKhutbas = async () => {
    let result = null;
    let error = null;

    try {
        const khutbasRef = collection(db, 'name');
        const q = query(khutbasRef, orderBy('createdTimestamp', 'desc'));
        const res = await getDocs(q);
        result = [];

        res.forEach((r) => {
            result.push(r.data());
        });
    } catch (e) {
        error = e;
    }

    return { result, error };
};

/* Limited to 4 khutbas */
export const getLatestKhutbas = async () => {
    let result = null;
    let error = null;

    try {
        const khutbasRef = collection(db, 'name');
        const q = query(
            khutbasRef,
            orderBy('createdTimestamp', 'desc'),
            limit(4),
        );
        const res = await getDocs(q);
        result = [];

        res.forEach((r) => {
            result.push(r.data());
        });
    } catch (e) {
        error = e;
    }

    return { result, error };
};


Any help/suggestions would be appreciated.
Before yall jump on me about where next_public_ is in my env var names, I removed it for testing
Brown bear
One option is to.load these config via api on startup, but once it gets into browser domain, I don't think you can hide it from prying eyes. Also you can proxy fireball via your server if you have one
Brown bear
Afaik
Mini LopOP
wow
@Mini Lop Hi, So I have a website which uses firebase and the website retrieves data from it. The problem I am facing right now is I can't find a viable solution to hide the API keys from the browser. I didn't know `next_public_` vars makes your .env public until today so I am kind of stuck about what to do next or how do I hide the keys or even how do I use firebase functions on server side?
joulev
firebase API keys must be exposed to the browser for the firebase package to work, because that package runs on the browser.

you should use [Security Rules](https://firebase.google.com/docs/rules) to limit which websites the API keys are valid for.

firebase-admin secrets should not be exposed to the browser, because firebase-admin bypasses the mentioned security rules and it runs on the server.
Answer
thank you