[Archive] Getting stuck while redirect from webbrowser to app in react native app

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by vikas.kumar on 4/9/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.

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

  • SDK Version5.1.0

  • **Platform-React Native 0.73.6:

  • Browser Console Screenshots:

  • If the issue is related to Custom Authentication, please include the following information (optional):

    • Verifier Name:Torus
    • JWKS Endpoint:
    • Sample idToken (JWT):

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

ERR CODE :-[

  {
    "errorMsg": "Redirect Result Error",
    "errorStack": "This page has been reloaded and should not be. Please start the login process again.",
    "title": "displayError from custom auth error handler",
    "createdAt": "4/9/2024, 4:06:17 PM",
    "info": {
      "customAuthState": {
        "client": "BFRkKr4H5e4if4t3H2I-xMho2z1h2MMrj3xE7OLipeT1BIkSUMGkhXboCVmh3OjmVO-TsdKIlVc8-DJS9AB_Sf4",
        "currentLoginProvider": "google",
        "popupWindow": "false",
        "whiteLabel": "{}",
        "keyMode": "v1",
        "isCustomVerifier": "false",
        "socialFactorFlow": "",
        "loginId": "f124d97dbba682743c989cc686660fd8dad093d1e874aad168861dd4e61cfe5b",
        "sessionNamespace": "",
        "version": "6",
        "instanceId": "po6ec59cfud",
        "verifier": "torus",
        "typeOfLogin": "google",
        "redirectToOpener": false
      },
      "customAuthError": "Unsupported method type",
      "customAuthHashParams": {
        "state": "eyJjbGllbnQiOiJCRlJrS3I0SDVlNGlmNHQzSDJJLXhNaG8yejFoMk1NcmozeEU3T0xpcGVUMUJJa1NVTUdraFhib0NWbWgzT2ptVk8tVHNkS0lsVmM4LURKUzlBQl9TZjQiLCJjdXJyZW50TG9naW5Qcm92aWRlciI6Imdvb2dsZSIsInBvcHVwV2luZG93IjoiZmFsc2UiLCJ3aGl0ZUxhYmVsIjoie30iLCJrZXlNb2RlIjoidjEiLCJpc0N1c3RvbVZlcmlmaWVyIjoiZmFsc2UiLCJzb2NpYWxGYWN0b3JGbG93IjoiIiwibG9naW5JZCI6ImYxMjRkOTdkYmJhNjgyNzQzYzk4OWNjNjg2NjYwZmQ4ZGFkMDkzZDFlODc0YWFkMTY4ODYxZGQ0ZTYxY2ZlNWIiLCJzZXNzaW9uTmFtZXNwYWNlIjoiIiwidmVyc2lvbiI6IjYiLCJpbnN0YW5jZUlkIjoicG82ZWM1OWNmdWQiLCJ2ZXJpZmllciI6InRvcnVzIiwidHlwZU9mTG9naW4iOiJnb29nbGUiLCJyZWRpcmVjdFRvT3BlbmVyIjpmYWxzZX0",
        "access_token": "ya29.a0Ad52N3-3wCJpHWBh1Z1xQwG4tZVyGS62aJzEXZ05JEEY04Y1i5coZzeuihW4uhUbxGU71qxw7BmfyiysuEk9hNvnHG2oueCDIfz-QxclGhidqLe5i6WKqTGxuaH41j2Vu_7ksow7QE0DV7dL17j_yuddERWW7_x4rwaCgYKAQMSARISFQHGX2Mi7XRdMfmfCIxNqZZ-UeinZA0169",
        "token_type": "Bearer",
        "expires_in": "3599",
        "scope": "email%20profile%20https://www.googleapis.com/auth/userinfo.profile%20openid%20https://www.googleapis.com/auth/userinfo.email",
        "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjkzYjQ5NTE2MmFmMGM4N2NjN2E1MTY4NjI5NDA5NzA0MGRhZjNiNDMiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiIyMjE4OTg2MDk3MDktb2JmbjNwNjM3NDFsNTMzMzA5MzQzMGozcWVpaW5hYTguYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiIyMjE4OTg2MDk3MDktb2JmbjNwNjM3NDFsNTMzMzA5MzQzMGozcWVpaW5hYTguYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMTY4MDczMjA1Nzg1MjA1MzEzMzMiLCJoZCI6ImFudGllcnNvbHV0aW9ucy5jb20iLCJlbWFpbCI6InZpa2FzLmt1bWFyQGFudGllcnNvbHV0aW9ucy5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXRfaGFzaCI6Ikp3U1V0N21icFM3LTVtMzU2MXp3RlEiLCJub25jZSI6InBvNmVjNTljZnVkIiwibmJmIjoxNzEyNjU4Njc3LCJuYW1lIjoiVmlrYXMgQVRSNDU3IiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hL0FDZzhvY0pURHUxOUhod1hEWDhxbFFSeWROUmVvTWF2YnJHN0hMUTQ2OExoTFRlM011TjJqbWc9czk2LWMiLCJnaXZlbl9uYW1lIjoiVmlrYXMiLCJmYW1pbHlfbmFtZSI6IkFUUjQ1NyIsImlhdCI6MTcxMjY1ODk3NywiZXhwIjoxNzEyNjYyNTc3LCJqdGkiOiIyNjQzNTI4ZDcxNWZmNDRjMDgxYjgzNmNhZDE1YWU0MDVmODQwZmIyIn0.RrpZ49ucDdU746jHFsrnAJP2IZJZrC6ojIPQ7QQcZsPZ8wh_KH0DsHEooAmvvOyp_JT5YVAdDyTwes9f8kTgpEXVZvxDkuC2RRxfcLGnfnovmJYobrRaoorK0XTs8qdHCsyP3fITHzx62-scrU4Vwxj0mxSYgRZjCkpwmfRycsdyKB5_Yjn9gFe_i8n0KokTv4GGrDfAkY4FrASBZZF3XVWR2aRn3sfB-28TN1-eaFiYnTvFWOszCQRkHgUvtYN9Gw1soADW3lLgK7zBNmOtO7nckG6vAQEqqI4KUxGgkkk9rF7S2e8Cf_PRzg2atI6mpvkQ60Lq5yW4JUo1zdRGew",
        "authuser": "0",
        "hd": "antiersolutions.com",
        "prompt": "consent",
        "version_info": "CmxfU1ZJX0VNLWdnUEQzdElVREdCQWlQMDFCUlVSSVpsOXhTVzR4TmxvMmVsOTRTRUZHUVhabE5FWTJORmt4YmtwaFlUTnZNV05ZVjJwTGFsbFdUMU5qU2trNVFUaEdWMWxNYzJ0V1IxOTJad18"
      }
    }
  }
]

REACT NATIVE CODE:-


import React, { useEffect } from 'react';
import { View, Button, StyleSheet, Alert } from 'react-native';
import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK } from '@web3auth/react-native-sdk';
import * as WebBrowser from '@toruslabs/react-native-web-browser';
import EncryptedStorage from 'react-native-encrypted-storage';

const App = () => {

const clientId = ‘BFRkKr4H5e4if4t3H2I-xMho2z1h2MMrj3xE7OLipeT1BIkSUMGkhXboCVmh3OjmVO-TsdKIlVc8-DJS9AB_Sf4’;

const WEB3_LOGIN_REDIRECT_URL = ‘com.dabbler.app://auth’;


const auth = new Web3Auth(WebBrowser, EncryptedStorage, {

clientId:clientId,

network: OPENLOGIN_NETWORK.TESTNET,

});


useEffect(() => {

const initializing = async () => {

try {

await auth.init();

if (auth) {

console.log(‘SDK initialization Success’);


    } else {
      console.error('SDK initialization failed.');
    }
  } catch (error) {
    console.error('Error initializing SDK:', error);
  }
};
initializing();



}, );


const handleLogin = async () => {

try {

await auth.login({

loginProvider: LOGIN_PROVIDER.GOOGLE,

redirectUrl: WEB3_LOGIN_REDIRECT_URL,

curve: “secp256k1”,

});

Alert.alert(‘Success’, ‘Logged in successfully!’);

} catch (e) {

console.error(‘Login error:’, e);

Alert.alert(‘Error’, ‘Failed to log in. Please try again.’);

}

};


return (

<View style={styles.container}>

<Button title=“LOGIN WEB3 #” onPress={handleLogin}  />

</View>

);

};


const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#d3d3d3d3’,

},

});


export default App;

Screenshot 1946-01-20 at 4.37.58 PM
Screenshot 1946-01-20 at 4.37.58 PM275×600 15 KB

2

Hi @vikas.kumar ,

I’m currently investigating the problem you’ve reported and aim to get back to you with a solution promptly. I appreciate your patience.

Thanks

3

Hey @vikas.kumar,

I see you’re encountering an issue with the redirection process after login. Given that you have a valid idToken, it suggests that the authentication with your login provider was successful. Among the various parameters you’ve mentioned, I’m particularly interested in the redirect URL. Could you confirm if this URL is indeed the one you intend for the browser to navigate to after login? This detail will help us better understand and address the issue you’re facing.
And do you face the same issue if you don’t send the redirectUrl parameter or just comment it out temporarily?

4

Even I’m having the same issue of got stuck in loading screen?

Can you give the solution soon?

I have noticed this happens only in android not in ios.

WhatsApp Image 2024-05-18 at 12.04.25 PM
WhatsApp Image 2024-05-18 at 12.04.25 PM769×1600 17.7 KB

5

Getting the same issue on flutter sdk.
What’s going on?

6

Hey @maseh, can you please create a separate issue with relevant information of the Web3Auth configuration so I can help you.

7

If it is helpful for someone, for some reason I had this issue, and after lots of tests, I figure out the scheme name can not contain Uppercase on it, so the solution was to change 2 letters I had on uppercase on the scheme name.

8

Please check the android configs, have you made the changes in the android manifest xml