Social Sign-In Issue: "could not validate redirect" Error with New Client ID

[shayanvrinsoft]

Issue Summary

I am experiencing issues with social sign-in using Web3Auth in my project. The same codebase worked fine previously, but now, after updating the domain and Web3Auth account with a new client ID, I encounter an error that says:

"There seems to be some bug in the code. Please contact support to fix this. could not validate redirect, please whitelist your domain: https://signsafe.io for provided clientId BDNbhmvnlm1Sgnrts8iIkyEjFv1j7thhWTAkYG8gAAcQV_WnYdoreVUOah4OJfUzPTxdhB2yd8gln-edSQITjW4 at https://dashboard.web3auth.io. Also, this project is on cyan network. Please ensure the the used Client ID belongs to this network."

Project Details

• SDK Version (package.json):
  json

{
  "@web3auth/base": "^3.3.0",
  "@web3auth/modal": "^6.1.7",
  "@web3auth/openlogin-adapter": "^6.1.7",
  "@web3auth/web3auth": "^2.1.3",
  "@walletconnect/sign-client": "^2.10.1",
  "react": "^18.2.0",
  "@types/node": "^16.11.38"
}

• Platform:
  • Frontend: React 18.2.0
• Browser Console Screenshots: (Attach relevant screenshots showing the error and your configuration)
  
  

Web3Auth Initialization and Login Code Snippet

javascript

import { useEffect, useState } from 'react';
import { Web3Auth } from '@web3auth/web3auth';
import { CHAIN_NAMESPACES } from '@web3auth/base';

const clientId = 'BDNbhmvnlm1Sgnrts8iIkyEjFv1j7thhWTAkYG8gAAcQV_WnYdoreVUOah4OJfUzPTxdhB2yd8gln-edSQITjW4';

const MyComponent = () => {
  const [web3auth, setWeb3auth] = useState(null);
  const [provider, setProvider] = useState(null);

  useEffect(() => {
    const init = async () => {
      try {
        const web3auth = new Web3Auth({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: '0x13881',
            rpcTarget: 'https://polygon-mumbai.api.onfinality.io/public',
          },
          web3AuthNetwork: 'cyan',
        });

        setWeb3auth(web3auth);
        await web3auth.initModal();
        setProvider(web3auth.provider);
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

  return (
    <div>
      {/* UI components */}
    </div>
  );
};

export default MyComponent;

Description of the Issue

I have integrated Web3Auth into my project and it was working fine with the previous configuration. However, after switching to a new domain and client ID, I am facing issues with the social sign-in feature. The error message suggests that my domain is not whitelisted, even though I have already whitelisted the domain https://signsafe.io with and without a slash at the end.

Steps Taken

1. Whitelisted the domain https://signsafe.io on the Web3Auth dashboard.
2. Verified that the client ID is correct and belongs to the cyan network.
3. Ensured the sign-in with Metamask is working fine.

Current Error

"There seems to be some bug in the code. Please contact support to fix this. could not validate redirect, please whitelist your domain: https://signsafe.io for provided clientId BDNbhmvnlm1Sgnrts8iIkyEjFv1j7thhWTAkYG8gAAcQV_WnYdoreVUOah4OJfUzPTxdhB2yd8gln-edSQITjW4 at https://dashboard.web3auth.io. Also, this project is on cyan network. Please ensure the the used Client ID belongs to this network."

Additional Information

I have been trying to resolve this issue for about a month now but have not received adequate support. The repetitive suggestions to whitelist the domain and check the client ID have not been helpful.

Request for Support

Please provide guidance on resolving this issue as soon as possible. If there is any additional configuration required or if there are any changes on the Web3Auth platform that I need to be aware of, kindly inform me.

Additionally, I would like to request a call with your developer or support team to discuss this issue in detail. It is important for us to solve this as soon as possible.

Thank you for your assistance.

[maharshi]

Hey @shayanvrinsoft,
Welcome aboard!
Can you please share a screenshot of the Web3Auth dashboard where it shows you’ve whitelisted the said domain and shows the client id of the project as well?

[shayanvrinsoft]

Sure @maharshi , below is the requested data,

And this is our Live Url

eSign Doc

[maharshi]

Hey @shayanvrinsoft
Here I see you’ve whitelisted the uRL properly. But if you look carefully, you’ll see the environment is sapphire_devnet on the dashboard while in your app you’ve mentioned it as cyan. Swap that and I think your app would work as expected.
While you’re at it, please update the SDKs to the latest version. Let me know if you face any hurdles.

[shayanvrinsoft]

I cant use sapphire_devnet because I am using older version which is compatible with my code, I tried using testnet but didn’t succeed

[shayanvrinsoft]

Hello @maharshi ,

I just wanted to let you know that the issue has been resolved. Thank you so much for your prompt attention and assistance. Here’s how the issue was resolved for me:

I am currently using an older version of the Web3Auth library and cannot update it to the latest version due to other dependencies. Initially, about a year ago, I was using the testnet, which might be deprecated soon. Now, we have a new option called sapphire_devnet.

Here’s the catch: the old version of Web3Auth only works with the testnet. After switching the environment back to testnet, everything started working as expected.

Conclusion: If you have an old codebase and cannot update the dependencies, make sure to choose the testnet environment. This worked well for me.