Skip to content

Conversation

mrentmeister-tt
Copy link

@mrentmeister-tt mrentmeister-tt commented May 6, 2025

Description

This PR addresses a race condition in the isAuthenticated$ observable that can occur during the login and logout flows. The issue manifests when the application navigates before the isAuthenticated$ observable has a fresh value, potentially leading to stale authentication states.

Fixes #668

The changes include:

  • Introduction of a RefreshState enum to track the state of auth state refreshes
  • Modification of handleRedirectCallback to wait for the refresh operation to complete before navigation
  • Updates to the logout function to ensure it waits for the refresh operation to complete
  • Addition of a refreshComplete$ observable to signal when refresh operations are complete

These changes ensure that navigation only occurs after the authentication state has been properly updated, preventing race conditions and stale values in the isAuthenticated$ observable.

References

This PR addresses the issue described in DEV-2553, where users were experiencing blank screens during the authentication flow due to race conditions in the isAuthenticated$ observable.

Testing

The changes can be tested by:

  1. Testing the login flow:

    • Call loginWithRedirect()
    • After redirect, verify that navigation only occurs after isAuthenticated$ has a fresh value
    • Verify no blank screens appear during the transition
  2. Testing the logout flow:

    • Call logout()
    • Verify that the operation completes only after the refresh operation is done
    • Verify no race conditions occur during the transition

Environment:

  • Angular 13

  • Node.js 20.15.0

  • macOS 24.4.0

  • This change adds test coverage for new/changed/fixed functionality

Checklist

  • [] I have added documentation for new/changed functionality in this PR or in auth0.com/docs
  • [] All active GitHub checks for tests, formatting, and security are passing
  • The correct base branch is being used, if not the default branch

}

this.authState.refresh();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trigger a refresh and wait for it to fully propagate before completing the observable

constructor(@Inject(Auth0ClientService) private auth0Client: Auth0Client) {}
constructor(@Inject(Auth0ClientService) private auth0Client: Auth0Client) {
// Subscribe to refreshCompletion$ to ensure refresh state completes
this.refreshCompletion$.pipe(takeUntil(this.ngUnsubscribe$)).subscribe();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is here to ensure that we always have at least one subscriber to refreshCompletion$, so that we accurately keep track of the internal state. If we don't do this, then the observable chain to change refreshSubject to Complete might not be invoked.

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

Successfully merging this pull request may close these issues.

Double login redirect on ionic + angular workflow
1 participant