Want to add ux mode redirect issue?ios pop up blocked

const web3AuthInstance = new Web3Auth({
clientId,
enableLogging: true,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.SOLANA,
chainId: “0x3”,
rpcTarget: rpcTarget,
},
web3AuthNetwork: “sapphire_devnet”,
uiConfig: {
primaryButton: “socialLogin”,
loginMethodsOrder: [“google”, “facebook”, “twitter”],
loginGridCol: 2,
},
});

I want to add uxmode property but its giving me error

Hey @muhammad.ahmed you can checkout this troubleshooting guide for pop ups being blocked, this is done by OS for securities reason.

yeah but when i am adding that property ux mode to redirect its giving me type error so where exactly how to integrate that property I have seen this already.
kindly help me with that

Can you share a code snippet, and error as well. The above code snippet, doesn’t have uxMode property.

const web3AuthInstance = new Web3Auth({
clientId,
enableLogging: true,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.SOLANA,
chainId: “0x3”,
rpcTarget: rpcTarget,
},
web3AuthNetwork: “sapphire_devnet”,
uiConfig: {
primaryButton: “socialLogin”,
loginMethodsOrder: [“google”, “facebook”, “twitter”],
loginGridCol: 2,
},
}); const loginMethodsOrder = [“google”, “facebook”, “twitter”];
const index = loginMethodsOrder.indexOf(loginMethod);

if (index !== -1) {
  loginMethodsOrder.splice(index, 1);
  loginMethodsOrder.unshift(loginMethod);
}

try {
  const provider = await web3AuthInstance.connect();

  setProvider(provider);

@Ayush ?? cna you please check and let me know?

Hey, you can change the uxMode in the uiConifg. Please check the snippet below, also you haven’t shared any error and code snippet with uxMode redirect.

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider,
  uiConfig: {
    uxMode: UX_MODE.REDIRECT,
  }
});


this is the error coming to me

Which SDK version are you using?

@Ayush this is the version i am using 7.2.0

after updating to latest verison this is the issue coming
image
an d here is my basic initial setup"const privateKeyProvider = new SolanaPrivateKeyProvider({
config: { chainConfig: chainConfig },
});

const web3AuthInstance = new Web3Auth({
clientId,
enableLogging: true,
chainConfig: chainConfig,
web3AuthNetwork: “sapphire_devnet”,
uiConfig: {
primaryButton: “socialLogin”,
loginMethodsOrder: [“google”, “facebook”, “twitter”],
loginGridCol: 2,
uxMode: UX_MODE.REDIRECT,
},
privateKeyProvider: privateKeyProvider,
});

const web3AuthInstance = new Web3Auth({
  clientId,
  enableLogging: true,
  chainConfig: chainConfig,
  web3AuthNetwork: "sapphire_devnet",
  uiConfig: {
    primaryButton: "socialLogin",
    loginMethodsOrder: ["google", "facebook", "twitter"],
    loginGridCol: 2,
    uxMode: UX_MODE.REDIRECT,
  },
  privateKeyProvider: privateKeyProvider,
});  

const test = await web3AuthInstance.initModal(modalConfigurations);
console.log("🚀 ~ handleSignUp ~ test:", test);

await web3AuthInstance.connect();

const provider = await web3AuthInstance.connect();
console.log("🚀 ~ handleSignUp ~ provider:", provider);

setProvider(provider);

await getUserInfo(web3AuthInstance);

this is wat I am doing but logs not coming after connect now I can connect in spearte tab but the neither error is coming nor the logs coming after the connect function
@Ayush

Hey @muhammad.ahmed updating to latest version solved the issue, and I guess deleting node modules, and installing packages solved the other issue? What is the issue are you facing now? Do you mean, you are not able to connect, and move forward? Also, in the code snippet I can see you are connecting twice.

Can you please explain the issue, and if possible send screenshot, or recording.

@Ayush here is the screen recording

The issue is when I use uxmode.redirect it does not executed after connect line . and hence it don’t go to getuserInfo and not able to redirect to dashboard
but when I don’t use it works as it should be .
Also, when it doesn’t redirected to dashboard and falls back to signup page, and now I execute that function again it takes me to dashboard because it is already connected but why the issue is occuring

Below is the updated code
const handleSignUp = async (loginMethod) => {
const web3AuthInstance = new Web3Auth({
clientId,
enableLogging: true,
chainConfig,
web3AuthNetwork: “sapphire_devnet”,
uiConfig: {
primaryButton: “socialLogin”,
loginMethodsOrder: [“google”, “facebook”, “twitter”],
loginGridCol: 2,
uxMode: UX_MODE.REDIRECT,
},
privateKeyProvider,
});

const loginMethodsOrder = ["google", "facebook", "twitter"];
const index = loginMethodsOrder.indexOf(loginMethod);

if (index !== -1) {
  loginMethodsOrder.splice(index, 1);
  loginMethodsOrder.unshift(loginMethod);
}

try {
  await web3AuthInstance.initModal(modalConfigurations);
  const provider = await web3AuthInstance.connect();
  console.log("🚀 ~ handleSignUp ~ provider:", provider);

  setProvider(provider);

  await getUserInfo(web3AuthInstance);
} catch (error) {
  // await web3AuthInstance.initModal(modalConfigurations);
  // const provider = await web3AuthInstance.connect();
  // setProvider(provider);
  // await getUserInfo(web3AuthInstance);
}

};

@Ayush The issue when using uxmode.redirect it does not print anything after that
but when using normal it is working fine. what is the thing I am missing

Can you share the repo link if possible? Can you check the console if any errors are logged?

Actually repo is a private one can we connect on zoom or meet so I will show sharing my screen?

@Ayush



no errors even poping out

Have shared calendly link in DM, please schedule a call so we can go through code

Okay i have scheduled it. Hopefully you get it