VueJs CRUD app and Firebase Authorization not working? Trying to shore up security rules for Auth Users

Question

I have a basic VueJS CRUD app I've built using Firebase as the back end on my local machine. The CRUD part of the app is working fine and I was using the standard wide open security rules to make sure all the operations were working:

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

I then added the authorization part of the app - Login, Signup, Forgot Password Vue components and then created the authentication parts in Firebase. Setting up the simple email/password auth methods. Worked great. I can sign up new accounts and the accounts are added in Firebase. Once the accounts are created, I can sign in and get redirected to a "secure" Home page.

The next logical step was to create Security Rules to protect the data since once this is published, I don't want this to be wide open. I started with the basic auth rule set:

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

I figured since this isn't anything important, starting with just this basic rule set would allow me to test if any signed in user would be able to access the database I created in Firebase. I changed the security rule to the one above. I assumed if I went to the page without being signed in, I would get the error when I attempted to retrieve the database list of items - which was indeed what happened. I got the error about insufficient access. I then attempted to sign in with a user that was saved in the auth list of users in Firebase, then try again to access the database list page.

No go, got the same error about insufficient access.

I changed the security rules for just a single user:

service cloud.firestore {
  match /databases/{database}/documents {
    // Allow only authenticated content owners access
    match /properties/{userId}/{documents=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId
    }
  }
} 

Where the properties was the collection and then should I put in the actual UUID in the {userId} field? I tried leaving it as is and then putting the actual UUID and neither seemed to work.

I know I'm missing something in the security rules since my sign-on and sign-up components are working so I'm pretty sure its on the Firebase side of things.

Any ideas on correcting the security rules would be greatly appreciated.

Answer 1

Try to change the following line:

allow read, write: if request.auth.uid != null;