Redirect error when attempting to log in to LINE

[develop]

When asking for help in this category, please make sure to provide the following details:

• SDK Version: 0.74
• Platform: react native
• Browser Console Screenshots:
  
  
  
  
  
  
  
  
  
  
  

hey, I’m working on integrating LINE login using Auth0 in a React Native app. When users choose to authenticate through the LINE app without entering their details on the web app, it seems like the redirect isn’t working properly, as shown in the screenshot. Can you help me figure out what settings I need to adjust?

thank you.

[w3abot]

Hey 체인위드-dev,

Thanks for providing the details! Let’s summarize your issue for the support team:

Issue Summary:

• Platform: React Native
• SDK Details: Web3Auth PnP React Native SDK
• SDK Version: 0.74
• Issue: Redirect error when attempting to log in using LINE through Auth0 in a React Native app.
• Details: The redirect isn’t working properly when users authenticate through the LINE app without entering their details on the web app.

Screenshots provided:

• 
• 
• 
• 

Could you also provide:

• Web3Auth Initialization & Login Code Snippets: This will help us understand if the issue might be with the configuration.
• Verifier Name: Needed if the issue is related to custom authentication.
• Method of Login: Which steps the users are following when attempting to log in.

This information will help the support team to investigate the issue more effectively.

I’ll ensure this gets to the right team and they will be able to provide further assistance.

This response was generated by the Web3Auth Bot. A person from the Web3Auth team will respond to your query soon. Thanks for your patience!

[maharshi]

Hey @develop,

I understand you’re encountering an issue with LINE login in React Native. The version you shared is for the React Native package. It would be helpful if you could also share the version of the PnP React Native SDK you’re using. Additionally, please post your code snippets so I can better assist you.

[develop]

Thank you for your response.
As you requested, I am sharing the code for Web3Auth Initialization along with the version and screenshots.
If you need any additional information, please let me know.

react-native: 0.74.1
@web3auth/react-native-sdk: 6.0.0

[maharshi]

Hi @develop,

In this example here, the loginConfig object is correctly sent to the openLoginAdapter, and this is the same loginConfig you should use in your case. I’m a bit confused as to why you’re sending a kakaoCustom object inside the loginConfig—do our SDK references indicate that such an object is accepted?

[develop]

Hello, @maharshi

I apologize for any confusion caused by the code.
I’ve removed unnecessary parts and included only the relevant sections for clarity.
What I need help with is the LINE login integration. I’ve adjusted some settings and reconfigured them.
The code is written as shown, but I’m encountering the error displayed in the attached screenshot.

Could you guide me on what might be causing this issue and how to resolve it?
If there’s any additional information needed to troubleshoot, please let me know.

Thank you!

// index.ts

  const scheme = 'chainwithdev'; // Or your desired app redirection scheme
  const redirectUrl = `${scheme}://openlogin`;

  const chainConfig = {
    chainNamespace: ChainNamespace.EIP155,
    chainId: '0xaa36a7',
    displayName: web3AuthConfig?.displayName,
    rpcTarget: 'https://rpc.ankr.com/eth_sepolia',
    blockExplorerUrl: 'https://sepolia.etherscan.io',
    ticker: 'ETH',
    tickerName: 'Ethereum',
    decimals: 18,
    logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
  };

  const initWeb3Auth = async () => {
    try {
      const ethereumPrivateKeyProviderInstance = new EthereumPrivateKeyProvider(
        {
          config: {
            chainConfig,
          },
        },
      );

      const web3authInstance = new Web3Auth(WebBrowser, EncryptedStorage, {
        clientId: web3AuthConfig.clientId,
        redirectUrl,
        network: web3AuthConfig.network,
      });

      await web3authInstance.init();

      if (web3authInstance.privKey) {
        await ethereumPrivateKeyProviderInstance.setupProvider(
          web3authInstance.privKey,
        );

        setProvider(ethereumPrivateKeyProviderInstance);
      }

      setEthereumPrivateKeyProvider(ethereumPrivateKeyProviderInstance);
      setWeb3Auth(web3authInstance);
    } catch (error) {
      console.error('Error initializing Web3Auth:', error);
    }
  };



// index.utils.ts

  try {
    if (!web3auth.ready) {
      console.log('Web3Auth is not ready:', web3auth);
      return;
    }
    await web3auth.login({
      loginProvider: LOGIN_PROVIDER.LINE,

      extraLoginOptions: {
        client_id: 'VDKl8JCM6WeqIV0HuFl8Z1BovWJbRSCY',
        connection: 'line',
        domain: 'https://dev-31zum6u30mrudlmz.us.auth0.com',
        verifierIdField: 'sub',
      },
    });

[maharshi]

Hey @develop,

Are you implementing LINE login using Auth0? Could you please share a screenshot of the Auth0 dashboard that shows the verifier being used in this setup?
Meanwhile I will close your newer thread, as we can continue our conversation here.

[develop]

Thank you for your response. @maharshi

I’m sharing the Auth0 dashboard settings here.
The Allowed Callback URLs are configured as follows:

• https://auth.web3auth.io/auth
• https://dev-31zum6u30mrudlmz.us.auth0.com/login/callback
• com.xxx.xxx.auth0://dev-31zum6u30mrudlmz.us.auth0.com/ios/com.xxx.xxx/callback
• com.xxx.xxx.auth0://dev-31zum6u30mrudlmz.us.auth0.com/android/com.xxx.xxx/callback

If you need any additional information, please let me know.

Thank you!

[maharshi]

Can you please also share the Web3Auth dashboard where you’ve created a verifier with these configs?

[develop]

Here is the information I’m sharing: @maharshi

[maharshi]

Hey @develop,
Many thanks for sharing the screenshots!
From the Web3Auth dashboard, it appears you’ve set up an aggregate verifier configuration. However, I don’t see this reflected in your code. Specifically, your code seems to be missing a loginConfig that includes the aggregate verifier and its sub-verifiers within the Web3Auth instance initialization.

Here’s an example configuration for reference:

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId,
  network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // or other networks
  redirectUrl,
  useCoreKitKey: true,
  loginConfig: {
    google: {
      verifier: "aggregate-sapphire",
      verifierSubIdentifier: "w3a-google",
      typeOfLogin: "google",
      clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com",
    },
    auth0emailpasswordless: {
      verifier: "aggregate-sapphire",
      verifierSubIdentifier: "w3a-a0-email-passwordless",
      typeOfLogin: "jwt",
      clientId: "QiEf8qZ9IoasbZsbHvjKZku4LdnRC1Ct",
      jwtParameters: {
        domain: "https://web3auth.au.auth0.com",
        verifierIdField: "email", // Field in JWT used to identify users uniquely
        isVerifierIdCaseSensitive: false,
      },
    },
    auth0github: {
      verifier: "aggregate-sapphire",
      verifierSubIdentifier: "w3a-a0-github",
      typeOfLogin: "jwt",
      clientId: "hiLqaop0amgzCC0AXo4w0rrG9abuJTdu",
      jwtParameters: {
        domain: "https://web3auth.au.auth0.com",
        verifierIdField: "email", // Maps email IDs across logins
        isVerifierIdCaseSensitive: false,
      },
    },
  },
});

This configuration ensures that the aggregate verifier and its sub-verifiers are set up correctly.

You can also reference a working example from our repository:
React Native Bare Aggregate Verifier Example

[develop]

Hey, @maharshi

I modified the code based on the guidance you provided, and the issue has been resolved.

Thank you so much!