Firebase Authentication React

Question

I'm accessing a firestone db on firebase through react js. Here is my firebase.js file:

import firebase from "firebase";
const firebaseConfig = {
  apiKey: "SECR",
  authDomain: "SECRET",
  projectId: "SECRET",
  storageBucket: "SECRET",
  messagingSenderId: "SECRET",
  appId: "SECRET",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { auth, provider, db };

Now if I understand correctly, this code just tells firebase the location of my db. Does this file also serve as authentication?

Let me clarify, Here I'm now writing to the db (this is on another file):

import { db } from "../firebase";
function Login() {
  const handleLogin = () => {
    const name = prompt("Type name");
    if (name) {
      db.collection("opponents").add({
        name: name,
      });
    }
  };

Here I'm able to access the db when my security rules in firebase are set to allow read, write from everyone. Which isn't secure. I want to change that.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

So I replaced the rules to this (and changed nothing else):

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

This time it didn't work. So my question is, how do I securely give ONLY my code read/write access to the db. Can I make it so that if my firebase config values are correct, then it gives me access? Or is there a better way to only make my code allowed to access the db?

You don't seem to be signing in to Firebase anywhere in the code you shared. — Frank van Puffelen, Mar 08 '21 at 22:53
ohh, no i never signed in to firebase through my code. Your correct. How would I go about doing that? — Tarun Ravi, Mar 08 '21 at 22:57
I recommend starting with: https://firebase.google.com/docs/auth — Frank van Puffelen, Mar 08 '21 at 23:39
@FrankvanPuffelen I'm a little confused I think this documentation is for allowing users to sign in with google/custom/github etc. I think what I want is different, I want to give access to my website allowing my website to have full access to the db. Am I understanding something wrong? So the db only allows read/write from my website, and not from any random website — Tarun Ravi, Mar 08 '21 at 23:46

score 1 · Accepted Answer · answered Mar 08 '21 at 23:40

1

The request.auth variable in your security rules is only set if the user is signed in to Firebase Authentication, which doesn't seem to be the case in the code you shared.

To get started adding Firebase Authentication to your app, have a look at its documentation.

answered Mar 08 '21 at 23:40

Frank van Puffelen

565,676
79
828
807

I'm a little confused I think this documentation is for allowing users to sign in with google/custom/github etc. I think what I want is different, I want to give access to my website allowing my website to have full access to the db. Am I understanding something wrong? So the db only allows read/write from my website, and not from any random website – Tarun Ravi Mar 08 '21 at 23:46
It depends on whether "your website" is where the access code executes. Is "your website" a Node server, which handles *all* access to the database, serving only HTML/CSS to the browser? Because your code above looks like it is designed to run **IN THE BROWSER**, in which case the *browser* needs access to the database - i.e. the USER - and you will want to use Firebase Auth to authenticate THOSE USERS so they can have access to the data. – LeadDreamer Mar 08 '21 at 23:55
If you are running all database access in the server/Node environment, you need the firestore-admin SDK - which is NOT what you show. – LeadDreamer Mar 08 '21 at 23:56
There is currently no way to limit access to your database based on the web site making the request. See https://stackoverflow.com/questions/18890330/how-to-make-sure-only-my-own-website-clientside-code-can-talk-to-firebase-back, https://stackoverflow.com/questions/18005984/how-do-i-prevent-un-authorized-access-to-my-firebase-realtime-database, https://groups.google.com/g/firebase-talk/c/oMmwe3gK9d0 and https://stackoverflow.com/a/52018178 – Frank van Puffelen Mar 09 '21 at 00:16

Firebase Authentication React

1 Answers1