Popup Blocked error on safari browser when calling signIn(redirectUri) function provided by logto/rn sdk.

[Zain995]

Describe the bug

I am using signIn function provided by logto sdk to login in expo project for both web and mobile which is working fine, but when i try to login in a safari browser i get popup blocked error. This happens only in safari browser.

How can i avoid popup blocked issue on safari?

Expected behavior

On login button click logto popup should appear and when user enters credentials the popup should close with user state being set in sdk.

How to reproduce?

Call signIn(redirectUri) function provided by sdk on a safari browser.

Environment

Expo: 52.0.0
react-native: 0.76.5
react: 18.3.1
logto/rn: 0.4.0

[ashitikov]

Hello! Faced the same problem. After digging, end up with a patch:

diff --git a/node_modules/@logto/rn/lib/client.js b/node_modules/@logto/rn/lib/client.js
index 6ce0bd7..4652e6a 100644
--- a/node_modules/@logto/rn/lib/client.js
+++ b/node_modules/@logto/rn/lib/client.js
@@ -6,6 +6,7 @@ import { LogtoNativeClientError } from './errors';
 import { BrowserStorage, SecureStorage } from './storage';
 import { generateCodeChallenge, generateRandomString } from './utils';
 const issuedAtTimeTolerance = 300; // 5 minutes
+const windowName = 'logtoAuth';
 export class LogtoClient extends StandardLogtoClient {
     constructor(config) {
         const storage = Platform.OS === 'web'
@@ -20,6 +21,7 @@ export class LogtoClient extends StandardLogtoClient {
                         this.authSessionResult = undefined;
                         this.authSessionResult = await WebBrowser.openAuthSessionAsync(url, redirectUri, {
                             preferEphemeralSession: config.preferEphemeralSession ?? true,
+                            windowName,
                         });
                         break;
                     }
@@ -57,6 +59,17 @@ export class LogtoClient extends StandardLogtoClient {
         this.storage = storage;
     }
     async signIn(options, interactionMode) {
+        if (Platform.OS === 'web') {
+            // Hack is primarily needed for safari,
+            // because it's too strict that after awaiting some promises
+            // it consider opening a popup-window as action without user initiative
+            // How the hack works:
+            // 1. It opens blank page with empty urls synchronously after button click
+            // 2. After awaiting promises logto triggers navigation function, which calls WebBrowser.openAuthSession()
+            // Under the hood, it will trigger window.open() with the same windowName and new url, 
+            // which will be recognized by browser as navigation to new url in existing opened window.
+            await WebBrowser.openBrowserAsync('', { windowName });
+        }
         await (typeof options === 'string'
             ? super.signIn(options, interactionMode)
             : super.signIn(options));

@logto+rn+0.4.0.patch

The main idea is to open empty window first (without url, because it's unknown at the moment of click), and after url is being resolved by promises, to open window again using the same window name - Safari will think that it's just url changing of existing popup window.