From 50b0fca0349f6d5ae36d19205db43dafa31b0b78 Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Mon, 24 Jul 2023 17:41:44 +0200 Subject: [PATCH] refactoring step1 GoogleAuth --- src/lib/components/GoogleAuth.svelte | 129 ++++++++++++++------------- src/lib/services/providerUtils.ts | 5 ++ src/routes/+page.svelte | 35 +++----- 3 files changed, 85 insertions(+), 84 deletions(-) create mode 100644 src/lib/services/providerUtils.ts diff --git a/src/lib/components/GoogleAuth.svelte b/src/lib/components/GoogleAuth.svelte index 34d5abc..e695583 100644 --- a/src/lib/components/GoogleAuth.svelte +++ b/src/lib/components/GoogleAuth.svelte @@ -25,11 +25,70 @@ let sessionSigs; let isLoading = false; + let provider: BaseProvider | undefined; + + onMount(async () => { + isLoading = true; + console.log('Component mounted.'); + createMessage({ + text: 'Component mounted.', + sender: '$lib/components/GoogleAuth.svelte', + type: 'SYSTEM' + }); + + try { + litNodeClient = new LitNodeClient({ + litNetwork: 'serrano', + debug: false + }); + await litNodeClient.connect(); + + litAuthClient = new LitAuthClient({ + litRelayConfig: { + relayApiKey: 'test-api-key' + }, + litNodeClient + }); + + // Globally set the provider during the component's mount + provider = litAuthClient.initProvider(ProviderType.Google); + + console.log('Checking if isSignInRedirect...'); + if (!authMethod && isSignInRedirect(redirectUri)) { + console.log('Redirect detected, handling...'); + createMessage({ + text: 'Redirect detected, handling...', + sender: '$lib/components/GoogleAuth.svelte', + type: 'SYSTEM' + }); + + const providerName = getProviderFromUrl(); + if (providerName) { + await handleRedirect(providerName); + } else { + console.error('No provider detected in the URL.'); + } + } else { + console.log('No redirect detected.'); + createMessage({ + text: 'No redirect detected.', + sender: '$lib/components/GoogleAuth.svelte', + type: 'SYSTEM' + }); + } + } catch (err) { + console.error(err); + error = err; + view = 'ERROR'; + } finally { + isLoading = false; + } + }); + async function authWithGoogle() { isLoading = true; error = null; try { - const provider = litAuthClient.initProvider(ProviderType.Google); await provider.signIn(); await handleRedirect(ProviderType.Google); } catch (err) { @@ -47,20 +106,17 @@ sender: '$lib/components/GoogleAuth.svelte', type: 'SYSTEM' }); + + // As we're now using the global provider, we no longer need to fetch it again based on the providerName + currentProviderType = providerName as ProviderType; + try { console.log('Handling redirect...'); - let provider: BaseProvider | undefined; - - if (providerName === ProviderType.Google) { - provider = litAuthClient.getProvider(ProviderType.Google); - } if (!provider) { throw new Error('Invalid provider.'); } - currentProviderType = providerName as ProviderType; - // Get auth method object that has the OAuth token from redirect callback authMethod = await provider.authenticate(); await tick(); // Allow Svelte to update the view @@ -91,6 +147,7 @@ type: 'SYSTEM' }); } + async function mint() { isLoading = true; error = null; @@ -103,7 +160,7 @@ }); view = 'MINTING'; - const provider = litAuthClient.getProvider(currentProviderType); + // Using the global provider variable, so no need to call getProvider again const txHash: string = await provider.mintPKPThroughRelayer(authMethod); const response = await provider.relay.pollRequestUntilTerminalState(txHash); if (response.status !== 'Succeeded') { @@ -180,60 +237,6 @@ view = 'SESSION_CREATED'; } - onMount(async () => { - isLoading = true; - console.log('Component mounted.'); - createMessage({ - text: 'Component mounted.', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); - try { - litNodeClient = new LitNodeClient({ - litNetwork: 'serrano', - debug: false - }); - await litNodeClient.connect(); - - litAuthClient = new LitAuthClient({ - litRelayConfig: { - relayApiKey: 'test-api-key' - }, - litNodeClient - }); - - litAuthClient.initProvider(ProviderType.Google); - - console.log('Checking if isSignInRedirect...'); - if (!authMethod && isSignInRedirect(redirectUri)) { - console.log('Redirect detected, handling...'); - createMessage({ - text: 'Redirect detected, handling...', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); - const providerName = getProviderFromUrl(); - if (providerName) { - await handleRedirect(providerName); - } else { - console.error('No provider detected in the URL.'); - } - } else { - console.log('No redirect detected.'); - createMessage({ - text: 'No redirect detected.', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); - } - } catch (err) { - console.error(err); - error = err; - view = 'ERROR'; - } finally { - isLoading = false; - } - }); function resetView() { view = authMethod ? 'fetched' : 'sign_in'; error = null; diff --git a/src/lib/services/providerUtils.ts b/src/lib/services/providerUtils.ts new file mode 100644 index 0000000..e22e0f2 --- /dev/null +++ b/src/lib/services/providerUtils.ts @@ -0,0 +1,5 @@ +import { LitAuthClient, BaseProvider, GoogleProvider, ProviderType } from '@lit-protocol/lit-auth-client'; + +export function initializeProvider(litAuthClient: typeof LitAuthClient): BaseProvider { + return litAuthClient.initProvider(ProviderType.Google); +} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 51bef6e..86e19f7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,31 +5,24 @@ layout: ` grid-template-areas: "login", - grid-template-rows: 1fr; + "play" + grid-template-rows: 1fr 1fr; `, children: [ { id: 'login1', - componentName: 'Login', - slot: 'Login', - children: [ - { - id: 'wallet1', - componentName: 'Wallet', - state: { - rpcURL: 'https://rpc.gnosischain.com/', - pkpPubKey: - '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' - }, - children: [ - { - id: 'HelloEarth1', - componentName: 'HelloEarth', - map: { pkp: 'wallet1.pkpPubKey', rpcURL: 'wallet1.rpcURL' } - } - ] - } - ] + componentName: 'GoogleAuth', + slot: 'login' + }, + { + id: 'wallet1', + componentName: 'Wallet', + slot: 'play', + state: { + rpcURL: 'https://rpc.gnosischain.com/', + pkpPubKey: + '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' + } } ] };