diff --git a/src/lib/components/GoogleAuth.svelte b/src/lib/components/GoogleAuth.svelte index 53a8c8c..726e0a6 100644 --- a/src/lib/components/GoogleAuth.svelte +++ b/src/lib/components/GoogleAuth.svelte @@ -7,171 +7,99 @@ import { createLitSession } from '$lib/services/createLitSession/createLitSession'; const redirectUri = 'http://localhost:5173/'; - let view = 'sign_in'; - let error; - let currentProviderType; - let authMethod; - let pkps = []; - let currentPKP; - let sessionSigs; - let isLoading = false; export let setupLitProvider; + let view = 'sign_in'; + let sessionSigs; + let error; + let isLoading = false; + let currentPKP; + let pkps: IRelayPKP[] = []; + let authMethod; let provider; - onMount(async () => { - provider = await setupLitProvider.setupLitProvider(); - isLoading = true; - console.log('Component mounted.'); + function logMessage(text, type = 'SYSTEM') { + console.log(text); createMessage({ - text: 'Component mounted.', + text, sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' + type }); + } + onMount(async () => { try { - 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' - }); + provider = await setupLitProvider.setupLitProvider(); + logMessage('Component mounted.'); + + if (!authMethod && isSignInRedirect(redirectUri)) { + logMessage('Redirect detected, handling...'); const providerName = getProviderFromUrl(); if (providerName) { await handleRedirect(providerName); } else { - console.error('No provider detected in the URL.'); + logMessage('No provider detected in the URL.', 'ERROR'); } } else { - console.log('No redirect detected.'); - createMessage({ - text: 'No redirect detected.', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); + logMessage('No redirect detected.'); } } catch (err) { - console.error(err); - error = err; - view = 'ERROR'; - } finally { - isLoading = false; + setError(err); } }); async function authWithGoogle() { - isLoading = true; - error = null; try { await provider.signIn(); await handleRedirect(ProviderType.Google); } catch (err) { - error = err; - view = 'ERROR'; - } finally { - isLoading = false; + setError(err); } } async function handleRedirect(providerName: string) { - isLoading = true; - createMessage({ - text: `Handling redirect for ${providerName}`, - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); + logMessage(`Handling redirect for ${providerName}`); - // As we're now using the global provider, we no longer need to fetch it again based on the providerName - currentProviderType = providerName as ProviderType; + if (!provider) throw new Error('Invalid provider.'); + authMethod = await provider.authenticate(); + await tick(); - try { - console.log('Handling redirect...'); + view = 'fetching'; + pkps = await provider.fetchPKPsThroughRelayer(authMethod); + view = pkps.length > 0 ? 'fetched' : 'NO_PKPS'; - if (!provider) { - throw new Error('Invalid provider.'); - } - - // Get auth method object that has the OAuth token from redirect callback - authMethod = await provider.authenticate(); - await tick(); // Allow Svelte to update the view - - // Fetch PKPs associated with social account - view = 'fetching'; - const fetchedPkps: IRelayPKP[] = await provider.fetchPKPsThroughRelayer(authMethod); - await tick(); // Allow Svelte to update the view - - if (fetchedPkps.length > 0) { - pkps = fetchedPkps; - view = 'fetched'; - } else { - view = 'NO_PKPS'; - } - } catch (err) { - console.error(err); - error = err; - view = 'ERROR'; - } finally { - isLoading = false; - } - console.log(`Handling redirect for ${providerName}`); - console.log(`Fetched PKPs: ${pkps.length}`); - createMessage({ - text: `Fetched PKPs: ${pkps.length}`, - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); + logMessage(`Fetched PKPs: ${pkps.length}`); } async function mint() { - isLoading = true; - error = null; try { view = 'MINTING'; - const newPKP: IRelayPKP = await mintPkp(provider, authMethod); // Ensure provider implements IProvider + const newPKP: IRelayPKP = await mintPkp(provider, authMethod); pkps = [...pkps, newPKP]; await createSession(newPKP); view = 'MINTED'; } catch (err) { - console.error(err); - error = err; - view = 'ERROR'; - } finally { - isLoading = false; + setError(err); } } async function createSession(pkp: IRelayPKP) { - isLoading = true; - error = null; - try { - console.log('Creating session...'); - createMessage({ - text: 'Creating session...', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); - view = 'CREATING_SESSION'; + logMessage('Creating session...'); + view = 'CREATING_SESSION'; - sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod); - currentPKP = pkp; + sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod); + currentPKP = pkp; - createMessage({ - text: 'Session created.', - sender: '$lib/components/GoogleAuth.svelte', - type: 'SYSTEM' - }); - view = 'SESSION_CREATED'; - } catch (err) { - console.error(err); - error = err; - view = 'ERROR'; - } finally { - isLoading = false; - } + logMessage('Session created.'); + view = 'SESSION_CREATED'; + } + + function setError(err) { + console.error(err); + error = err; + view = 'ERROR'; } function resetView() { @@ -184,14 +112,12 @@ {#if error}

Error

{error.message}

- + {:else if isLoading}

Loading...

{:else if view === 'sign_in'}

Sign in with Lit

- {:else if view === 'HANDLE_REDIRECT'} -

Handling Google Authentication...

{:else if view === 'fetching'}

Fetching your PKPs...

{:else if view === 'NO_PKPS'} @@ -199,13 +125,9 @@ {:else if view === 'fetched'}

Select a PKP to continue

-
- {#each pkps as pkp} - - {/each} -
+ {#each pkps as pkp} + + {/each} {:else if view === 'MINTING'}

Minting your PKP...

{:else if view === 'MINTED'} diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte index 1c9a1a6..502b71e 100644 --- a/src/lib/components/HelloEarth/HelloEarth.svelte +++ b/src/lib/components/HelloEarth/HelloEarth.svelte @@ -7,7 +7,10 @@ const store = getComponentStore(id); $: console.log('store:', $store); + export let messages; + onMount(async () => { + console.log('messages: ' + JSON.stringify(messages)); console.log('hello Earth'); }); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c8cc7c7..3da1e24 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,31 +5,31 @@ layout: ` grid-template-areas: "auth", - "login", - "play", - "hello" - grid-template-rows: auto 1fr 1fr; + "hello", + "google" + grid-template-rows: 1fr 1fr; `, children: [ { id: 'authsig', - componentName: 'AuthSig', - slot: 'auth' - }, - { - id: 'wallet1', - componentName: 'Wallet', - slot: 'play', - state: { - rpcURL: 'https://rpc.gnosischain.com/', - pkpPubKey: - '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' - } - }, - { - id: 'hello', - componentName: 'GoogleAuth', + componentName: 'HelloEarth', slot: 'hello', + services: ['messages'] + }, + // { + // id: 'wallet1', + // componentName: 'Wallet', + // slot: 'play', + // state: { + // rpcURL: 'https://rpc.gnosischain.com/', + // pkpPubKey: + // '046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571' + // } + // }, + { + id: 'google', + componentName: 'GoogleAuth', + slot: 'google', services: ['setupLitProvider'] } ]