First time logging in twitter browser - stuck in a white screen

Help - Plug n Play
1

heres the flow.
open https://playw3.com inside twitter (should open twitter browser)
you will see a blue “Connect” button - click on it.
a T&C popup will appear - confirm it
click on google sign in - you will be sent to an empty web3auth page.
this issue happens first time only for some reason.
next time you will try, it will work.
added a video for example
https://drive.google.com/file/d/1yqKXBY4ybPxA_qI_mkD6cVNtUwF4Kb-c/view?usp=sharing

2

Thank you for the detailed report and the video link—it’s very helpful!

Summary of the Issue:

  • Platform: Web (Twitter in-app browser)
  • SDK/Integration: Web3Auth Plug n Play, using Google sign-in via Firebase Custom Connection
  • Issue: On first login attempt via Google in the Twitter browser, after accepting T&C, the user is redirected to a blank (white) Web3Auth page. On subsequent attempts, login works as expected.
  • Reproduction Steps:
    1. Open https://playw3.com in the Twitter in-app browser.
    2. Click “Connect” → Accept T&C → Click Google sign-in.
    3. See a blank Web3Auth page (first attempt only).

What we have:

  • Video evidence of the issue.
  • Context: Using Firebase as a custom authentication provider with Web3Auth.

Next Steps / Additional Info Needed:
To help the support team investigate, could you please provide:

  1. Web3Auth SDK Version you are using (if known).
  2. Web3Auth Initialization & Login Code Snippet (especially the part where you initialize Web3Auth and handle login with Firebase/Google).
  3. Any browser console errors or logs during the first (failing) login attempt? A screenshot or copy-paste of console output would be ideal.

Possible Causes/Suggestions:

  • The Twitter in-app browser has known limitations with popups, cookies, and redirects, which can cause issues with OAuth flows.
  • If you’re using signInWithPopup, consider switching to signInWithRedirect for better compatibility with in-app browsers.
  • Make sure you’re handling the redirect/callback properly after Google authentication, especially on the first attempt.

References:

Once you share the code snippet and any console logs, the support team can dig deeper and suggest a more targeted fix. Thank you for your patience and for providing such clear steps!

Let us know if you have those details or if you need help capturing the logs.

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

will add the following needed information in a bit - just to make 1 thing clear - im talking about twitter app on mobile - not WEB

4

“@web3auth/auth-adapter”: “^9.5.2”,
“@web3auth/base”: “^9.5.2”,
“@web3auth/ethereum-provider”: “^9.5.2”,
“@web3auth/no-modal”: “^9.5.2”,
“@web3auth/no-modal-react-hooks”: “^9.5.2”,
“@web3auth/openlogin-adapter”: “^8.12.4”,
“@web3auth/wallet-connect-v2-adapter”: “^9.5.2”,

12:16
import { AuthAdapter } from “@web3auth/auth-adapter”;
import { type IWeb3AuthCoreOptions, WEB3AUTH_NETWORK } from “@web3auth/base”;
import { EthereumPrivateKeyProvider } from “@web3auth/ethereum-provider”;
import { Web3AuthNoModal } from “@web3auth/no-modal”;
import state from ‘…/…/state’;
import { whitelistUrl } from “@toruslabs/openlogin”;
import isTelegramBrowser from “…/…/Utils/isTelegramBrowser”;
let cachedWeb3Auth: Web3AuthNoModal | null = null;
let initializationPromise: Promise | null = null;
// Initialize Web3Auth
const initWeb3Auth = async (): Promise => {
// Return cached instance if available
if (cachedWeb3Auth) {
return cachedWeb3Auth;
}
// If initialization is in progress, return the existing promise
if (initializationPromise) {
return initializationPromise;
}
// Create new initialization promise
initializationPromise = (async () => {
try {
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: {
chainConfig: state.web3AuthCfg as any
},
});
const web3AuthOptions: IWeb3AuthCoreOptions = {
clientId: state.web3_auth_token,
web3AuthNetwork: WEB3AUTH_NETWORK.CYAN,
sessionTime: (86400 * 7),
privateKeyProvider,
};
const web3auth = new Web3AuthNoModal(web3AuthOptions);
const sig = await whitelistUrl(state.web3_auth_token, state.web3_secret_token, window.location.origin);
const isTelegram = isTelegramBrowser();
// Configure Auth Adapter for social logins
const authAdapter = new AuthAdapter({
adapterSettings: {
originData: { [origin]: sig },
uxMode: isTelegram ? “redirect” : “popup”,
},
});
web3auth.configureAdapter(authAdapter);
await web3auth.init();
// Cache the instance
cachedWeb3Auth = web3auth;
return web3auth;
} catch (error) {
console.error(“Web3Auth initialization error:”, error);
// Clear the initialization promise on error
initializationPromise = null;
throw error;
}
})();
return initializationPromise;
};
export const clearWeb3AuthCache = () => {
cachedWeb3Auth = null;
initializationPromise = null;
};
export default initWeb3Auth;

web3Provider = web3AuthProvider;
provider = new BrowserProvider(web3Provider, {
chainId: parseInt(state.networks.MAINNET.chainId, 16),
name: state.networks.MAINNET.chainName
});
await web3auth.connectTo(WALLET_ADAPTERS.AUTH, {
loginProvider: type,
extraLoginOptions: {
mfaLevel: “none”,
},
});