WebView Flicker During Silent Authentication in React Native Using authorize() with prompt=none

Knowledge Articles
1

Overview

When implementing SSO across multiple React Native apps using react-native-auth0, a WebView may briefly appear when calling authorize() with prompt=none. Although authentication succeeds, this flicker disrupts the user experience.

Applies To

  • React Native Applications
  • react-native-auth0
  • SSO with Mobile Apps
  • Silent Authentication

Cause

OAuth 2.0 requires browser interaction, even when prompt=none is used. When authorize() is called, the SDK opens a WebView to check for an existing session. If a valid session exists, Auth0 immediately redirects back with an authorization code, which the SDK exchanges for tokens before closing the WebView. This process happens quickly but still results in a brief WebView appearance.

Solution

Use Refresh Tokens (Recommended)

The best way to eliminate the WebView flicker is to use refresh tokens instead of authorize().

  1. To do this, request a refresh token during the initial login by including the offline_access scope
  2. Store it securely (Keychain for iOS, EncryptedSharedPreferences for Android)
  3. Use refreshToken() in react-native-auth0 to obtain new access tokens silently

This approach completely removes the WebView flicker, ensures a seamless experience, and follows OAuth 2.0 best practices. See Refresh Tokens for more information

Alternative: Token Caching with Expiration Checks

If refresh tokens are not an option, caching access tokens and tracking expiration can minimize WebView flicker.

  • Store the access token and its expiration time, and only attempt silent login when necessary.
  • This reduces the frequency of WebView appearances but does not eliminate them entirely.
  • See Sample Use Cases: Scopes and Claims for more details about this solution.