tiding up GoogleAuth

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;
 
+	function logMessage(text, type = 'SYSTEM') {
+		console.log(text);
+		createMessage({
+			text,
+			sender: '$lib/components/GoogleAuth.svelte',
+			type
+		});
+	}
+
 	onMount(async () => {
-		provider = await setupLitProvider.setupLitProvider();
-		isLoading = true;
-		console.log('Component mounted.');
-		createMessage({
-			text: 'Component mounted.',
-			sender: '$lib/components/GoogleAuth.svelte',
-			type: 'SYSTEM'
-		});
-
 		try {
-			console.log('Checking if isSignInRedirect...');
+			provider = await setupLitProvider.setupLitProvider();
-			if (!authMethod && isSignInRedirect(redirectUri)) {
-				console.log('Redirect detected, handling...');
-				createMessage({
-					text: 'Redirect detected, handling...',
-					sender: '$lib/components/GoogleAuth.svelte',
-					type: 'SYSTEM'
-				});
 
+			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.');
+				logMessage('No redirect detected.');
-				createMessage({
-					text: 'No redirect detected.',
-					sender: '$lib/components/GoogleAuth.svelte',
-					type: 'SYSTEM'
-				});
 			}
 		} catch (err) {
-			console.error(err);
+			setError(err);
-			error = err;
-			view = 'ERROR';
-		} finally {
-			isLoading = false;
 		}
 	});
 
 	async function authWithGoogle() {
-		isLoading = true;
-		error = null;
 		try {
 			await provider.signIn();
 			await handleRedirect(ProviderType.Google);
 		} catch (err) {
-			error = err;
+			setError(err);
-			view = 'ERROR';
-		} finally {
-			isLoading = false;
 		}
 	}
 
 	async function handleRedirect(providerName: string) {
-		isLoading = true;
+		logMessage(`Handling redirect for ${providerName}`);
-		createMessage({
-			text: `Handling redirect for ${providerName}`,
-			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
+		if (!provider) throw new Error('Invalid provider.');
-		currentProviderType = providerName as ProviderType;
-
-		try {
-			console.log('Handling redirect...');
-
-			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
+		await tick();
 
-			// Fetch PKPs associated with social account
 		view = 'fetching';
-			const fetchedPkps: IRelayPKP[] = await provider.fetchPKPsThroughRelayer(authMethod);
+		pkps = await provider.fetchPKPsThroughRelayer(authMethod);
-			await tick(); // Allow Svelte to update the view
+		view = pkps.length > 0 ? 'fetched' : 'NO_PKPS';
 
-			if (fetchedPkps.length > 0) {
+		logMessage(`Fetched PKPs: ${pkps.length}`);
-				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'
-		});
 	}
 
 	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);
+			setError(err);
-			error = err;
-			view = 'ERROR';
-		} finally {
-			isLoading = false;
 		}
 	}
 
 	async function createSession(pkp: IRelayPKP) {
-		isLoading = true;
+		logMessage('Creating session...');
-		error = null;
-		try {
-			console.log('Creating session...');
-			createMessage({
-				text: 'Creating session...',
-				sender: '$lib/components/GoogleAuth.svelte',
-				type: 'SYSTEM'
-			});
 		view = 'CREATING_SESSION';
 
 		sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
 		currentPKP = pkp;
 
-			createMessage({
+		logMessage('Session created.');
-				text: 'Session created.',
-				sender: '$lib/components/GoogleAuth.svelte',
-				type: 'SYSTEM'
-			});
 		view = 'SESSION_CREATED';
-		} catch (err) {
+	}
+
+	function setError(err) {
 		console.error(err);
 		error = err;
 		view = 'ERROR';
-		} finally {
-			isLoading = false;
-		}
 	}
 
 	function resetView() {
@@ -184,14 +112,12 @@
 	{#if error}
 		<h1>Error</h1>
 		<p>{error.message}</p>
-		<button on:click={() => resetView()}>Got it</button>
+		<button on:click={resetView}>Got it</button>
 	{:else if isLoading}
 		<h1>Loading...</h1>
 	{:else if view === 'sign_in'}
 		<h1>Sign in with Lit</h1>
 		<button on:click={authWithGoogle}>Google</button>
-	{:else if view === 'HANDLE_REDIRECT'}
-		<h1>Handling Google Authentication...</h1>
 	{:else if view === 'fetching'}
 		<h1>Fetching your PKPs...</h1>
 	{:else if view === 'NO_PKPS'}
@@ -199,13 +125,9 @@
 		<button on:click={mint}>Mint a PKP</button>
 	{:else if view === 'fetched'}
 		<h1>Select a PKP to continue</h1>
-		<div>
 		{#each pkps as pkp}
-				<button on:click={async () => await createSession(pkp)}>
+			<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
-					{pkp.ethAddress}
-				</button>
 		{/each}
-		</div>
 	{:else if view === 'MINTING'}
 		<h1>Minting your PKP...</h1>
 	{:else if view === 'MINTED'}

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');
 	});
 </script>

src/routes/+page.svelte

@@ -5,31 +5,31 @@
 		layout: `
 			grid-template-areas: 
 			"auth",
-				"login",
+				"hello",
-				"play",
+				"google"
-				"hello"
+			grid-template-rows: 1fr 1fr;
-			grid-template-rows: auto 1fr 1fr;
 		`,
 		children: [
 			{
 				id: 'authsig',
-				componentName: 'AuthSig',
+				componentName: 'HelloEarth',
-				slot: 'auth'
-			},
-			{
-				id: 'wallet1',
-				componentName: 'Wallet',
-				slot: 'play',
-				state: {
-					rpcURL: 'https://rpc.gnosischain.com/',
-					pkpPubKey:
-						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
-				}
-			},
-			{
-				id: 'hello',
-				componentName: 'GoogleAuth',
 				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']
 			}
 		]