Redirect error when attempting to log in to LINE

Help - Plug n Play PnP React Native SDK
, ,
1

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

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.

2

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!

3

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.

4

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

스크린샷 2024-09-04 오후 6.45.03
스크린샷 2024-09-04 오후 6.45.03669×802 78.8 KB

5

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?

6

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',
      },
    });

1
1665×1440 99.5 KB