Skip to content

Commit

Permalink
sfa jwt example upgraded
Browse files Browse the repository at this point in the history
  • Loading branch information
ihsraham committed Sep 20, 2023
1 parent b9013e5 commit d0e1afa
Show file tree
Hide file tree
Showing 12 changed files with 309 additions and 2,676 deletions.
4 changes: 3 additions & 1 deletion single-factor-auth-web/sfa-next-jwt-example/app/Loading.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import Image from "next/image";

import loader from "./spinner.svg"; // Tell webpack this JS file uses this image

const Loading = () => (
<div style={{ textAlign: "center" }}>
<img src={loader} height="200px" alt="Loading" />
<Image src={loader} height="200" alt="Loading" />
</div>
);

Expand Down
6 changes: 3 additions & 3 deletions single-factor-auth-web/sfa-next-jwt-example/app/evm.ethers.ts
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down
59 changes: 29 additions & 30 deletions single-factor-auth-web/sfa-next-jwt-example/app/evm.web3.ts
Original file line number Diff line number Diff line change
@@ -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<string[]> {
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<string> {
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<string | undefined> {
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<string> {
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;
}
}
}
55 changes: 22 additions & 33 deletions single-factor-auth-web/sfa-next-jwt-example/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -31,9 +30,7 @@ const chainConfig = {
function App() {
const [web3authSFAuth, setWeb3authSFAuth] = useState<Web3Auth | null>(null);
const [usesSfaSDK, setUsesSfaSDK] = useState(false);
const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(
null
);
const [provider, setProvider] = useState<IProvider | null>(null);
const [idToken, setIdToken] = useState<string | null>(null);
const [isLoggingIn, setIsLoggingIn] = useState(false);

Expand All @@ -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);
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -119,7 +123,6 @@ function App() {
"You are directly using Single Factor Auth SDK to login the user, hence the Web3Auth <code>getUserInfo</code> function won't work for you. Get the user details directly from id token.",
parseToken(idToken)
);
return;
}
};

Expand All @@ -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;
}
};

Expand Down Expand Up @@ -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 = (
<>
<div className="flex-container">
Expand Down Expand Up @@ -236,13 +231,7 @@ function App() {
SFA Next JWT Example
</h1>

{isLoggingIn ? (
<Loading />
) : (
<div className="grid">
{web3authSFAuth ? (provider ? loginView : logoutView) : null}
</div>
)}
{isLoggingIn ? <Loading /> : <div className="grid">{web3authSFAuth ? (provider ? loginView : logoutView) : null}</div>}

<footer className="footer">
<a
Expand Down
Loading

0 comments on commit d0e1afa

Please sign in to comment.