title: How to Store Credentials to Local Storage to Allow Firebase Auth to Sign-in
body: <p>I'm working in an Angular 10 project, I am also using firebase hosting and cloud firestore (for DB). I am using AngularFire in my project as well.</p>
  <p>My project is already able to get documents from my firestore collection, and display them (also can edit, delete, and create them). I also set up authentication, where I use AngularFireAuth to sign in and sign out. I also have route guards to only allow users access to info after signing in.</p>
  <p>I've discovered that Firestore also has rules, and that you should set them up to secure your collection. Currently, I basically have no rules (test mode), but I want to add a basic &quot;only users can access anything&quot; rule, but am running into an issue.</p>
  <p>I think this is the issue, currently, after logging in my app will store the user in local storage. I think that I need to store this a different way so I am re-signed in from previously given creds instead of just checking if there local storage. I only get <code>ERROR FirebaseError: Missing or insufficient permissions</code> errors when my guard checks the local storage to ensure sign-in, if I sign-in first, I don't get the error.</p>
  <p>So, how should I save user data so that I don't have to sign-in on every refresh, but that I can verify the auth to firebase? I know I could store the email/password to local storage and check to re sign-in, but that seems insecure to me.</p>
  <p>I think the above is the issue, but not 100% sure.</p>
  <p>This is my firestore rule:</p>
  <pre><code>rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
    allow read, write: if request.auth != null
      match /{document=**} {
        allow read, write: if request.auth != null //should only allow users?
      }
    }
  }
  </code></pre>
  <p>Here is my auth service (where I handle sign-in/sign-out and check if local storage has user.</p>
  <pre><code>export class AuthService {
    constructor(private aFAuth: AngularFireAuth, public router: Router) {
      //I honestly don't know if I need this
      this.aFAuth.authState.subscribe((user) =&gt; {
        if (user) {
          localStorage.setItem('my-test-app-currentUser', JSON.stringify(user));
        } else {
          localStorage.setItem('my-test-app-currentUser', null);
        }
      });
    }
  
    async signIn(email: string, password: string) {
      this.aFAuth
        .signInWithEmailAndPassword(email, password).then((result) =&gt; {
          localStorage.setItem('my-test-app-currentUser', JSON.stringify(result.user));
          this.router.navigate(['']);
        }).catch((error) =&gt; {
          window.alert(error.message);
        });
    }
  
  //this is the func that needs to change, if I have storage, I need to be able to sign-in with it again
    isSignedIn(): boolean {
      if (!localStorage.getItem('my-test-app-currentUser')) {
        return false;
      }
      return true;
    }
  
    signOut() {
      return this.aFAuth.signOut().then(() =&gt; {
        localStorage.removeItem('my-test-app-currentUser');
        window.alert('You have been signed-out');
      });
    }
  }
  </code></pre>
  <p>Here my guard:</p>
  <pre><code>canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean | UrlTree&gt; | Promise&lt;boolean | UrlTree&gt; | boolean | UrlTree {
      // return true;
      if (this.auth.isSignedIn()) {
        return true;
      } else {
        this.router.navigate([&quot;sign-in&quot;]);
        return false;
      }
    }
  </code></pre>
  <p>Any help would be appreciated.</p>