Refactoring Provider setup of Google Auth

src/lib/components/Composite.svelte

@@ -67,8 +67,6 @@
 	}
 </script>
 
-<!-- Rest of the component markup remains unchanged -->
-
 <div class="grid w-full h-full" style="display: grid; {componentsData.layout || ''}">
 	{#each componentsData.children as component (component.id)}
 		{#await getComponent(component.componentName) then Component}

src/lib/components/GoogleAuth.svelte

@@ -1,23 +1,15 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
-	import {
-		LitAuthClient,
-		BaseProvider,
-		GoogleProvider,
-		isSignInRedirect,
-		getProviderFromUrl
-	} from '@lit-protocol/lit-auth-client';
-	import { LitNodeClient } from '@lit-protocol/lit-node-client';
+	import { isSignInRedirect, getProviderFromUrl } from '@lit-protocol/lit-auth-client';
 	import { IRelayPKP } from '@lit-protocol/types';
 	import { ProviderType } from '@lit-protocol/constants';
 	import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
 	import { createMessage } from '$lib/services/messages';
+	import { setupLitProvider } from '$lib/services/litProviderSetup.ts';
 
 	const redirectUri = 'http://localhost:5173/';
 	let view = 'sign_in';
 	let error;
-	let litAuthClient;
-	let litNodeClient;
 	let currentProviderType;
 	let authMethod;
 	let pkps = [];
@@ -25,7 +17,7 @@
 	let sessionSigs;
 	let isLoading = false;
 
-	let provider: BaseProvider | undefined;
+	let provider;
 
 	onMount(async () => {
 		isLoading = true;
@@ -37,21 +29,8 @@
 		});
 
 		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<GoogleProvider>(ProviderType.Google);
+			provider = await setupLitProvider();
 
 			console.log('Checking if isSignInRedirect...');
 			if (!authMethod && isSignInRedirect(redirectUri)) {
@@ -204,7 +183,6 @@
 			view = 'CREATING_SESSION';
 
 			const litResource = new LitAccessControlConditionResource('*');
-			const provider = litAuthClient.getProvider(currentProviderType);
 			sessionSigs = await provider.getSessionSigs({
 				pkpPublicKey: pkp.publicKey,
 				authMethod,

src/lib/components/Wallet/Wallet.svelte

@@ -1,14 +1,13 @@
 <script>
 	import { onMount } from 'svelte';
 	import { connectWallet } from '$lib/services/wallet/wallet';
-
 	import { getComponentStore } from '$lib/stores/componentStores.ts';
 
 	// please abstract this.
 	export let id;
 	const store = getComponentStore(id);
 
-	let pkpWallet = null;
+	export let pkpWallet = null;
 
 	onMount(async () => {
 		pkpWallet = await connectWallet($store.pkpPubKey, $store.rpcURL);

src/lib/services/litProviderSetup.ts

@@ -0,0 +1,30 @@
+// litProviderSetup.ts
+
+import {
+    LitAuthClient,
+    GoogleProvider,
+    BaseProvider,
+} from '@lit-protocol/lit-auth-client';
+import { ProviderType } from '@lit-protocol/constants';
+import { LitNodeClient } from '@lit-protocol/lit-node-client';
+
+let provider: BaseProvider | undefined;
+
+export async function setupLitProvider() {
+    const litNodeClient = new LitNodeClient({
+        litNetwork: 'serrano',
+        debug: false
+    });
+    await litNodeClient.connect();
+
+    const litAuthClient = new LitAuthClient({
+        litRelayConfig: {
+            relayApiKey: 'test-api-key'
+        },
+        litNodeClient
+    });
+
+    provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
+
+    return provider;
+}

src/lib/services/provider/provider.ts

@@ -81,7 +81,7 @@ export function initProvider(data: ProviderData) {
 	});
 
 	createMessage({
-		text: 'Provider configuration created and autoConnect enabled...',
+		text: 'Chain Provider configuration created and autoConnect enabled...',
 		sender: '$lib/services/provider.ts',
 		type: 'SYSTEM'
 	});

src/lib/services/providerUtils.ts

@@ -1,5 +0,0 @@
-import { LitAuthClient, BaseProvider, GoogleProvider, ProviderType } from '@lit-protocol/lit-auth-client';
-
-export function initializeProvider(litAuthClient: typeof LitAuthClient): BaseProvider {
-    return litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
-}

src/routes/+page.svelte

@@ -4,15 +4,16 @@
 	let componentsData = {
 		layout: `
 			grid-template-areas: 
+			"auth",
 				"login",
 				"play"
-			grid-template-rows: 1fr 1fr;
+			grid-template-rows: auto 1fr 1fr;
 		`,
 		children: [
 			{
-				id: 'login1',
-				componentName: 'GoogleAuth',
-				slot: 'login'
+				id: 'authsig',
+				componentName: 'AuthSig',
+				slot: 'auth'
 			},
 			{
 				id: 'wallet1',
@@ -23,6 +24,11 @@
 					pkpPubKey:
 						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
 				}
+			},
+			{
+				id: 'login1',
+				componentName: 'GoogleAuth',
+				slot: 'login'
 			}
 		]
 	};