login state with signInWithCustomToken shared with browser tabs

Open
  • Is something wrong?
#3,659 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 3 days

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
angular, firebase, typescript
Domain
authentication

Research direction

Start with the FireService login and loginAsPublicUser methods, especially their angularFireAuth.signInWithCustomToken and signOut calls. Check the AngularFire authentication entry points and browser persistence behavior to determine whether separate tab state is supported. Done means account-owner and public-user sessions remain isolated across tabs without overriding each other's authorization state.

Written by the indexing model from the issue text.

Description

Hi

I have an application built with angular fire.
How can I not share login state among tabs in a same browser ?

Application overview

I have a class 'FireService' to login with custom token.
And application let users to login two ways 'as account owner' or 'as public user'.
And if an account owner logins, FireService#login method will be called.
And if a public user logins, FireService#loginAsPublicUser method will be called.

Issue

With same browser but different tab, login as an account owner in a tab 'A' and login as a public user in a tab 'B', the login state was overridden with the public users's and he gets an error due to insufficient permission of firebase rules. Because the owner was trying to access as the public user and blocked by my firebase rules.

I checked the browsers log, after the account owner's stats was overridden, the authorization headers value to start session with firestore was the public user's not the account ownser's.
How can I use login state separately for users different tabs in a same browser?

curl 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2{project name}%2Fdatabases%2F(default)&RID=*****&CVER=*****X-HTTP-Session-Id=gsessionid&zx=*****&t=1' \
~~~
  -H 'x-client-data: CJ2EywE=' \
  --data-raw 'headers=*****Authorization%3ABearer%20eyJhbGciOiJSU*****'

@Injectable()
export class FireService {

~~~~

  public async login(roomId?: string): Promise<void> {
    if (roomId) {
      this.roomId = roomId;
    }
    const res = await this.serverClient
      .getFirebaseToken(this.roomId)
      .toPromise();

    this.accountId = this.serverClient.getAccountId();

    try {
      await this.angularFireAuth.signInWithCustomToken(res.firebaseToken);
      this.startTokenRefresh(true);
      this.loggedIn = true;
    } catch (error) {
      console.error(error);
    }
  }

  public async loginAsPublicUser(
    participantId: string,
    sharedRoomId: string,
    password: string
  ): Promise<void> {
    this.participantId = participantId;
    this.sharedRoomId = sharedRoomId;
    this.password = password;
    const res = await this.serverClient
      .getPublicFirebaseToken(
        this.participantId,
        this.sharedRoomId,
        this.password
      )
      .toPromise();

    try {
      await this.angularFireAuth.signOut();
      await this.angularFireAuth.signInWithCustomToken(res.firebaseToken);
      this.startTokenRefresh(true);
      this.loggedIn = true;
    } catch (error) {
      console.error(error);
    }
  }
Dominant language
TypeScript
Stars
7.8k
Forks
2.1k
Avg merge
2d 22h
Merged PRs (30d)
25

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angularfire

All issues in angular/angularfire

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.