0

I'm building a React app that will use Firebase Auth. I was storing my API key inside the .env file but I've read in the React docs that it is not safe, so I have created a custom and private route on my NodeJS server that is a simple GET request which sends me the data that I need(key, projectid, etc). And I think this is the safest way to do it, right?

Now I'm trying to get this data from my backend and I'm able to do it using console.log for example but I'm unable to integrate it with Firebase function. It keeps saying that it is undefined.

This is what I have tried so far:

import * as firebase from 'firebase/app';
import 'firebase/auth';

const API_URL = process.env.REACT_APP_API_URL;
let res;
export async function getFirebaseKeys() {
  const response = await fetch(`${API_URL}/api/get`);
  res = response.json();
}
getFirebaseKeys();
//I have also tried to use firebase.OnLog but no success.
//I have also tried to wrap firebase.initializeApp and my fetch in a function but it breaks 
const app = firebase.initializeApp({
  apiKey: res.apiKey,
  authDomain: res.domain,
  databaseURL: res.database,
  projectId: res.projectId,
  storageBucket: res.storageBucket,
  messagingSenderId: res.senderId,
});

export default app;

This is my first project with Firebase and React so I'm sorry if i have missed something obvious.

ncesar
  • 1,592
  • 2
  • 15
  • 34

1 Answers1

2

What you're trying to do now is not really any safer than putting the Firebase config in the source (where it's intended to go). Hiding it behind a GET just makes people go through another step to get a hold of it if they want it.

There's nothing unsafe about putting the Firebase config in the hands of the public, as long as you are also signing in users with Firebase Authentication, and using security rules to determine who can access what data in the project.

Just do whatever is most convenient - security is not the issue here.

See also: Is it safe to expose Firebase apiKey to the public?

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
  • Thanks, but I have one last question. If my backend is using CORS and only accepts request from my frontend URL, it is not safe? – ncesar Apr 02 '20 at 02:37
  • 1
    What's to stop someone view using browser dev tools to view the contents of a URL it accessed? Or even repeat the request? – Doug Stevenson Apr 02 '20 at 02:53