tiding up GoogleAuth
This commit is contained in:
Samuel Andert
@ -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;
|
||||
|
||||
onMount(async () => {
|
||||
provider = await setupLitProvider.setupLitProvider();
|
||||
isLoading = true;
|
||||
console.log('Component mounted.');
|
||||
function logMessage(text, type = 'SYSTEM') {
|
||||
console.log(text);
|
||||
createMessage({
|
||||
text: 'Component mounted.',
|
||||
text,
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
console.log('Checking if isSignInRedirect...');
|
||||
if (!authMethod && isSignInRedirect(redirectUri)) {
|
||||
console.log('Redirect detected, handling...');
|
||||
createMessage({
|
||||
text: 'Redirect detected, handling...',
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
provider = await setupLitProvider.setupLitProvider();
|
||||
|
||||
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.');
|
||||
createMessage({
|
||||
text: 'No redirect detected.',
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
logMessage('No redirect detected.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
setError(err);
|
||||
}
|
||||
});
|
||||
|
||||
async function authWithGoogle() {
|
||||
isLoading = true;
|
||||
error = null;
|
||||
try {
|
||||
await provider.signIn();
|
||||
await handleRedirect(ProviderType.Google);
|
||||
} catch (err) {
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
setError(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRedirect(providerName: string) {
|
||||
isLoading = true;
|
||||
createMessage({
|
||||
text: `Handling redirect for ${providerName}`,
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
logMessage(`Handling redirect for ${providerName}`);
|
||||
|
||||
// As we're now using the global provider, we no longer need to fetch it again based on the providerName
|
||||
currentProviderType = providerName as ProviderType;
|
||||
if (!provider) throw new Error('Invalid provider.');
|
||||
authMethod = await provider.authenticate();
|
||||
await tick();
|
||||
|
||||
try {
|
||||
console.log('Handling redirect...');
|
||||
view = 'fetching';
|
||||
pkps = await provider.fetchPKPsThroughRelayer(authMethod);
|
||||
view = pkps.length > 0 ? 'fetched' : 'NO_PKPS';
|
||||
|
||||
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
|
||||
|
||||
// Fetch PKPs associated with social account
|
||||
view = 'fetching';
|
||||
const fetchedPkps: IRelayPKP[] = await provider.fetchPKPsThroughRelayer(authMethod);
|
||||
await tick(); // Allow Svelte to update the view
|
||||
|
||||
if (fetchedPkps.length > 0) {
|
||||
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'
|
||||
});
|
||||
logMessage(`Fetched PKPs: ${pkps.length}`);
|
||||
}
|
||||
|
||||
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);
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
setError(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function createSession(pkp: IRelayPKP) {
|
||||
isLoading = true;
|
||||
error = null;
|
||||
try {
|
||||
console.log('Creating session...');
|
||||
createMessage({
|
||||
text: 'Creating session...',
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
view = 'CREATING_SESSION';
|
||||
logMessage('Creating session...');
|
||||
view = 'CREATING_SESSION';
|
||||
|
||||
sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
|
||||
currentPKP = pkp;
|
||||
sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
|
||||
currentPKP = pkp;
|
||||
|
||||
createMessage({
|
||||
text: 'Session created.',
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
view = 'SESSION_CREATED';
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
logMessage('Session created.');
|
||||
view = 'SESSION_CREATED';
|
||||
}
|
||||
|
||||
function setError(err) {
|
||||
console.error(err);
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
}
|
||||
|
||||
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)}>
|
||||
{pkp.ethAddress}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#each pkps as pkp}
|
||||
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
|
||||
{/each}
|
||||
{:else if view === 'MINTING'}
|
||||
<h1>Minting your PKP...</h1>
|
||||
{:else if view === 'MINTED'}
|
||||
|
||||
Reference in New Issue
Block a user