From d0e1afa80f3466c4c0588d14f9ce8dac45741fcc Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Wed, 20 Sep 2023 11:02:58 +0800 Subject: [PATCH] sfa jwt example upgraded --- .../sfa-next-jwt-example/app/Loading.tsx | 4 +- .../sfa-next-jwt-example/app/evm.ethers.ts | 6 +- .../sfa-next-jwt-example/app/evm.web3.ts | 59 +- .../sfa-next-jwt-example/app/page.tsx | 55 +- .../sfa-next-jwt-example/package-lock.json | 2847 ++--------------- .../sfa-next-jwt-example/package.json | 2 +- .../package.json | 2 +- .../package.json | 2 +- .../sfa-react-example/package.json | 2 +- .../sfa-react-google-example/package.json | 2 +- .../package.json | 2 +- .../sfa-react-vite-example/package.json | 2 +- 12 files changed, 309 insertions(+), 2676 deletions(-) diff --git a/single-factor-auth-web/sfa-next-jwt-example/app/Loading.tsx b/single-factor-auth-web/sfa-next-jwt-example/app/Loading.tsx index 2d89041d..81c10a5d 100644 --- a/single-factor-auth-web/sfa-next-jwt-example/app/Loading.tsx +++ b/single-factor-auth-web/sfa-next-jwt-example/app/Loading.tsx @@ -1,8 +1,10 @@ +import Image from "next/image"; + import loader from "./spinner.svg"; // Tell webpack this JS file uses this image const Loading = () => (
- Loading + Loading
); diff --git a/single-factor-auth-web/sfa-next-jwt-example/app/evm.ethers.ts b/single-factor-auth-web/sfa-next-jwt-example/app/evm.ethers.ts index 63a0c774..0a691cea 100644 --- a/single-factor-auth-web/sfa-next-jwt-example/app/evm.ethers.ts +++ b/single-factor-auth-web/sfa-next-jwt-example/app/evm.ethers.ts @@ -1,10 +1,10 @@ -import type { SafeEventEmitterProvider } from "@web3auth/base"; +import type { IProvider } from "@web3auth/base"; import { ethers } from "ethers"; export default class EthereumRpc { - private provider: SafeEventEmitterProvider; + private provider: IProvider; - constructor(provider: SafeEventEmitterProvider) { + constructor(provider: IProvider) { this.provider = provider; } diff --git a/single-factor-auth-web/sfa-next-jwt-example/app/evm.web3.ts b/single-factor-auth-web/sfa-next-jwt-example/app/evm.web3.ts index a5d41d0f..edf06b69 100644 --- a/single-factor-auth-web/sfa-next-jwt-example/app/evm.web3.ts +++ b/single-factor-auth-web/sfa-next-jwt-example/app/evm.web3.ts @@ -1,71 +1,70 @@ -import type {SafeEventEmitterProvider} from '@web3auth/base' -import Web3 from 'web3' +import type { IProvider } from "@web3auth/base"; +import Web3 from "web3"; export default class EthereumRpc { - private provider: SafeEventEmitterProvider + private provider: IProvider; - constructor(provider: SafeEventEmitterProvider) { - this.provider = provider + constructor(provider: IProvider) { + this.provider = provider; } + async getAccounts(): Promise { try { - const web3 = new Web3(this.provider as any) - const accounts = await web3.eth.getAccounts() - return accounts + const web3 = new Web3(this.provider as any); + const accounts = await web3.eth.getAccounts(); + return accounts; } catch (error: unknown) { - return error as string[] + return error as string[]; } } async getBalance(): Promise { try { - const web3 = new Web3(this.provider as any) - const accounts = await web3.eth.getAccounts() - const balance = await web3.eth.getBalance(accounts[0]) + const web3 = new Web3(this.provider as any); + const accounts = await web3.eth.getAccounts(); + const balance = await web3.eth.getBalance(accounts[0]); return balance.toString(); } catch (error) { - return error as string + return error as string; } } async signMessage(): Promise { try { - const web3 = new Web3(this.provider as any) - const accounts = await web3.eth.getAccounts() - const message = - '0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad' - ;(web3.currentProvider as any)?.send( + const web3 = new Web3(this.provider as any); + const accounts = await web3.eth.getAccounts(); + const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad"; + (web3.currentProvider as any)?.send( { - method: 'eth_sign', + method: "eth_sign", params: [accounts[0], message], from: accounts[0], }, (err: Error, result: any) => { if (err) { - return console.error(err) + return console.error(err); } - return result - }, - ) + return result; + } + ); } catch (error) { - return error as string + return error as string; } - return } async signAndSendTransaction(): Promise { try { - const web3 = new Web3(this.provider as any) - const accounts = await web3.eth.getAccounts() + const web3 = new Web3(this.provider as any); + const accounts = await web3.eth.getAccounts(); const txRes = await web3.eth.sendTransaction({ from: accounts[0], to: accounts[0], - value: web3.utils.toWei('0.01', 'ether'), - }) + value: web3.utils.toWei("0.01", "ether"), + }); return txRes.transactionHash.toString(); } catch (error) { - return error as string + return error as string; } } } diff --git a/single-factor-auth-web/sfa-next-jwt-example/app/page.tsx b/single-factor-auth-web/sfa-next-jwt-example/app/page.tsx index df2e8036..00c36b24 100644 --- a/single-factor-auth-web/sfa-next-jwt-example/app/page.tsx +++ b/single-factor-auth-web/sfa-next-jwt-example/app/page.tsx @@ -1,22 +1,21 @@ "use client"; -import { useEffect, useState } from "react"; +import "./App.css"; +import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base"; +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; // Import Single Factor Auth SDK for no redirect flow import { Web3Auth } from "@web3auth/single-factor-auth"; -import { CHAIN_NAMESPACES, SafeEventEmitterProvider } from "@web3auth/base"; -import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; +import { useEffect, useState } from "react"; + // RPC libraries for blockchain calls import RPC from "./evm.web3"; // import RPC from "./evm.ethers"; - import Loading from "./Loading"; -import "./App.css"; const verifier = "w3a-jwt-for-sfa-web"; -const clientId = - "BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk"; // get from https://dashboard.web3auth.io +const clientId = "BEglQSgt4cUWcj6SKRdu5QkOXTsePmMcusG5EAoyjyOYKlVRjIF1iCNnMOTfpzCiunHRrMui8TIwQPXdkQ8Yxuk"; // get from https://dashboard.web3auth.io const chainConfig = { chainNamespace: CHAIN_NAMESPACES.EIP155, @@ -31,9 +30,7 @@ const chainConfig = { function App() { const [web3authSFAuth, setWeb3authSFAuth] = useState(null); const [usesSfaSDK, setUsesSfaSDK] = useState(false); - const [provider, setProvider] = useState( - null - ); + const [provider, setProvider] = useState(null); const [idToken, setIdToken] = useState(null); const [isLoggingIn, setIsLoggingIn] = useState(false); @@ -47,11 +44,11 @@ function App() { usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey. }); setWeb3authSFAuth(web3authSfa); - const provider = new EthereumPrivateKeyProvider({ + const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig }, }); - web3authSfa.init(provider); + web3authSfa.init(privateKeyProvider); } catch (error) { console.error(error); } @@ -83,6 +80,13 @@ function App() { return data?.token; }; + function uiConsole(...args: any[]): void { + const el = document.querySelector("#console>p"); + if (el) { + el.innerHTML = JSON.stringify(args || {}, null, 2); + } + } + const login = async () => { // trying logging in with the Single Factor Auth SDK try { @@ -91,14 +95,14 @@ function App() { return; } setIsLoggingIn(true); - const idToken = await getIdToken(); - console.log(idToken); - setIdToken(idToken!); - const { sub } = parseToken(idToken); + const idTokenResult = await getIdToken(); + console.log(idTokenResult); + setIdToken(idTokenResult!); + const { sub } = parseToken(idTokenResult); const web3authSfaprovider = await web3authSFAuth.connect({ verifier, verifierId: sub, - idToken: idToken!, + idToken: idTokenResult!, }); if (web3authSfaprovider) { setProvider(web3authSfaprovider); @@ -119,7 +123,6 @@ function App() { "You are directly using Single Factor Auth SDK to login the user, hence the Web3Auth getUserInfo function won't work for you. Get the user details directly from id token.", parseToken(idToken) ); - return; } }; @@ -129,7 +132,6 @@ function App() { "You are directly using Single Factor Auth SDK to login the user, hence the Web3Auth logout function won't work for you. You can logout the user directly from your login provider, or just clear the provider object." ); setProvider(null); - return; } }; @@ -173,13 +175,6 @@ function App() { uiConsole(result); }; - function uiConsole(...args: any[]): void { - const el = document.querySelector("#console>p"); - if (el) { - el.innerHTML = JSON.stringify(args || {}, null, 2); - } - } - const loginView = ( <>
@@ -236,13 +231,7 @@ function App() { SFA Next JWT Example - {isLoggingIn ? ( - - ) : ( -
- {web3authSFAuth ? (provider ? loginView : logoutView) : null} -
- )} + {isLoggingIn ? :
{web3authSFAuth ? (provider ? loginView : logoutView) : null}
}