From 293180c2b5702e1cb34499ab5953c7d4656e7b4a Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Fri, 1 Sep 2023 17:38:22 +0200 Subject: [PATCH] major refactoring adding and finishing xstate signin flow --- package.json | 1 + pnpm-lock.yaml | 9 ++ src/lib/GoogleAuth.svelte | 125 --------------------------- src/lib/GooglePKP.svelte | 118 ------------------------- src/lib/GoogleSession.svelte | 85 ------------------ src/lib/Signer.svelte | 120 ------------------------- src/lib/Wallet.svelte | 85 ++++++++++++------ src/lib/machines/walletMachine.ts | 23 ++++- src/lib/services/signInWithGoogle.ts | 21 ++++- src/lib/stores.js | 2 + src/routes/+layout.svelte | 2 - 11 files changed, 107 insertions(+), 484 deletions(-) delete mode 100644 src/lib/GoogleAuth.svelte delete mode 100644 src/lib/GooglePKP.svelte delete mode 100644 src/lib/GoogleSession.svelte delete mode 100644 src/lib/Signer.svelte diff --git a/package.json b/package.json index 1981415..8209e2b 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "dependencies": { "@graphql-tools/graphql-file-loader": "^8.0.0", "@graphql-tools/load": "^8.0.0", + "@iconify/icons-ion": "^1.2.10", "@iconify/svelte": "^3.1.4", "@lit-protocol/auth-helpers": "^2.2.50", "@lit-protocol/constants": "^2.2.50", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1f0537..db6016a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,9 @@ dependencies: '@graphql-tools/load': specifier: ^8.0.0 version: 8.0.0(graphql@16.8.0) + '@iconify/icons-ion': + specifier: ^1.2.10 + version: 1.2.10 '@iconify/svelte': specifier: ^3.1.4 version: 3.1.4(svelte@3.54.0) @@ -2611,6 +2614,12 @@ packages: dependencies: '@hapi/hoek': 9.3.0 + /@iconify/icons-ion@1.2.10: + resolution: {integrity: sha512-8vd2gihc8fkugNH+bqnNpgAbXJl2AyTiGRgpDG/ELDUyscvUefEE/kW7uz6NnPUYH293vR+tdiruLIgvVsQfNA==} + dependencies: + '@iconify/types': 2.0.0 + dev: false + /@iconify/svelte@3.1.4(svelte@3.54.0): resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==} peerDependencies: diff --git a/src/lib/GoogleAuth.svelte b/src/lib/GoogleAuth.svelte deleted file mode 100644 index f96a165..0000000 --- a/src/lib/GoogleAuth.svelte +++ /dev/null @@ -1,125 +0,0 @@ - - -
-
- {#if view === "SIGN_IN"} - - {/if} - {#if view === "READY"} -
-

Your PKP Address:

-

{currentPKP.ethAddress}

-
- {/if} -
-

{status}

-
-
-
diff --git a/src/lib/GooglePKP.svelte b/src/lib/GooglePKP.svelte deleted file mode 100644 index 68802b5..0000000 --- a/src/lib/GooglePKP.svelte +++ /dev/null @@ -1,118 +0,0 @@ - - -
-
- -
-
-
-

{status}

-
-
-
diff --git a/src/lib/GoogleSession.svelte b/src/lib/GoogleSession.svelte deleted file mode 100644 index 2dc95c6..0000000 --- a/src/lib/GoogleSession.svelte +++ /dev/null @@ -1,85 +0,0 @@ - - - diff --git a/src/lib/Signer.svelte b/src/lib/Signer.svelte deleted file mode 100644 index 4ecc488..0000000 --- a/src/lib/Signer.svelte +++ /dev/null @@ -1,120 +0,0 @@ - - - -{#if status} -
-

Status: {status}

-
-{/if} -{#if messageSignature} -
-

Signature

- 
{JSON.stringify(messageSignature)}
-
-
-{/if} diff --git a/src/lib/Wallet.svelte b/src/lib/Wallet.svelte index 4e6bf61..b3980d0 100644 --- a/src/lib/Wallet.svelte +++ b/src/lib/Wallet.svelte @@ -2,8 +2,15 @@ import { useMachine } from "@xstate/svelte"; import walletMachine from "./machines/walletMachine"; import { onMount } from "svelte"; + import Icon from "@iconify/svelte"; + + import { + signInWithGoogle, + startSignIn as startSignInService, + } from "./services/signInWithGoogle"; const { state, send } = useMachine(walletMachine); + $: { if ($state.context.pkps && $state.context.sessionSigs) { localStorage.setItem( @@ -21,38 +28,62 @@ send({ type: "RELOAD", ...me }); } }); + + async function startSignIn() { + startSignInService.set(true); + await signInWithGoogle(); + } + function clearSession() { + send("LOGOUT"); + } -{#if $state.matches("creatingSession")} -
-

Authenticated successfully. Selecting or minting PKP...

-
-{:else if $state.matches("sessionAvailable")} -
-

Signed in successfully. Here is your PKP:

- 
{JSON.stringify($state.context.pkps[0].ethAddress, null, 2)}
-

Session available. Here are your session signatures:

-
- {#each Object.keys($state.context.sessionSigs) as key} -
-
-
-

{key}

-

- {$state.context.sessionSigs[key].sig} +{#if $state.matches("sessionAvailable") || $state.matches("creatingSession") || $state.matches("signIn")} + {#if $state.matches("signIn")} +

+ +
+ {:else if $state.context.pkps} +
+
+
+
+

+ Address: + {$state.context.pkps[0].ethAddress} +

+

+ Provider: + {$state.context.providerName}

- {/each} + +
+
+ {:else if $state.matches("sessionExpired")} +
+

Error creating session. Please try again.

+ 
{JSON.stringify($state.context.error, null, 2)}
+
+ {/if} +{:else} +
+
+
-{:else if $state.matches("sessionExpired")} -
-

Error creating session. Please try again.

- 
{JSON.stringify($state.context.error, null, 2)}
-
{/if} diff --git a/src/lib/machines/walletMachine.ts b/src/lib/machines/walletMachine.ts index b2e1775..0277667 100644 --- a/src/lib/machines/walletMachine.ts +++ b/src/lib/machines/walletMachine.ts @@ -2,6 +2,7 @@ import { createMachine, assign } from 'xstate'; import { signInWithGoogle } from '../services/signInWithGoogle'; import { createSession } from '../services/createSession'; +import { goto } from '$app/navigation'; const walletMachine = createMachine({ id: 'wallet', @@ -11,7 +12,8 @@ const walletMachine = createMachine({ providerName: null, authMethod: null, pkps: [], - sessionSigs: null + sessionSigs: null, + redirect: false }, states: { signIn: { @@ -83,11 +85,26 @@ const walletMachine = createMachine({ on: { EXPIRED: { target: 'sessionExpired', - cond: (context) => context.sessionSigs === null + cond: (context) => context.sessionSigs && Object.values(context.sessionSigs).every(sig => sig.expired) + }, + LOGOUT: 'sessionExpired' + } + }, + sessionExpired: { + entry: assign({ + sessionSigs: null, + redirect: true + }), + after: { + 0: { + target: 'signIn', + actions: () => { + localStorage.removeItem('me'); + window.location.href = '/'; + } } } }, - sessionExpired: {} }, }, { services: { diff --git a/src/lib/services/signInWithGoogle.ts b/src/lib/services/signInWithGoogle.ts index 9fa7c61..fea4b38 100644 --- a/src/lib/services/signInWithGoogle.ts +++ b/src/lib/services/signInWithGoogle.ts @@ -1,23 +1,36 @@ // src/lib/services/signInWithGoogle.ts import { connectProvider } from "$lib/setupLit"; import { isSignInRedirect, getProviderFromUrl } from "@lit-protocol/lit-auth-client"; +import { writable } from 'svelte/store'; + +export let startSignIn = writable(false); + +let providerName; export const signInWithGoogle = async () => { if (typeof window !== 'undefined') { try { let provider = await connectProvider(); if (isSignInRedirect("http://localhost:3000/")) { - const providerName = getProviderFromUrl(); + providerName = getProviderFromUrl(); if (providerName) { const authMethod = await provider.authenticate(); - return { authMethod, provider, providerName }; // Return the data + return { authMethod, provider, providerName }; } } else { - await provider.signIn(); + let shouldStartSignIn = false; + startSignIn.subscribe(value => { + shouldStartSignIn = value; + }); + if (!providerName && shouldStartSignIn) { + await provider.signIn(); + } } } catch (err) { - console.error(err); + console.error('Error during sign-in:', err); throw err; + } finally { + startSignIn.set(false); } } else { throw new Error("Cannot sign in with Google in a non-browser environment."); diff --git a/src/lib/stores.js b/src/lib/stores.js index fcecd40..f0a4496 100644 --- a/src/lib/stores.js +++ b/src/lib/stores.js @@ -4,6 +4,8 @@ export const signRequest = writable({json: {}}); export const signedMessages = writable([]) +export const redirectStore = writable(false); + export const googleSession = writable({ activeSession: false }); \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f36b2cf..3edeb5e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,8 +7,6 @@ import { onMount } from "svelte"; import { initChainProvider } from "$lib/setupChainProvider"; import { googleSession } from "$lib/stores.js"; - import GooglePKP from "$lib/GooglePKP.svelte"; - import GoogleSession from "$lib/GoogleSession.svelte"; import Wallet from "$lib/Wallet.svelte"; let activeSession = false;