Resolving Auth0 Passwordless Magic Link Errors In React Native Applications
Last Updated:
Overview
Implementing Auth0 passwordless magic links in a React Native application causes a session mismatch error when the link opens in a different browser than the browser that initiated the request. The recommended method to resolve this requires switching to a One-Time Password (OTP) code flow. When testing on a physical device and opening the received magic link via a native email application (for example), Auth0 generates the following error:
Something Went Wrong. The link must be opened on the same device and browser from which you submitted your email address.
Applies To
- Auth0
- React Native SDK (
react-native-auth0) - Passwordless Email Connection
Cause
When using a mobile device, magic links frequently open in a default or in-app browser (such as the Gmail in-app browser) that differs from the browser that initiated the authentication process. This difference causes a session and state mismatch.
Solution
How is the passwordless authentication error resolved?
There are a few ways to resolve this session mismatch error depending on the desired user experience and security requirements for the application.
Switch to OTP codes for native applications.
Switch to using OTP codes instead of magic links. Implement the OTP code flow by requesting a code and passing the code to the login function using the following code snippet.
// Request the code
auth0.auth.passwordlessWithEmail({
email: '<user-email@domain.com>',
send: 'code'
});
// Login with the codeƒ
auth0.auth.loginWithEmail({
email: '<user-email@domain.com>',
code: '<123456>'
});
Implement custom callback handling for magic links.
If a magic link flow is required but bypassing the session verification flag is not an option, the native application must manually handle the callback, as the Auth0 SDK does not natively handle cross-browser session continuity. Review the following resource for implementation details and recommendations around magic link flow callback handling.
Allow verification without a session to keep magic links.
If maintaining the magic link flow is preferred, bypass the session mismatch error by setting the allow_magiclink_verify_without_session tenant flag to true. A Management API PATCH request accomplishes this and allows the link to verify successfully even if opened in a different browser or application.
NOTE: This alters the default security posture of magic links by removing the same-session requirement.
Review the following resources for more details and instructions on how to patch the tenant flag.
- Open Email Passwordless Magic Link from any Browser
- Why am I seeing allow_magiclink_verify_without_session