126 lines
3.5 KiB
Svelte
126 lines
3.5 KiB
Svelte
<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 { mintPkp } from "./mintPkp";
|
|
import { createLitSession } from "./createLitSession";
|
|
import { connectProvider } from "./setupLit";
|
|
|
|
const redirectUri = "http://localhost:3000/";
|
|
|
|
let sessionSigs = null;
|
|
let currentPKP, authMethod, provider;
|
|
let status = "Initializing...";
|
|
let pkps: IRelayPKP[] = [];
|
|
let view = "SIGN_IN";
|
|
|
|
onMount(async () => {
|
|
initialize();
|
|
|
|
const storedSession = localStorage.getItem("google-session");
|
|
const storedPKP = localStorage.getItem("current-pkp");
|
|
if (storedSession != null) {
|
|
sessionSigs = JSON.parse(storedSession);
|
|
currentPKP = JSON.parse(storedPKP);
|
|
view = "READY";
|
|
} else {
|
|
view = "SIGN_IN";
|
|
}
|
|
});
|
|
|
|
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 {
|
|
currentPKP = pkp; // Assign the selected PKP to currentPKP
|
|
createLitSession(provider, pkp.publicKey, authMethod).then((sigs) => {
|
|
sessionSigs = sigs;
|
|
// Store sessionSigs and currentPKP in localStorage
|
|
localStorage.setItem("google-session", JSON.stringify(sessionSigs));
|
|
localStorage.setItem("current-pkp", JSON.stringify(currentPKP));
|
|
});
|
|
status = "Session created successfully.";
|
|
view = "SIGN_IN";
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
</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 Address:</h3>
|
|
<p>{currentPKP.ethAddress}</p>
|
|
</div>
|
|
{/if}
|
|
<div class="mt-4 text-center">
|
|
<p>{status}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|