I am trying to integrate social login specifically Google, microsoft, Apple along with passwordless email login into my react native expo application. I created the Auth0 app on Auth0 dashboard and copied over my domain and client id into my web3auth expo app. When I click google on social login page i get the following errors:
app interface the “page does not exist” and in my app console i see:
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.
import React from "react";
import { Dimensions, ScrollView, StyleSheet, Text, View, TextInput } from "react-native";
import Constants, { AppOwnership } from "expo-constants";
import * as Linking from "expo-linking";
import "react-native-get-random-values";
import '@ethersproject/shims';
import "../globals";
// import * as WebBrowser from "@toruslabs/react-native-web-browser";
import * as WebBrowser from "expo-web-browser";
import * as SecureStore from "expo-secure-store";
// import EncryptedStorage from 'react-native-encrypted-storage';
import Web3Auth, { OPENLOGIN_NETWORK, LOGIN_PROVIDER, ChainNamespace } from "@web3auth/react-native-sdk";
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { ethers } from 'ethers';
const scheme = "userapp";
const redirectUrl =
//@ts-ignore
Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
? Linking.createURL("openlogin", {})
: Linking.createURL("openlogin", { scheme: `${scheme}` });
// Dashboard Registration
const clientId = 'myWeb3AuthClientId';
// SDK Initialization
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: '0xaa36a7',
rpcTarget: 'https://rpc.ankr.com/eth_sepolia',
displayName: 'Ethereum Sepolia Testnet',
blockExplorerUrl: 'https://sepolia.etherscan.io',
ticker: 'ETH',
tickerName: 'Ethereum',
decimals: 18,
logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
};
const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
config: {
chainConfig,
},
});
// Create a global web3auth instance
let web3auth: Web3Auth | null = null;
// Function to initialize Web3Auth
async function initializeWeb3Auth() {
if (!web3auth) {
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");
}
}
}
// Call the initialization function at app startup
initializeWeb3Auth();
// 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://dev-myAuth0DomainAddress.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.");
}
}
// Function to retrieve user details from SecureStore
export async function getUser(): Promise<string | null> {
try {
return await SecureStore.getItemAsync("user");
} catch (error) {
console.error("Failed to retrieve user data:", error);
throw new Error("Failed to retrieve user data.");
}
}
// Function to handle logout
export async function logout(): Promise<void> {
try {
if (!web3auth) {
throw new Error("Web3Auth not initialized");
}
await web3auth.logout();
await SecureStore.deleteItemAsync('user');
} catch (error) {
console.error('Logout failed', error);
throw new Error('Logout failed, please try again.');
}
}
// Function to handle email login
export async function loginWithEmail(email: string): Promise<void> {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailRegex.test(email)) {
await loginWithProvider('email_passwordless', email);
} else {
throw new Error("Invalid email format");
}
}
