Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firestore access with User context depends on never called Code? #2864

Closed
roboalex2 opened this issue Jun 14, 2021 · 14 comments
Closed

Firestore access with User context depends on never called Code? #2864

roboalex2 opened this issue Jun 14, 2021 · 14 comments

Comments

@roboalex2
Copy link

Version info

Angular: 12.0.3

Firebase: 8.6.7

AngularFire: 6.1.5

OS: Windows 10
Browser: Chrome
package.json: Open

I basically created an AuthService (Open).
This AuthService is used by a Navbar Component inside the AppComponent to get the Profil Name and Image.
Like this:

export class TopbarComponent implements OnInit {
  name: string = "Unknown User";
  image: string = "https://cdn.pixabay.com/photo/2017/06/13/12/53/profile-2398782_960_720.png";
  constructor( public auth: AuthService, private fns: AngularFireFunctions) {
    auth.user$.subscribe((user) => {
      this.name = user.displayName;
      this.image = user.photoURL;
    });
  }

There is also a login Button that calls the AuthServices login() function. For now lets just emagine we are already logged in.
In side the AuthService i try to read my userdata from Firestore.
My Firestore rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  	function isAdmin() {
      return request.auth.token.admin == true;
    }
  
      match /user/{userId} {
    	allow read: if request.auth.uid == userId || isAdmin();
      allow create, delete, update: if isAdmin();
    }
  }
}

I also have the admin claim.

So normaly i would expect to see my Userdata in the console. But instead i get:
image
Since i expected it to work and i wasn't able to research a working solution. I asked on Stackoverflow (Open)

Later i found a working solution but this "solution" makes no sense at all.

Solution:
First i add private afAuth: AngularFireAuth to the constructor of a random component. It still dosn't work after that.
But if i add this.afAuth.setPersistence(firebase.auth.Auth.Persistence.SESSION); or this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) anywhere (even if those lines get never called) inside that random Component the AuthService suddenly works and spits out all the data i want. It isn't even necersarry for the Component to be activly used on the Page.

Example Video: https://youtu.be/jbEnTLJ9Lmc (The longer you look the worse it gets)

In the video i use the AppComponent but als works with every random Component i tried. AppComponent (Open)

I basically have no idea why that works but it seems very very wrong.

@google-oss-bot
Copy link

This issue does not seem to follow the issue template. Make sure you provide all the required information.

@amjadyahya1
Copy link

Your solution worked, thanks.

@mikgross
Copy link

Same issue here. Angular 11, @angular/fire 6.1

@mikgross
Copy link

mikgross commented Jun 18, 2021

solution worked:

Solution:
First i add private afAuth: AngularFireAuth to the constructor of a random component. It still dosn't work after that.
But if i add this.afAuth.setPersistence(firebase.auth.Auth.Persistence.SESSION); or this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) anywhere (even if those lines get never called) inside that random Component the AuthService suddenly works and spits out all the data i want. It isn't even necersarry for the Component to be activly used on the Page.
...
I basically have no idea why that works but it seems very very wrong.

However, what the hell is happening here ?

@stevebrowndotco
Copy link

Watching the video -- that's freaking nuts. I too am getting permissions issues on Firestore after upgrading to angular 12 and then updating firestore and firebase. It's got nothing to do with the security rules on the Firebase console because I am running the same project in angular 9 side by side!

@mikgross
Copy link

mikgross commented Jun 19, 2021 via email

@Infortematica
Copy link

Thanks! I was going crazy with this problem. It's not just in the Firestore, it's also in the Realtime Database. If you refresh the web page, the authentication causes the user to log in, but has a permission error when getting data (the client does not have permission to access the desired data).

Doing that trick solved the problem, but now I get a warning from firebase due to this solution line: "import firebase from 'firebase';" But if I replace the line with the correct one "import firebase from 'firebase / app'; then the problem is still there.

The firebase warning is: "It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use"

@martinsiden
Copy link

Facing the same issue in multiple Firebase projects.

We're running:
Angular v12.0.5
Firebase v8.6.8
AngularFire v6.1.5

The workaround described in this issue works for us as well if we import like this:

import firebase from 'firebase'

Not to ecstatic about that, but at least it got us going writing code again.

@maguro
Copy link

maguro commented Jun 22, 2021

Using imports of the form

import firebase from "firebase/app";
import "firebase/auth";

Got things working for me and also removed the warnings.

@Infortematica
Copy link

So, with that last comment of maguro I tried only with his second import on app-component.ts and it works, at least for me:

import "firebase/auth";

no "phantom function" needed (the other import of course where you need it)

@mikgross
Copy link

Weird behavior, workaround worked for angular 11.2.4, not in 11.2.14.

@stevebrowndotco
Copy link

Downgrading to Firebase 8.6.1 works for me. The offending version was 8.6.8. I'm on Angular 12

@markgoho
Copy link
Contributor

markgoho commented Jul 1, 2021

Per this comment there is a v8.7 of the JS SDK soon-to-be released that seems to solve the problem.

@jamesdaniels
Copy link
Member

Closing as it's been fixed in the JS SDK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants