reducing the google example to google only
This commit is contained in:
Samuel Andert
parent
4b419a5ade
commit
c71f37d221
@ -5,32 +5,21 @@ import {
|
|||||||
LitAuthClient,
|
LitAuthClient,
|
||||||
BaseProvider,
|
BaseProvider,
|
||||||
GoogleProvider,
|
GoogleProvider,
|
||||||
EthWalletProvider,
|
|
||||||
WebAuthnProvider,
|
|
||||||
isSignInRedirect,
|
isSignInRedirect,
|
||||||
getProviderFromUrl,
|
getProviderFromUrl,
|
||||||
} from '@lit-protocol/lit-auth-client';
|
} from '@lit-protocol/lit-auth-client';
|
||||||
import { IRelayPKP, AuthMethod, SessionSigs } from '@lit-protocol/types';
|
import { IRelayPKP, AuthMethod, SessionSigs } from '@lit-protocol/types';
|
||||||
import { ProviderType } from '@lit-protocol/constants';
|
import { ProviderType } from '@lit-protocol/constants';
|
||||||
import { ethers } from 'ethers';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { useConnect, useAccount, useDisconnect, Connector } from 'wagmi';
|
|
||||||
import {LitAccessControlConditionResource, LitAbility} from '@lit-protocol/auth-helpers';
|
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 {
|
enum Views {
|
||||||
SIGN_IN = 'sign_in',
|
SIGN_IN = 'sign_in',
|
||||||
HANDLE_REDIRECT = 'handle_redirect',
|
HANDLE_REDIRECT = 'handle_redirect',
|
||||||
REQUEST_AUTHSIG = 'request_authsig',
|
REQUEST_AUTHSIG = 'request_authsig',
|
||||||
REGISTERING = 'webauthn_registering',
|
|
||||||
REGISTERED = 'webauthn_registered',
|
|
||||||
AUTHENTICATING = 'webauthn_authenticating',
|
|
||||||
FETCHING = 'fetching',
|
FETCHING = 'fetching',
|
||||||
FETCHED = 'fetched',
|
FETCHED = 'fetched',
|
||||||
MINTING = 'minting',
|
MINTING = 'minting',
|
||||||
@ -40,6 +29,7 @@ enum Views {
|
|||||||
ERROR = 'error',
|
ERROR = 'error',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const redirectUri = 'http://localhost:3000';
|
const redirectUri = 'http://localhost:3000';
|
||||||
|
|
||||||
@ -57,12 +47,6 @@ export default function Dashboard() {
|
|||||||
const [currentPKP, setCurrentPKP] = useState<IRelayPKP>();
|
const [currentPKP, setCurrentPKP] = useState<IRelayPKP>();
|
||||||
const [sessionSigs, setSessionSigs] = useState<SessionSigs>();
|
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({
|
const { connectAsync, connectors } = useConnect({
|
||||||
onError(error) {
|
onError(error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
@ -72,20 +56,6 @@ export default function Dashboard() {
|
|||||||
const { isConnected, connector, address } = useAccount();
|
const { isConnected, connector, address } = useAccount();
|
||||||
const { disconnectAsync } = useDisconnect();
|
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
|
* Begin auth flow with Google
|
||||||
*/
|
*/
|
||||||
@ -97,114 +67,6 @@ export default function Dashboard() {
|
|||||||
await provider.signIn();
|
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
|
* 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(() => {
|
useEffect(() => {
|
||||||
/**
|
/**
|
||||||
@ -389,8 +203,6 @@ export default function Dashboard() {
|
|||||||
|
|
||||||
// Initialize providers
|
// Initialize providers
|
||||||
litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
|
litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
|
||||||
litAuthClient.initProvider<EthWalletProvider>(ProviderType.EthWallet);
|
|
||||||
litAuthClient.initProvider<WebAuthnProvider>(ProviderType.WebAuthn);
|
|
||||||
|
|
||||||
setLitAuthClient(litAuthClient);
|
setLitAuthClient(litAuthClient);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -458,16 +270,7 @@ export default function Dashboard() {
|
|||||||
<>
|
<>
|
||||||
{isConnected ? (
|
{isConnected ? (
|
||||||
<>
|
<>
|
||||||
<button
|
|
||||||
disabled={!connector.ready}
|
|
||||||
key={connector.id}
|
|
||||||
onClick={async () => {
|
|
||||||
setError(null);
|
|
||||||
await authWithWallet(address, connector);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Continue with {connector.name}
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
setError(null);
|
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>
|
<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 && (
|
{view === Views.FETCHING && (
|
||||||
<>
|
<>
|
||||||
<h1>Fetching your PKPs...</h1>
|
<h1>Fetching your PKPs...</h1>
|
||||||
@ -554,10 +310,6 @@ export default function Dashboard() {
|
|||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
<p>{currentPKP.ethAddress}</p>
|
||||||
</div>
|
</div>
|
||||||
<hr></hr>
|
<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>
|
</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…
x
Reference in New Issue
Block a user