Property 'Buffer' doesn't exist

[austinmilt]

I am following the bare React Native guide with the intention of using this with Solana.

I am getting the following error after the web3auth.login(...) call

Setup

Dependencies:

(These are the dependencies beyond typical react native ones) "@solana/web3.js": "^1.73.2", "@toruslabs/react-native-web-browser": "^1.1.0", "@web3auth/react-native-sdk": "^3.5.0", "@web3auth/solana-provider": "^4.6.0", "buffer": "^6.0.3",

Test Code

import { NavScreen, Navigation } from "../common/navigation";
import { Button } from "../components/Button";
import { View } from "../components/View";
import Web3Auth, { OPENLOGIN_NETWORK, LOGIN_PROVIDER, MFA_LEVELS, MfaLevelType } from "@web3auth/react-native-sdk";
import * as WebBrowser from '@toruslabs/react-native-web-browser';
import { useState } from "react";

const scheme = 'klasjdlfkjalskjd';
const resolvedRedirectUrl = `${scheme}://openlogin/`;
const clientId = "<CLIENT_ID>";

function Web3AuthButton(): JSX.Element {
    const [key, setKey] = useState<any>();
    const [userInfo, setUserInfo] = useState<any>("");

    const login = async () => {
        try {
            console.log("Logging in");
            const web3auth = new Web3Auth(WebBrowser, {
                clientId,
                network: OPENLOGIN_NETWORK.TESTNET,
            });

            console.log("Step 2", web3auth);
            // fails on this step
            const info = await web3auth.login({
                redirectUrl: resolvedRedirectUrl,
                mfaLevel: MFA_LEVELS.DEFAULT as MfaLevelType, // Pass on the mfa level of your choice: default, optional, mandatory, none
                loginProvider: LOGIN_PROVIDER.GOOGLE, // Pass on the login provider of your choice: google, facebook, discord, twitch, twitter, github, linkedin, apple, etc.
            });

            console.log("Step 3", info);
            setUserInfo(info);
            setKey(info.privKey);
            console.log("Logged In");
        } catch (e) {
            console.error(e, (e as Error).stack);
            throw e;
        }
    };

    const getChainId = async () => {
        console.log('Getting chain id');
        // const networkDetails = await RPC.getChainId();
        console.log("networkDetails");
    };

    const getAccounts = async () => {
        console.log('Getting account');
        // const address = await RPC.getAccounts(key);
        console.log("address");
    };

    const getBalance = async () => {
        console.log('Fetching balance');
        // const balance = await RPC.getBalance(key);
        console.log("balance");
    };

    const sendTransaction = async () => {
        console.log('Sending transaction');
        // const tx = await RPC.sendTransaction(key);
        console.log("tx");
    };

    const signMessage = async () => {
        console.log('Signing message');
        // const message = await RPC.signMessage(key);
        console.log("message");
    };

    const loggedInView = (
        <View>
            <Button.Primary title="Get User Info" onPress={() => console.log(userInfo)} />
            <Button.Primary title="Get Chain ID" onPress={() => getChainId()} />
            <Button.Primary title="Get Accounts" onPress={() => getAccounts()} />
            <Button.Primary title="Get Balance" onPress={() => getBalance()} />
            <Button.Primary title="Send Transaction" onPress={() => sendTransaction()} />
            <Button.Primary title="Sign Message" onPress={() => signMessage()} />
            <Button.Primary title="Get Private Key" onPress={() => console.log(key)} />
            <Button.Primary title="Log Out" onPress={() => setKey('')} />
        </View>
    );

    const unloggedInView = (
        <View>
            <Button.Primary title="Login with Web3Auth" onPress={login} />
        </View>
    );

    return (
        <View height={1}>
            {key ? loggedInView : unloggedInView}
        </View>
    );
}

[harshad-kathiriya]

@austinmilt you can try adding below lines and see if it works.

import { Buffer } from "buffer";

global.Buffer = global.Buffer || Buffer

[austinmilt]

That did the trick! It feels like a hack, but I can cross the road of doing it better later.

[austinmilt]

I see this is in the Ethereum tutorial. I skipped some of those steps given I am working on Solana. That's my mistake. It might be good to move that step into the non-Ethereum-specific code just to make it clear it's necessary for general use.