Refinements for a Smooth User Logout Experience
TL;DR
- Ensure logout state updates occur in the background for smooth user experience.
- React Native Auth0 iOS alert issue is unavoidable.
- Investigate backend triggers causing erroneous state changes during logout.
- Identify and block unauthorized requests without tokens after logout.
Today, I’m diving into creating a smoother UI experience by resetting the user object upon logout, ensuring all state updates happen discreetly in the background to avoid any jarring UI changes. An additional task involves maintaining a loading spinner overlay during login/registration, preventing premature user interaction until the transition to the next screen completes.
Problem 1: Smooth Sign-out Process
Initially, I faced trouble with iOS-specific quirks during logout, especially with React Native’s Auth0 integration. It seems iOS inherently prompts an alert when transitioning to external resources, such as web views, for authentication. A key issue is that iOS alerts users when transitioning with the auth0.com prompt, something unavoidable due to system-level overrides which Auth0’s maintainers can’t circumvent.
This alert causes my app to briefly enter the background, triggering unintended state changes. Particularly, it incorrectly displays certain navigation menu items based on login state. For now, I’ve controlled most transitions, preventing unauthorized menu visibility, but there’s an issue with a specific card appearing due to backend state misalignment.
Backend Insight
Upon reviewing the backend logs, unauthorized API calls occur during logout, hitting the user interface backend unexpectedly. Significantly, these calls return 401 errors due to missing authorization tokens, and checks on several endpoints (programs, user interface, cohort data) show these requests lack essential user data, hinting at inappropriate execution timing.
Focus Areas
- Authorization Token Absence: Identifying why requests are made without tokens and user IDs is critical. The process that removes or invalidates these tokens appears to run prematurely, exposing gaps in our flow control.
- Code Exploration: I need to trace where the lack of synchronization between user state reset and backend requests arises, focusing on higher-level function flow.
ryer.io