I am trying to integrate social login into my expo react native app. I created Auth0 tenant and added Web3Auth to allowed call back urls in Auth0. I added the required configurations as shown in the tutorials to my app. However, when i click google icon to login using google i only see a blank screen on the emulator. On the address of the screen i first see the address Web3Auth which then changes to my Auth0 domain. However, in the app i only ever see black screen as shown in the below screen shots
Can any one please help me fix the issue ?
Hey @muhammad.rameez as I see this issue, I think this is rather a browser issue on your end. Since you are getting redirected to Auth0 via Web3Auth, we can assume that the SDK is giving your the correct redirections.
I figured out the issue, your hint along with a google search on auth0 blank screens lead me to the following stack overflow page:
it turns out if your using API33 or older (mine us API 34) there might be a problem with the default chorme browser. I disabled my chrome browser and installed firefox from play store and used that as my default browser and the redirect pages rendered as expected.
If any one else is facing similar issues, try lowering your emulator api level or using firefox or other browsers if on latest anroid API.
after solving the first issue I am running into another issue, after clicking my google account on auth0 login it asks me redirect back to the app which i click yes to. When I am redirected I get the following error in the app interface the “page does not exist” and in my app console i see
Attempting login with provider: google
LOG Login status: undefined
ERROR Login failed with error: Invalid value provided to SecureStore. Values must be strings; consider JSON-encoding your values if they are serializable.
Here is my code snippet:
async function initializeWeb3Auth() {
if (!web3auth) {
// web3auth = new Web3Auth(WebBrowser, SecureStore, {
// clientId,
// redirectUrl,
// network: OPENLOGIN_NETWORK.SAPPHIRE_DEVNET,
// });
web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
network: OPENLOGIN_NETWORK.SAPPHIRE_DEVNET, // or other networks
redirectUrl,
useCoreKitKey: true,
loginConfig: {
jwt: {
verifier: "falconstar-userapp-google",
typeOfLogin: "jwt",
clientId: "myauth0ClientID",
},
},
});
await web3auth.init();
if (web3auth.ready) {
console.log("Web3Auth initialized successfully");
} else {
console.error("Web3Auth failed to initialize");
}
}
}
// Function to handle login with different providers or email
export async function loginWithProvider(provider: string, email?: string): Promise<void> {
if (!web3auth) {
throw new Error("Web3Auth not initialized");
}
try {
console.log(`Attempting login with provider: ${provider}`);
const loginOptions: any = { loginProvider: provider };
if (provider === 'email_passwordless' && email) {
loginOptions.extraParams = { login_hint: email };
}
// Trigger the login process
// const loginResponse = await web3auth.login(loginOptions);
const loginResponse = await web3auth.login({
loginProvider: LOGIN_PROVIDER.JWT,
mfaLevel: "none",
extraLoginOptions: {
domain: "https://myauth0domain-eu.auth0.com",
verifierIdField: "sub",
},
});
// Optionally, handle the login response as needed
console.log("Login status:", loginResponse);
// Save login details securely on the device
await SecureStore.setItemAsync("user", JSON.stringify(loginResponse));
} catch (error: any) {
console.error("Login failed with error:", error.message);
console.error("Error details:", error);
throw new Error("Login failed, please try again.");
}
}
before i see the error on ui and on console I see the following screen for a few seconds:
Additionally, please create a new issue for this, since it will be easier for the team to manage it properly. There is a chance that since this is a resolved topic, it might not show up in our notifications.
