Issue 1
Hey Marhashi, thanks for the quick reply. Here’s my App.tsx. I’ve removed my clientId so it’s not shared publicly.
import React, { useState, useEffect } from "react";
import {
Button,
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";
// IMP START - Quick Start
import * as WebBrowser from "expo-web-browser";
import * as SecureStore from "expo-secure-store";
import Web3Auth, {
WEB3AUTH_NETWORK,
LOGIN_PROVIDER,
ChainNamespace,
} from "@web3auth/react-native-sdk";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
// IMP END - Quick Start
import { ethers } from "ethers";
import { ACCESS_TOKEN_KEY } from "@/constants/constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
// IMP START - Whitelist bundle ID
const redirectUrl =
//@ts-ignore
Constants.appOwnership == AppOwnership.Expo ||
Constants.appOwnership == AppOwnership.Guest
? Linking.createURL(“web3auth”, {})
: Linking.createURL(“web3auth”, { scheme: “web3authexpoexample” });
// IMP END - Whitelist bundle ID
// IMP START - Dashboard Registration
const clientId = “”; // get from https://dashboard.web3auth.io
// IMP END - Dashboard Registration
// IMP START - SDK Initialization
const chainConfig = {
chainNamespace: ChainNamespace.EIP155,
chainId: “0xaa36a7”,
rpcTarget: “https://1rpc.io/sepolia”,
// Avoid using public rpcTarget in production.
// Use services like Infura, Quicknode etc
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,
},
});
const web3auth = new Web3Auth(WebBrowser, SecureStore, {
clientId,
// IMP START - Whitelist bundle ID
redirectUrl,
// IMP END - Whitelist bundle ID
network: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // or other networks
privateKeyProvider: ethereumPrivateKeyProvider,
loginConfig: {
jwt: {
verifier: “talon-local”, // from Dashboard
typeOfLogin: “jwt”,
clientId: clientId,
},
},
});
// IMP END - SDK Initialization
export default function App() {
const [loggedIn, setLoggedIn] = useState(false);
const [provider, setProvider] = useState<any>(null);
const [console, setConsole] = useState<string>(“”);
const [email, setEmail] = useState<string>(“”);
useEffect(() => {
const init = async () => {
// IMP START - SDK Initialization
await web3auth.init();
if (web3auth.connected) {
// IMP END - SDK Initialization
setProvider(ethereumPrivateKeyProvider);
setLoggedIn(true);
}
};
init();
}, );
const login = async () => {
const accessToken = await AsyncStorage.getItem(ACCESS_TOKEN_KEY);
try {
if (!web3auth.ready) {
setConsole(“Web3auth not initialized”);
return;
}
if (!email) {
setConsole(“Enter email first”);
return;
}
setConsole("Logging in");
// IMP START - Login - ERROR HERE
await web3auth.login({
loginProvider: LOGIN_PROVIDER.JWT,
extraLoginOptions: {
id_token: accessToken,
verifier: "uuid",
},
});
if (web3auth.connected) {
// IMP END - Login
setProvider(ethereumPrivateKeyProvider);
uiConsole("Logged In");
setLoggedIn(true);
}
} catch (e: any) {
setConsole(e.message);
}
};
…
// Other unrelevant code
Issue 2 - Custom JWT login
Sure, but I can’t tell if it’s working or not - login is still stuck at globa.base64FromArrayBuffer is not a function (it is undefined)
Content from Web3Auth Community
, what do you think?