title: User is AUTHENTICATED, but: "Firebase Storage: User does not have permission to access 'path'" error coming up
body: <p><strong>I've already implemented authentication in my app, and am having no problem with creating a user and authenticating.</strong> However, now I am trying to upload a file to Firebase Storage, but it will only work when I remove the auth rule and make access public. If I leave the default rules to only allow authenticated users to access (which is what I want), I get the error: <code>Firebase Storage: User does not have permission to access 'profile-image/test.PNG'.</code> I called a method to verify my auth state right before the put request, and I can read/write to the firestore database with no issues, so I know for sure I'm authenticated. </p>
  
  <p>I'm a complete FNG so there's a good chance the problem is something silly that I've done/not done.  I'm using Angular if that is relevant.  I also activated a billing account with Google Cloud Platform, but that didn't make a difference.  </p>
  
  <p>Here's my console log showing the reference I used, the file I'm attempting to add (which again, both of those work just fine when I make access public), my uid from the auth state call, and then the error:  </p>
  
  <pre><code>STARTING UPLOAD SERVICE                        upload.service.ts:26
  FIREBASE STORAGE REFERENCE:                    upload.service.ts:27 
  Reference {authWrapper: AuthWrapper, location: Location}
    authWrapper: AuthWrapper {bucket_: "my-app.appspot.com", deleted_: false, app_: FirebaseAppImpl, storageRefMaker_: ƒ, requestMaker_: ƒ, …}
  bucket: (...)
  fullPath: (...)
  location: Location {bucket: "my-app.appspot.com", path_: "profile-image/test.PNG"}
  name: (...)
  parent: (...)
  root: (...)
  storage: (...)
  __proto__: Object
                                                   upload.service.ts:28 
  FILE CONTENTS:
                                                   upload.service.ts:29 
  File(286831) {name: "test.PNG", lastModified: 1542480795011, lastModifiedDate: Sat Nov 17 2018 13:53:15 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 286831, …}
                                                   upload.service.ts:24 
  USER AUTHENTICATED: Er6sWsDvEjM69WBAKxQffcbdPZG2
  POST https://firebasestorage.googleapis.com/v0/b/{my-app-name}/o?name=profile-image%2Ftest.PNG 403
                                                   upload.service.ts:33  
  FirebaseStorageError {code_: "storage/unauthorized", message_: "Firebase Storage: User does not have permission to access 'profile-image/test.PNG'.", 
  serverResponse_: "{↵  "error": {↵    "code": 403,↵    "message": "Pe…n denied. Could not perform this operation"↵  }↵}", name_: "FirebaseError"}
  code: (...)
  code_: "storage/unauthorized"
  message: (...)
  message_: "Firebase Storage: User does not have permission to access 'profile-image/test.PNG'."
  name: (...)
  name_: "FirebaseError"
  serverResponse: (...)
  serverResponse_: "{↵  "error": {↵    "code": 403,↵    "message": "Permission denied. Could not perform this operation"↵  }↵}"
  __proto__: Object 
  </code></pre>
  
  <p>Firebase Storage Rules  </p>
  
  <pre><code>service firebase.storage {
   match /b/my-app.appspot.com/o {
    match /{allPaths=**} {
     allow read, write: if request.auth != null;
    }
   }
  }  
  </code></pre>
  
  <p>(I also tried request.auth.uid != null but that didn't make a difference.)</p>
  
  <p>My upload service:  </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import * as firebase from 'firebase/app';
  import 'firebase/storage';
  import { AuthService } from '../services/auth.service';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class UploadService {
  
    constructor(
      private authService: AuthService
    ) { }
  
    pushUpload(uploadFile: File) {
      console.log("STARTING UPLOAD SERVICE")
      var storage = firebase.storage();
      var storageRef = storage.ref();
      var profileRef = storageRef.child('profile-image');
      var docRef = profileRef.child(uploadFile.name);
  
      this.authService.getAuthState().subscribe(auth =&gt; {
        console.log("USER AUTHENTICATED: " + auth.uid);
      })
      console.log("FIREBASE STORAGE REFERENCE:")
      console.log(docRef);
      console.log("FILE CONTENTS:");
      console.log(uploadFile);
      docRef.put(uploadFile).then(res =&gt; {
        console.log(res);
      }).catch(err =&gt; {
        console.log(err);
      });
    }
  }
  </code></pre>
  
  <p>Firebase config in environment.ts:  </p>
  
  <pre><code>import * as fb from 'firebase/app';
  
  // This file can be replaced during build by using the `fileReplacements` array.
  // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
  // The list of file replacements can be found in `angular.json`.
  
  export const environment = {
    production: false,
    firebase: {
      apiKey: "{my-api-key}",
      authDomain: "my-app.firebaseapp.com",
      databaseURL: "my-app.firebaseio.com",
      projectId: "my-app",
      storageBucket: "gs://my-app.appspot.com",
      messagingSenderId: "####"
    }
  };
  
  fb.initializeApp(environment.firebase);
  </code></pre>
  
  <p>I replaced some of the identifying information with generic in the console log &amp; environment.ts file.
  I should also mention that authentication was working just fine for me before I added <code>fb.initializeApp(environment.firebase);</code> but I was getting an error without this line once I tried to make an upload request. </p>
  
  <p>Thanks so much in advance for any advice you may have &amp; if I should provide any more info, please let me know!</p>