Getting warning: possible unhandled promise rejection (id:1) TypeError: property is not writable

[muhammad.rameez]

• SDK Version: “^7.0.0”
• Platform: Windows and Android Emulator
• Browser Console Screenshots:

So I am using expo router react native app, I followed the tutorial to create the app. After succefful login i get the following console warning in my emulator screen:

possible unhandled promise rejection (id:1)
TypeError: property is not writable

the full stack trace of this warning is shown in below screenshot

I have a web3AuthConfig.ts which is responsible for initializing the web3Auth object its code is below:

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 "expo-web-browser";
import * as SecureStore from "expo-secure-store";

import Web3Auth, { OPENLOGIN_NETWORK, LOGIN_PROVIDER, ChainNamespace } from "@web3auth/react-native-sdk";
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';

const scheme = "com.falconstar.userapp";
const redirectUrl =
//@ts-ignore
  Constants.appOwnership == AppOwnership.Expo || Constants.appOwnership == AppOwnership.Guest
    ? Linking.createURL("home", {})
    : Linking.createURL("home", { scheme: `${scheme}` });

const clientId = process.env.EXPO_PUBLIC_WEB3AUTH_CLIENT_ID;

console.log("client I", process.env.EXPO_PUBLIC_WEB3AUTH_CLIENT_ID);

const chainConfig = {
  chainNamespace: ChainNamespace.EIP155,
  chainId: process.env.EXPO_PUBLIC_CHAIN_ID,
  rpcTarget: process.env.EXPO_PUBLIC_RPC_TARGET,
  displayName: process.env.EXPO_PUBLIC_DISPLAY_NAME,
  blockExplorerUrl: process.env.EXPO_PUBLIC_BLOCK_EXPLORER_URL,
  ticker: process.env.EXPO_PUBLIC_TICKER,
  tickerName: process.env.EXPO_PUBLIC_TICKER_NAME,
  decimals: Number(process.env.EXPO_PUBLIC_DECIMALS),
  logo: process.env.EXPO_PUBLIC_LOGO_URL,
};

const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig,
  },
});

let web3auth: Web3Auth | null = null;

async function initializeWeb3Auth() {
  if (!web3auth) {
    web3auth = new Web3Auth(WebBrowser, SecureStore, {
      clientId,
      network: OPENLOGIN_NETWORK.SAPPHIRE_DEVNET,
      redirectUrl,
      useCoreKitKey: true,
      enableLogging: true,
      loginConfig: {
        jwt: {
          verifier: process.env.EXPO_PUBLIC_VERIFIER_NAME,
          typeOfLogin: "jwt",
          clientId: process.env.EXPO_PUBLIC_AUTH0_CLIENT_ID,
        },
      },
    });

    await web3auth.init();

    if (web3auth.ready) {
      console.log("Web3Auth initialized successfully");
    } else {
      console.error("Web3Auth failed to initialize");
    }
  }
}

initializeWeb3Auth();

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 };
    }
    
    await web3auth.login({
      loginProvider: LOGIN_PROVIDER.JWT,
      mfaLevel: "none",
      extraLoginOptions: {
        domain: process.env.EXPO_PUBLIC_AUTH0_DOMAIN,
        verifierIdField: "sub",
      },
    });

    if (web3auth.privKey) {
      await ethereumPrivateKeyProvider.setupProvider(web3auth.privKey);
    }

  } catch (error: any) {
    console.error("Login failed with error:", error.message);
    console.error("Error details:", error);
    throw new Error("Login failed, please try again.");
  }
}

export async function logout(): Promise<void> {
  try {
    if (!web3auth) {
      throw new Error("Web3Auth not initialized");
    }
    
    await web3auth.logout();
  } catch (error) {
    console.error('Logout failed', error);
    throw new Error('Logout failed, please try again.');
  }
}

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");
  }
}

// Export the web3auth instance and the Ethereum provider
export { web3auth, ethereumPrivateKeyProvider };

the warning comes from HomeScreen.tsx as far as i can tell.
the code is below:

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { web3auth } from '../web3authConfig';
import HeaderWithToggle from '../components/HeaderWithToggle';

export default function HomeScreen() {
  const [userName, setUserName] = useState<any>(null);
  const [userEmail, setUserEmail] = useState<any>(null);
  const [userProfileImage, setUserProfileImage] = useState<any>(null);

  useEffect(() => {
    const fetchUserInfo = async () => {
      if (web3auth) {
        const userInfo = web3auth.userInfo();
        setUserName(userInfo?.name);
        setUserEmail(userInfo?.email);
        setUserProfileImage(userInfo?.profileImage);
      }
    };

    fetchUserInfo();
  }, []);

  return (
    <View style={styles.container}>
      <HeaderWithToggle screen="home" />
      <Text style={styles.title}>Welcome {userName}</Text>
      {userProfileImage && <Image source={{ uri: userProfileImage }} style={styles.profileImage} />}
      {userEmail && <Text style={styles.userInfo}>Email: {userEmail}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  profileImage: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  userInfo: {
    fontSize: 16,
    marginBottom: 20,
  },
});

can some one please let me know if this is some error with my setup ? or what i am doing wrong that i see the warning even after successful login

[w3abot]

Hi Rameez,

Thank you for sharing detailed information about the issue you’re facing with the Web3Auth PnP React Native SDK. From your message, it looks like you’ve encountered a possible unhandled promise rejection (id:1) TypeError: property is not writable warning.

Your Environment

• SDK Details: PnP React Native SDK
• SDK Version: ^7.0.0
• Platform: Windows and Android Emulator

Code Snippets

You have provided the following code snippets:

• web3AuthConfig.ts (Responsible for initializing the Web3Auth object)
• HomeScreen.tsx (Possibly the source of the warning)

It seems like the issue may be related to the handling of promises or assignment of properties in the HomeScreen.tsx file. Specifically, the assignment of user info properties in your fetchUserInfo function might be causing this warning.

Proposed Solution

1. Check if userInfo is an Async Function:
   Ensure that web3auth.userInfo() returns a promise or asynchronous result, which you handle properly with await.

2. Check Property Assignments:
   Ensure that properties like userName, userEmail, and userProfileImage are writable and do not conflict with any other state or props.

Try modifying the fetchUserInfo function with proper async/await handling as shown below:

useEffect(() => {
  const fetchUserInfo = async () => {
    if (web3auth) {
      try {
        const userInfo = await web3auth.userInfo();  // Use await here
        setUserName(userInfo?.name);
        setUserEmail(userInfo?.email);
        setUserProfileImage(userInfo?.profileImage);
      } catch (error) {
        console.error("Failed to fetch user info:", error);
      }
    }
  };

  fetchUserInfo();
}, []);

This ensures that the promise returned by web3auth.userInfo() is awaited and the userInfo object is properly resolved before accessing its properties.

If this does not resolve your issue, please check with a detailed log of which line exactly is causing the issue.

This response was generated by the Web3Auth Bot and a person from the Web3Auth team will come and give an answer to your query as well.

[yashovardhan]

Hey @muhammad.rameez

This use effect is only checking if the web3auth object is existing or not, and not checking whether it is connected. You can only get these details if the user is logged in at that point. You can check if web3auth.privKey is existing and then only assign values.

[chai]

This is fixed in the latest version of react native sdk 7.0.1.
Thanks for reporting