reducing the google example to google only
This commit is contained in:
Samuel Andert
parent
4b419a5ade
commit
c71f37d221
@ -5,32 +5,21 @@ import {
|
||||
LitAuthClient,
|
||||
BaseProvider,
|
||||
GoogleProvider,
|
||||
EthWalletProvider,
|
||||
WebAuthnProvider,
|
||||
isSignInRedirect,
|
||||
getProviderFromUrl,
|
||||
} from '@lit-protocol/lit-auth-client';
|
||||
import { IRelayPKP, AuthMethod, SessionSigs } from '@lit-protocol/types';
|
||||
import { ProviderType } from '@lit-protocol/constants';
|
||||
import { ethers } from 'ethers';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useConnect, useAccount, useDisconnect, Connector } from 'wagmi';
|
||||
import {LitAccessControlConditionResource, LitAbility} from '@lit-protocol/auth-helpers';
|
||||
import { useConnect, useAccount, useDisconnect, Connector } from 'wagmi';
|
||||
|
||||
|
||||
// Local dev only: When using npm link, need to update encryption pkg to handle possible ipfs client init error
|
||||
// let ipfsClient = null;
|
||||
// try {
|
||||
// ipfsClient = require("ipfs-http-client");
|
||||
// } catch {}
|
||||
|
||||
enum Views {
|
||||
SIGN_IN = 'sign_in',
|
||||
HANDLE_REDIRECT = 'handle_redirect',
|
||||
REQUEST_AUTHSIG = 'request_authsig',
|
||||
REGISTERING = 'webauthn_registering',
|
||||
REGISTERED = 'webauthn_registered',
|
||||
AUTHENTICATING = 'webauthn_authenticating',
|
||||
FETCHING = 'fetching',
|
||||
FETCHED = 'fetched',
|
||||
MINTING = 'minting',
|
||||
@ -40,6 +29,7 @@ enum Views {
|
||||
ERROR = 'error',
|
||||
}
|
||||
|
||||
|
||||
export default function Dashboard() {
|
||||
const redirectUri = 'http://localhost:3000';
|
||||
|
||||
@ -57,12 +47,6 @@ export default function Dashboard() {
|
||||
const [currentPKP, setCurrentPKP] = useState<IRelayPKP>();
|
||||
const [sessionSigs, setSessionSigs] = useState<SessionSigs>();
|
||||
|
||||
const [message, setMessage] = useState<string>('Free the web!');
|
||||
const [signature, setSignature] = useState<string>();
|
||||
const [recoveredAddress, setRecoveredAddress] = useState<string>();
|
||||
const [verified, setVerified] = useState<boolean>(false);
|
||||
|
||||
// Use wagmi to connect one's eth wallet
|
||||
const { connectAsync, connectors } = useConnect({
|
||||
onError(error) {
|
||||
console.error(error);
|
||||
@ -71,21 +55,7 @@ export default function Dashboard() {
|
||||
});
|
||||
const { isConnected, connector, address } = useAccount();
|
||||
const { disconnectAsync } = useDisconnect();
|
||||
|
||||
/**
|
||||
* Use wagmi to connect one's eth wallet and then request a signature from one's wallet
|
||||
*/
|
||||
async function handleConnectWallet(c: any) {
|
||||
const { account, chain, connector } = await connectAsync(c);
|
||||
try {
|
||||
await authWithWallet(account, connector);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err);
|
||||
setView(Views.ERROR);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Begin auth flow with Google
|
||||
*/
|
||||
@ -97,114 +67,6 @@ export default function Dashboard() {
|
||||
await provider.signIn();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Request a signature from one's wallet
|
||||
*/
|
||||
async function authWithWallet(address: string, connector: Connector) {
|
||||
setView(Views.REQUEST_AUTHSIG);
|
||||
|
||||
// Create a function to handle signing messages
|
||||
const signer = await connector.getSigner();
|
||||
const signAuthSig = async (message: string) => {
|
||||
const sig = await signer.signMessage(message);
|
||||
return sig;
|
||||
};
|
||||
|
||||
// Get auth sig
|
||||
const provider = litAuthClient.getProvider(ProviderType.EthWallet);
|
||||
const authMethod = await provider.authenticate({
|
||||
address,
|
||||
signMessage: signAuthSig,
|
||||
});
|
||||
setCurrentProviderType(ProviderType.EthWallet);
|
||||
setAuthMethod(authMethod);
|
||||
|
||||
// Fetch PKPs associated with eth wallet account
|
||||
setView(Views.FETCHING);
|
||||
const pkps: IRelayPKP[] = await provider.fetchPKPsThroughRelayer(
|
||||
authMethod
|
||||
);
|
||||
if (pkps.length > 0) {
|
||||
setPKPs(pkps);
|
||||
}
|
||||
setView(Views.FETCHED);
|
||||
}
|
||||
|
||||
async function registerWithWebAuthn() {
|
||||
setView(Views.REGISTERING);
|
||||
|
||||
try {
|
||||
// Register new PKP
|
||||
const provider = litAuthClient.getProvider(
|
||||
ProviderType.WebAuthn
|
||||
) as WebAuthnProvider;
|
||||
setCurrentProviderType(ProviderType.WebAuthn);
|
||||
const options = await provider.register();
|
||||
|
||||
// Verify registration and mint PKP through relayer
|
||||
const txHash = await provider.verifyAndMintPKPThroughRelayer(options);
|
||||
setView(Views.MINTING);
|
||||
const response = await provider.relay.pollRequestUntilTerminalState(
|
||||
txHash
|
||||
);
|
||||
if (response.status !== 'Succeeded') {
|
||||
throw new Error('Minting failed');
|
||||
}
|
||||
const newPKP: IRelayPKP = {
|
||||
tokenId: response.pkpTokenId!,
|
||||
publicKey: response.pkpPublicKey!,
|
||||
ethAddress: response.pkpEthAddress!,
|
||||
};
|
||||
|
||||
// Add new PKP to list of PKPs
|
||||
const morePKPs: IRelayPKP[] = [...pkps, newPKP];
|
||||
setCurrentPKP(newPKP);
|
||||
setPKPs(morePKPs);
|
||||
|
||||
setView(Views.REGISTERED);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err);
|
||||
setView(Views.ERROR);
|
||||
}
|
||||
}
|
||||
|
||||
async function authenticateWithWebAuthn() {
|
||||
setView(Views.AUTHENTICATING);
|
||||
|
||||
try {
|
||||
const provider = litAuthClient.getProvider(
|
||||
ProviderType.WebAuthn
|
||||
) as WebAuthnProvider;
|
||||
const authMethod = await provider.authenticate();
|
||||
setAuthMethod(authMethod);
|
||||
|
||||
// Authenticate with a WebAuthn credential and create session sigs with authentication data
|
||||
setView(Views.CREATING_SESSION);
|
||||
|
||||
const litResource = new LitAccessControlConditionResource('*');
|
||||
const sessionSigs = await provider.getSessionSigs({
|
||||
pkpPublicKey: currentPKP.publicKey,
|
||||
authMethod,
|
||||
sessionSigsParams: {
|
||||
chain: 'ethereum',
|
||||
resourceAbilityRequests: [{
|
||||
resource: litResource,
|
||||
ability: LitAbility.PKPSigning
|
||||
}],
|
||||
},
|
||||
});
|
||||
setSessionSigs(sessionSigs);
|
||||
|
||||
setView(Views.SESSION_CREATED);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setAuthMethod(null);
|
||||
setError(err);
|
||||
setView(Views.ERROR);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Handle redirect from Lit login server
|
||||
*/
|
||||
@ -315,55 +177,7 @@ export default function Dashboard() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign a message with current PKP
|
||||
*/
|
||||
async function signMessageWithPKP() {
|
||||
try {
|
||||
const toSign = ethers.utils.arrayify(ethers.utils.hashMessage(message));
|
||||
const litActionCode = `
|
||||
const go = async () => {
|
||||
// this requests a signature share from the Lit Node
|
||||
// the signature share will be automatically returned in the response from the node
|
||||
// and combined into a full signature by the LitJsSdk for you to use on the client
|
||||
// all the params (toSign, publicKey, sigName) are passed in from the LitJsSdk.executeJs() function
|
||||
const sigShare = await LitActions.signEcdsa({ toSign, publicKey, sigName });
|
||||
};
|
||||
go();
|
||||
`;
|
||||
// Sign message
|
||||
// @ts-ignore - complains about no authSig, but we don't need one for this action
|
||||
const results = await litNodeClient.executeJs({
|
||||
code: litActionCode,
|
||||
sessionSigs: sessionSigs,
|
||||
jsParams: {
|
||||
toSign: toSign,
|
||||
publicKey: currentPKP.publicKey,
|
||||
sigName: 'sig1',
|
||||
},
|
||||
});
|
||||
// Get signature
|
||||
const result = results.signatures['sig1'];
|
||||
const signature = ethers.utils.joinSignature({
|
||||
r: '0x' + result.r,
|
||||
s: '0x' + result.s,
|
||||
v: result.recid,
|
||||
});
|
||||
setSignature(signature);
|
||||
|
||||
// Get the address associated with the signature created by signing the message
|
||||
const recoveredAddr = ethers.utils.verifyMessage(message, signature);
|
||||
setRecoveredAddress(recoveredAddr);
|
||||
// Check if the address associated with the signature is the same as the current PKP
|
||||
const verified =
|
||||
currentPKP.ethAddress.toLowerCase() === recoveredAddr.toLowerCase();
|
||||
setVerified(verified);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err);
|
||||
setView(Views.ERROR);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
/**
|
||||
@ -389,8 +203,6 @@ export default function Dashboard() {
|
||||
|
||||
// Initialize providers
|
||||
litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
|
||||
litAuthClient.initProvider<EthWalletProvider>(ProviderType.EthWallet);
|
||||
litAuthClient.initProvider<WebAuthnProvider>(ProviderType.WebAuthn);
|
||||
|
||||
setLitAuthClient(litAuthClient);
|
||||
} catch (err) {
|
||||
@ -458,16 +270,7 @@ export default function Dashboard() {
|
||||
<>
|
||||
{isConnected ? (
|
||||
<>
|
||||
<button
|
||||
disabled={!connector.ready}
|
||||
key={connector.id}
|
||||
onClick={async () => {
|
||||
setError(null);
|
||||
await authWithWallet(address, connector);
|
||||
}}
|
||||
>
|
||||
Continue with {connector.name}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={async () => {
|
||||
setError(null);
|
||||
@ -479,60 +282,13 @@ export default function Dashboard() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* If eth wallet is not connected, show all login options */}
|
||||
<button onClick={authWithGoogle}>Google</button>
|
||||
{connectors.map(connector => (
|
||||
<button
|
||||
disabled={!connector.ready}
|
||||
key={connector.id}
|
||||
onClick={async () => {
|
||||
setError(null);
|
||||
await handleConnectWallet({ connector });
|
||||
}}
|
||||
>
|
||||
{connector.name}
|
||||
</button>
|
||||
))}
|
||||
<button onClick={registerWithWebAuthn}>
|
||||
Register with WebAuthn
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</>
|
||||
)}
|
||||
{view === Views.HANDLE_REDIRECT && (
|
||||
<>
|
||||
<h1>Verifying your identity...</h1>
|
||||
</>
|
||||
)}
|
||||
{view === Views.REQUEST_AUTHSIG && (
|
||||
<>
|
||||
<h1>Check your wallet</h1>
|
||||
</>
|
||||
)}
|
||||
{view === Views.REGISTERING && (
|
||||
<>
|
||||
<h1>Register your passkey</h1>
|
||||
<p>Follow your browser's prompts to create a passkey.</p>
|
||||
</>
|
||||
)}
|
||||
{view === Views.REGISTERED && (
|
||||
<>
|
||||
<h1>Minted!</h1>
|
||||
<p>
|
||||
Authenticate with your newly registered passkey. Continue when
|
||||
you're ready.
|
||||
</p>
|
||||
<button onClick={authenticateWithWebAuthn}>Continue</button>
|
||||
</>
|
||||
)}
|
||||
{view === Views.AUTHENTICATING && (
|
||||
<>
|
||||
<h1>Authenticate with your passkey</h1>
|
||||
<p>Follow your browser's prompts to create a passkey.</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{view === Views.FETCHING && (
|
||||
<>
|
||||
<h1>Fetching your PKPs...</h1>
|
||||
@ -554,10 +310,6 @@ export default function Dashboard() {
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<hr></hr>
|
||||
{/* Or mint another PKP */}
|
||||
<p>or mint another one:</p>
|
||||
<button onClick={mint}>Mint another PKP</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@ -590,22 +342,7 @@ export default function Dashboard() {
|
||||
<p>{currentPKP.ethAddress}</p>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<div>
|
||||
<p>Sign this message with your PKP:</p>
|
||||
<p>{message}</p>
|
||||
<button onClick={signMessageWithPKP}>Sign message</button>
|
||||
|
||||
{signature && (
|
||||
<>
|
||||
<h3>Your signature:</h3>
|
||||
<p>{signature}</p>
|
||||
<h3>Recovered address:</h3>
|
||||
<p>{recoveredAddress}</p>
|
||||
<h3>Verified:</h3>
|
||||
<p>{verified ? 'true' : 'false'}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
<script>
|
||||
import { configureChains, createConfig } from '@wagmi/core';
|
||||
import { publicProvider } from '@wagmi/core/providers/public';
|
||||
import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
|
||||
import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
|
||||
|
||||
const chronicleChain = {
|
||||
id: 175177,
|
||||
name: 'Chronicle',
|
||||
network: 'chronicle',
|
||||
|
||||
nativeCurrency: {
|
||||
decimals: 18,
|
||||
name: 'Chronicle - Lit Protocol Testnet',
|
||||
symbol: 'LIT'
|
||||
},
|
||||
rpcUrls: {
|
||||
default: {
|
||||
http: ['https://chain-rpc.litprotocol.com/http']
|
||||
},
|
||||
public: {
|
||||
http: ['https://chain-rpc.litprotocol.com/http']
|
||||
}
|
||||
},
|
||||
blockExplorers: {
|
||||
default: {
|
||||
name: 'Chronicle - Lit Protocol Testnet',
|
||||
url: 'https://chain.litprotocol.com'
|
||||
}
|
||||
},
|
||||
testnet: true
|
||||
};
|
||||
|
||||
const { publicClient, chains } = configureChains(
|
||||
[chronicleChain],
|
||||
[
|
||||
jsonRpcProvider({
|
||||
rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] })
|
||||
}),
|
||||
publicProvider()
|
||||
]
|
||||
);
|
||||
|
||||
const client = createConfig({
|
||||
autoConnect: true,
|
||||
connectors: [
|
||||
new WalletConnectConnector({
|
||||
chains,
|
||||
options: {
|
||||
projectId: '7db8ca514b865088d90cebec1bf28318'
|
||||
}
|
||||
})
|
||||
],
|
||||
provider
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user