Refactored GoogleAuth Signup Flow and added Clear Session

src/lib/GoogleAuth.svelte

@@ -8,7 +8,6 @@
   import Icon from "@iconify/svelte";
   import { createLitSession } from "./createLitSession";
   import { connectProvider } from "./setupLit";
-  import Signer from "./Signer.svelte";
 
   const redirectUri = "http://localhost:3000/";
 
@@ -17,14 +16,12 @@
   let status = "Initializing...";
   let pkps: IRelayPKP[] = [];
   let view = "SIGN_IN";
-  let messageToSign = { user: "Sam", loggedIn: true };
 
   onMount(async () => {
     initialize();
 
     const storedSession = localStorage.getItem("google-session");
     const storedPKP = localStorage.getItem("current-pkp");
-    console.log("stored session: " + storedSession);
     if (storedSession != null) {
       sessionSigs = JSON.parse(storedSession);
       currentPKP = JSON.parse(storedPKP);
@@ -118,8 +115,6 @@
         <h3>Your PKP Address:</h3>
         <p>{currentPKP.ethAddress}</p>
       </div>
-      Signer
-      <Signer {messageToSign} />
     {/if}
     <div class="mt-4 text-center">
       <p>{status}</p>

src/lib/GooglePKP.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    isSignInRedirect,
+    getProviderFromUrl,
+  } from "@lit-protocol/lit-auth-client";
+  import type { IRelayPKP } from "@lit-protocol/types";
+  import Icon from "@iconify/svelte";
+  import { createLitSession } from "./createLitSession";
+  import { connectProvider } from "./setupLit";
+
+  const redirectUri = "http://localhost:3000/";
+
+  let authMethod, provider;
+  let status = "Initializing...";
+  let pkps: IRelayPKP[] = [];
+  let view = "";
+  let myPKP;
+
+  onMount(async () => {
+    initialize();
+    myPKP = JSON.parse(localStorage.getItem("myPKP"));
+    if (myPKP.active) {
+      view = "READY";
+    }
+  });
+
+  $: {
+    if (myPKP) {
+      if (myPKP && myPKP.sessionSigs) {
+        myPKP.parsedSigs = parseSessionSigs(myPKP.sessionSigs);
+        myPKP.active = myPKP.parsedSigs.some((sig) => !sig.isExpired);
+        if (!myPKP.active) {
+          view = "SIGN_IN";
+        }
+      } else {
+        myPKP.active = false;
+        view = "SIGN_IN";
+      }
+      localStorage.setItem("myPKP", JSON.stringify(myPKP));
+    }
+  }
+
+  // Add this function
+  function parseSessionSigs(jsonData) {
+    let sessionList = Object.values(jsonData).map((session) => {
+      let sessionData = JSON.parse(session.signedMessage);
+      let expirationDate = new Date(sessionData.expiration);
+      let isExpired = expirationDate < new Date();
+      return {
+        sig: session.sig,
+        expiration: sessionData.expiration,
+        isExpired: isExpired,
+      };
+    });
+    return sessionList;
+  }
+
+  async function initialize() {
+    status = "Connecting to Google provider...";
+    try {
+      provider = await connectProvider();
+      status = "Connected to Google provider.";
+      if (isSignInRedirect(redirectUri)) {
+        const providerName = getProviderFromUrl();
+        if (providerName) {
+          await handleRedirect(providerName);
+        }
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  async function authWithGoogle() {
+    try {
+      if (!provider) {
+        provider = await connectProvider();
+        status = "Reconnected to Google provider.";
+      }
+      await provider.signIn();
+      status = "Signing in with Google...";
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  async function handleRedirect(providerName: string) {
+    try {
+      if (!provider) throw new Error("Invalid provider.");
+      authMethod = await provider.authenticate();
+      status = "Authenticated successfully.";
+      pkps = await provider.fetchPKPsThroughRelayer(authMethod);
+      status = "Fetching your Google PKP...";
+      if (pkps.length === 0) {
+        status = "No PKPs found. Minting new PKP...";
+        await mint();
+      } else {
+        // Use the first PKP directly
+        await createSession(pkps[0]);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  async function mint() {
+    const newPKP: IRelayPKP = await mintPkp(provider, authMethod);
+    pkps = [...pkps, newPKP];
+    status = "New PKP minted.";
+    await createSession(newPKP);
+  }
+
+  async function createSession(pkp: IRelayPKP) {
+    try {
+      const currentPKP = pkp; // Assign the selected PKP to currentPKP
+      const sessionSigs = await createLitSession(
+        provider,
+        pkp.publicKey,
+        authMethod
+      );
+      // Add the sessionSigs and PKP to localstorage
+      localStorage.setItem(
+        "myPKP",
+        JSON.stringify({
+          provider: "google",
+          pkp: currentPKP,
+          sessionSigs: sessionSigs,
+          active: true,
+        })
+      );
+      myPKP = JSON.parse(localStorage.getItem("myPKP"));
+      status = "Session created successfully.";
+      view = "READY";
+    } catch (err) {
+      console.log(err);
+    }
+  }
+  function clearSession() {
+    localStorage.removeItem("myPKP");
+    myPKP = null;
+    view = "SIGN_IN";
+  }
+</script>
+
+<div class="flex items-center justify-center h-screen">
+  <div>
+    {#if view === "SIGN_IN"}
+      <button on:click={authWithGoogle} class="btn variant-filled">
+        <span><Icon icon="flat-color-icons:google" /></span>
+        <span>Sign in with Google</span>
+      </button>
+    {/if}
+    {#if view === "READY"}
+      <div>
+        <h3>Your PKP:</h3>
+        <p>Address: {myPKP.pkp.ethAddress}</p>
+        <p>Provider: {myPKP.provider}</p>
+        <button on:click={clearSession} class="btn variant-filled"
+          >Clear Session</button
+        >
+      </div>
+    {/if}
+    <div class="mt-4 text-center">
+      <p>{status}</p>
+    </div>
+  </div>
+</div>

src/lib/Signer.svelte

@@ -2,11 +2,9 @@
 <script lang="ts">
   import { ethers } from "ethers";
   import { onMount } from "svelte";
-  import { signRequest } from "./stores.js";
-  // import { fetchBalance, serialize } from "@wagmi/core";
-
-  export let messageToSign = {};
+  import { signRequest, signedMessages } from "./stores.js";
 
+  let messageToSign = {};
   let currentPKP;
   let sessionSigs;
   let status = "";
@@ -69,6 +67,11 @@
         v: result.recid,
       });
 
+      signedMessages.update((messages) => [
+        ...messages,
+        { json: messageToSign, signature: messageSignature },
+      ]);
+
       // verify();
     } catch (err) {
       console.error(err);
@@ -94,55 +97,15 @@
     }
   }
 
-  signRequest.subscribe((value) => {
-    if (value) {
-      signRequest.set(false);
-      signMessageWithPKP();
+  signRequest.subscribe(({ json }) => {
+    if (messageToSign && Object.keys(json).length > 0) {
+      signRequest.set({ json: {} });
+      messageToSign = json;
+      signMessageWithPKP(json);
     }
   });
-
-  // async function getJWT() {
-  //   var unifiedAccessControlConditions = [
-  //     {
-  //       conditionType: "evmBasic",
-  //       contractAddress: "",
-  //       standardContractType: "",
-  //       chain: "xdai",
-  //       method: "eth_getBalance",
-  //       parameters: [":userAddress", "latest"],
-  //       returnValueTest: {
-  //         comparator: ">=",
-  //         value: "10000000000000",
-  //       },
-  //     },
-  //   ];
-
-  //   // Saving signing condition
-  //   await litNodeClient.saveSigningCondition({
-  //     unifiedAccessControlConditions,
-  //     sessionSigs,
-  //     resourceId: { test: "hello" },
-  //     chain: "litSessionSign",
-  //   });
-
-  //   // Retrieving a signature
-  //   let jwt = await litNodeClient.getSignedToken({
-  //     unifiedAccessControlConditions,
-  //     sessionSigs,
-  //     resourceId: { test: "hello" },
-  //   });
-
-  //   alert("JWT: " + jwt);
-  // }
 </script>
 
-<button on:click={signMessageWithPKP}>Sign Message</button>
-<!-- <button on:click={getJWT}>Get JWT</button> -->
-
-{#if messageToSign}
-  <pre>{JSON.stringify(messageToSign)}</pre>
-{/if}
-
 {#if status}
   <div class="mt-4 text-center">
     <p>Status: {status}</p>
@@ -150,7 +113,7 @@
 {/if}
 {#if messageSignature}
   <div class="mt-4 text-center">
-    <h3>Signature</h3>
+    <p>Signature</p>
     <pre>{JSON.stringify(messageSignature)}</pre>
   </div>
   <button on:click={verify}>Verify</button><br />

src/lib/stores.js

@@ -1,3 +1,5 @@
 import { writable } from 'svelte/store';
 
-export const signRequest = writable(false);
+export const signRequest = writable({json: {}});
+
+export const signedMessages = writable([])

src/routes/+page.svelte

@@ -1,11 +1,23 @@
 <script>
-  import GoogleAuth from "$lib/GoogleAuth.svelte";
-  import { signRequest } from "$lib/stores.js";
+  import GooglePKP from "$lib/GooglePKP.svelte";
+  // import { signRequest, signedMessages } from "$lib/stores.js";
 
-  function trigger() {
-    signRequest.set(true);
-  }
+  // function trigger() {
+  //   signRequest.set({ json: { hello: "test" } });
+  // }
 </script>
 
-<GoogleAuth />
-<button on:click={trigger}>Sign Request</button>
+<GooglePKP />
+<!-- <button on:click={trigger}>Sign Request</button> -->
+
+<!-- <ul>
+  {#each $signedMessages as { json, signature }}
+    <li>
+      <strong>Message:</strong>
+      {JSON.stringify(json)}
+      <br />
+      <strong>Signature:</strong>
+      {JSON.stringify(signature)}
+    </li>
+  {/each}
+</ul> -->