From b12478aab28565b8b40d27f4d69c89d3db2dbb5b Mon Sep 17 00:00:00 2001 From: Yashovardhan Agrawal Date: Thu, 26 Oct 2023 00:12:20 +0530 Subject: [PATCH] Update sfa rn apps --- .../sfa-rn-bare-quick-start/App.tsx | 2 - .../sfa-rn-bare-quick-start/package-lock.json | 11 +- .../sfa-rn-bare-quick-start/package.json | 1 + .../sfa-rn-expo-auth0-example/App.tsx | 177 +- .../sfa-rn-expo-auth0-example/app.json | 2 +- .../sfa-rn-expo-auth0-example/babel.config.js | 8 + .../sfa-rn-expo-auth0-example/ethersRPC.ts | 85 - .../sfa-rn-expo-auth0-example/ios/Podfile | 5 + .../ios/Podfile.lock | 2 +- .../package-lock.json | 1522 ++++++----------- .../sfa-rn-expo-auth0-example/package.json | 7 +- 11 files changed, 614 insertions(+), 1208 deletions(-) delete mode 100644 single-factor-auth-react-native/sfa-rn-expo-auth0-example/ethersRPC.ts diff --git a/single-factor-auth-react-native/sfa-rn-bare-quick-start/App.tsx b/single-factor-auth-react-native/sfa-rn-bare-quick-start/App.tsx index c29698a6..40ae7630 100644 --- a/single-factor-auth-react-native/sfa-rn-bare-quick-start/App.tsx +++ b/single-factor-auth-react-native/sfa-rn-bare-quick-start/App.tsx @@ -11,7 +11,6 @@ import { } from 'react-native'; import auth from '@react-native-firebase/auth'; import EncryptedStorage from 'react-native-encrypted-storage'; -// @ts-ignore import {decode as atob} from 'base-64'; import {IProvider} from '@web3auth/base'; @@ -48,7 +47,6 @@ const chainConfig = { const web3auth = new Web3Auth(EncryptedStorage, { clientId, // Get your Client ID from Web3Auth Dashboard web3AuthNetwork: 'sapphire_mainnet', - usePnPKey: false, // By default, this sdk returns CoreKitKey }); const privateKeyProvider = new EthereumPrivateKeyProvider({ diff --git a/single-factor-auth-react-native/sfa-rn-bare-quick-start/package-lock.json b/single-factor-auth-react-native/sfa-rn-bare-quick-start/package-lock.json index af8f13ea..704f9603 100644 --- a/single-factor-auth-react-native/sfa-rn-bare-quick-start/package-lock.json +++ b/single-factor-auth-react-native/sfa-rn-bare-quick-start/package-lock.json @@ -1,11 +1,11 @@ { - "name": "web3authsfafirebase", + "name": "sfa-rn-bare-quick-start", "version": "0.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "web3authsfafirebase", + "name": "sfa-rn-bare-quick-start", "version": "0.0.1", "dependencies": { "@ethersproject/shims": "^5.7.0", @@ -26,6 +26,7 @@ "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.7", "@tsconfig/react-native": "^3.0.0", + "@types/base-64": "^1.0.1", "@types/metro-config": "^0.76.3", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", @@ -5975,6 +5976,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/base-64": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.1.tgz", + "integrity": "sha512-syGYQWNlO2yyGJjyP9i3eZeHZN+QS3V11EnsVwCiYgOQXMmQNAIgVpFsZ146R+o3l9ltB+KEVKsPW8RCyq2EAw==", + "dev": true + }, "node_modules/@types/bn.js": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.3.tgz", diff --git a/single-factor-auth-react-native/sfa-rn-bare-quick-start/package.json b/single-factor-auth-react-native/sfa-rn-bare-quick-start/package.json index 6e3453c1..88cfbc7b 100644 --- a/single-factor-auth-react-native/sfa-rn-bare-quick-start/package.json +++ b/single-factor-auth-react-native/sfa-rn-bare-quick-start/package.json @@ -28,6 +28,7 @@ "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.7", "@tsconfig/react-native": "^3.0.0", + "@types/base-64": "^1.0.1", "@types/metro-config": "^0.76.3", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", diff --git a/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx b/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx index edb48f36..eb176e26 100644 --- a/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx +++ b/single-factor-auth-react-native/sfa-rn-expo-auth0-example/App.tsx @@ -1,7 +1,5 @@ -/* eslint-disable @typescript-eslint/no-use-before-define */ -/* eslint-disable @typescript-eslint/ban-ts-comment */ +import '@ethersproject/shims'; import { decode as atob } from "base-64"; -// @ts-ignore import React, {useEffect, useState} from 'react'; import { Button, @@ -12,56 +10,54 @@ import { Dimensions, ActivityIndicator, } from 'react-native'; -import RPC from './ethersRPC'; // for using ethers.js +import {IProvider} from '@web3auth/base'; import Web3Auth from '@web3auth/single-factor-auth-react-native'; import {EthereumPrivateKeyProvider} from '@web3auth/ethereum-provider'; import * as SecureStore from "expo-secure-store"; import { Auth0Provider, useAuth0 } from "react-native-auth0"; +import {ethers} from 'ethers'; + +const clientId = + 'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ'; // get from https://dashboard.web3auth.io + +const verifier = 'w3a-auth0-demo'; + +const chainConfig = { + chainId: '0x1', // Please use 0x1 for Mainnet + rpcTarget: 'https://rpc.ankr.com/eth', + displayName: 'Ethereum Mainnet', + blockExplorer: 'https://etherscan.io/', + ticker: 'ETH', + tickerName: 'Ethereum', +}; + +const web3auth = new Web3Auth(SecureStore, { + clientId, + web3AuthNetwork: 'sapphire_mainnet', + usePnPKey: false, // By default, this sdk returns CoreKitKey +}); + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: {chainConfig}, +}); const Home = () => { - const [privateKey, setPrivateKey] = useState(); + const [provider, setProvider] = useState(null); + const [loggedIn, setLoggedIn] = useState(false); const [loading, setLoading] = useState(false); const [userInfo, setUserInfo] = useState(''); const [consoleUI, setConsoleUI] = useState(''); - const [web3auth, setWeb3Auth] = useState(null); useEffect(() => { async function init() { try { - const authProvider = new Web3Auth(SecureStore, { - clientId: - 'BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk', // Get your Client ID from Web3Auth Dashboard - web3AuthNetwork: 'cyan', - usePnPKey: false, // By default, this sdk returns CoreKitKey - }); - - const privateKeyProvider = new EthereumPrivateKeyProvider({ - config: { - /* - pass the chain config that you want to connect with - all chainConfig fields are required. - */ - chainConfig: { - chainId: '0x1', - rpcTarget: 'https://rpc.ankr.com/eth', - displayName: 'mainnet', - blockExplorer: 'https://etherscan.io/', - ticker: 'ETH', - tickerName: 'Ethereum', - }, - }, - }); - setWeb3Auth(authProvider); - await authProvider.init(privateKeyProvider); - - if (authProvider.connected) { - const finalPrivateKey = await authProvider.provider!.request({ - method: 'eth_private_key', - }); - - setPrivateKey(finalPrivateKey as string); - uiConsole('Private Key: ' + finalPrivateKey); + await web3auth.init(privateKeyProvider); + + if (web3auth.sessionId) { + setProvider(web3auth.provider); + setLoggedIn(true); + uiConsole('Logged In', web3auth.sessionId); } } catch (error) { uiConsole(error, 'mounted caught'); @@ -74,6 +70,7 @@ const Home = () => { const signInWithAuth0 = async () => { try { + //@ts-ignore await authorize({ scope: "openid profile email" }, { customScheme: "auth0.com.web3authsfaauth0" }, { responseType: "token id_token" }); const credentials = await getCredentials(); @@ -103,67 +100,83 @@ const Home = () => { const parsedToken = parseToken(idToken); setUserInfo(parsedToken); - console.log("parsedToken", parsedToken); - const verifier = "web3auth-auth0-demo"; const verifierId = parsedToken.sub; - const provider = await web3auth!.connect({ verifier, // e.g. `web3auth-sfa-verifier` replace with your verifier name, and it has to be on the same network passed in init(). verifierId, // e.g. `Yux1873xnibdui` or `name@email.com` replace with your verifier id(sub or email)'s value. idToken, }); - const finalPrivateKey = await provider!.request({ - method: 'eth_private_key', - }); - - setPrivateKey(finalPrivateKey as string); - uiConsole('Private Key: ' + finalPrivateKey); setLoading(false); - uiConsole('Logged In'); + if (web3auth.connected) { + setLoggedIn(true); + uiConsole('Logged In'); + } } catch (e) { uiConsole(e); setLoading(false); } }; - const getChainId = async () => { - setConsoleUI('Getting chain id'); - const networkDetails = await RPC.getChainId(); - uiConsole(networkDetails); - }; - const getAccounts = async () => { setConsoleUI('Getting account'); - const address = await RPC.getAccounts(privateKey as string); + // For ethers v5 + // const ethersProvider = new ethers.providers.Web3Provider(this.provider); + const ethersProvider = new ethers.BrowserProvider(provider!); + + // For ethers v5 + // const signer = ethersProvider.getSigner(); + const signer = await ethersProvider.getSigner(); + + // Get user's Ethereum public address + const address = signer.getAddress(); uiConsole(address); }; const getBalance = async () => { setConsoleUI('Fetching balance'); - const balance = await RPC.getBalance(privateKey as string); + // For ethers v5 + // const ethersProvider = new ethers.providers.Web3Provider(this.provider); + const ethersProvider = new ethers.BrowserProvider(provider!); + + // For ethers v5 + // const signer = ethersProvider.getSigner(); + const signer = await ethersProvider.getSigner(); + + // Get user's Ethereum public address + const address = signer.getAddress(); + + // Get user's balance in ether + // For ethers v5 + // const balance = ethers.utils.formatEther( + // await ethersProvider.getBalance(address) // Balance is in wei + // ); + const balance = ethers.formatEther( + await ethersProvider.getBalance(address), // Balance is in wei + ); + uiConsole(balance); }; - const sendTransaction = async () => { - setConsoleUI('Sending transaction'); - const tx = await RPC.sendTransaction(privateKey as string); - uiConsole(tx); - }; const signMessage = async () => { setConsoleUI('Signing message'); - const message = await RPC.signMessage(privateKey as string); - uiConsole(message); - }; - const authenticateUser = async () => { - setConsoleUI('Authenticating user'); - const data = await web3auth! - .authenticateUser() - .catch(error => console.log('error', error)); - uiConsole(data); + // For ethers v5 + // const ethersProvider = new ethers.providers.Web3Provider(this.provider); + const ethersProvider = new ethers.BrowserProvider(provider!); + + // For ethers v5 + // const signer = ethersProvider.getSigner(); + const signer = await ethersProvider.getSigner(); + const originalMessage = 'YOUR_MESSAGE'; + + // Sign the message + const signedMessage = await signer.signMessage(originalMessage); + uiConsole(signedMessage); }; + const logout = async () => { - await clearSession({ customScheme: "auth0.com.web3authsfaauth0" }); - setPrivateKey(null); + web3auth.logout(); + setProvider(null); + setLoggedIn(false); setUserInfo(''); }; @@ -174,15 +187,11 @@ const Home = () => { const loggedInView = ( -