Refactor authWithMetamask to enhance modularity and introduce logout functionality
This commit is contained in:
parent
8aff269743
commit
cf1a83006e
63
src/lib/components/Login/Login.svelte
Normal file
63
src/lib/components/Login/Login.svelte
Normal file
@ -0,0 +1,63 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
generateAuthSig,
|
||||
getStoredAuthSig,
|
||||
logout
|
||||
} from '$lib/services/authWithMetamask/authWithMetamask';
|
||||
|
||||
let authSig = null;
|
||||
let error = null;
|
||||
|
||||
async function handleAuth() {
|
||||
try {
|
||||
authSig = await generateAuthSig();
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
authSig = null;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
authSig = getStoredAuthSig();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- AuthSig Address Displayed -->
|
||||
{#if authSig}
|
||||
<div class="flex items-center p-4 mb-4 bg-gray-100 rounded-lg shadow-md">
|
||||
<p class="font-medium text-gray-700">
|
||||
Metamask Address: <span class="text-orange-500">{authSig.address}</span>
|
||||
</p>
|
||||
<button
|
||||
class="px-4 py-2 ml-4 font-bold text-white bg-red-500 rounded-lg shadow-lg hover:bg-red-600"
|
||||
on:click={handleLogout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<!-- Error Message -->
|
||||
{:else if error}
|
||||
<div class="flex items-center p-4 mb-4 bg-red-100 rounded-lg shadow-md">
|
||||
<p class="font-medium text-red-700">{error}</p>
|
||||
</div>
|
||||
<!-- Login Button -->
|
||||
{:else}
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="flex items-center px-4 py-2 m-2 font-bold text-white bg-orange-500 rounded-lg shadow-lg hover:bg-orange-600"
|
||||
on:click={handleAuth}
|
||||
>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg"
|
||||
alt="MetaMask"
|
||||
class="w-6 h-6 mr-2"
|
||||
/>
|
||||
<span class="text-lg">Login</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
78
src/lib/services/authWithMetamask/README.md
Normal file
78
src/lib/services/authWithMetamask/README.md
Normal file
@ -0,0 +1,78 @@
|
||||
# authWithMetamask.ts Documentation
|
||||
|
||||
This module provides utility functions for handling authentication signatures (AuthSigs) with MetaMask using the `@lit-protocol/lit-node-client`.
|
||||
|
||||
## Table of Contents
|
||||
- [authWithMetamask.ts Documentation](#authwithmetamaskts-documentation)
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Dependencies](#dependencies)
|
||||
- [Functions](#functions)
|
||||
- [generateAuthSig](#generateauthsig)
|
||||
- [getStoredAuthSig](#getstoredauthsig)
|
||||
- [logout](#logout)
|
||||
- [Usage](#usage)
|
||||
|
||||
## Dependencies
|
||||
- `@lit-protocol/lit-node-client`: Used to interact with the Lit Protocol and sign authentication messages.
|
||||
- `@lit-protocol/constants`: Provides constants used in this module, specifically `LOCAL_STORAGE_KEYS.AUTH_SIGNATURE` for local storage key.
|
||||
|
||||
## Functions
|
||||
|
||||
### generateAuthSig
|
||||
**Description:**
|
||||
This asynchronous function initiates the signing of an authentication message using MetaMask and stores the signed message (AuthSig) in the browser's local storage.
|
||||
|
||||
**Returns:**
|
||||
An `authSig` object containing the signed message if successful.
|
||||
|
||||
**Throws:**
|
||||
An error with a descriptive message if the signing process fails.
|
||||
|
||||
### getStoredAuthSig
|
||||
**Description:**
|
||||
Retrieves the stored AuthSig from the browser's local storage.
|
||||
|
||||
**Returns:**
|
||||
A parsed `authSig` object if found, or `null` if not.
|
||||
|
||||
### logout
|
||||
**Description:**
|
||||
Clears the stored AuthSig from the browser's local storage.
|
||||
|
||||
**Returns:**
|
||||
`void`
|
||||
|
||||
## Usage
|
||||
|
||||
To use the `authWithMetamask.ts` module in a Svelte component:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
generateAuthSig,
|
||||
getStoredAuthSig,
|
||||
logout
|
||||
} from '$lib/services/authWithMetamask/authWithMetamask';
|
||||
|
||||
let authSig = null;
|
||||
let error = null;
|
||||
|
||||
async function handleAuth() {
|
||||
try {
|
||||
authSig = await generateAuthSig();
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
authSig = null;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
authSig = getStoredAuthSig();
|
||||
});
|
||||
</script>
|
||||
```
|
61
src/lib/services/authWithMetamask/authWithMetamask.ts
Normal file
61
src/lib/services/authWithMetamask/authWithMetamask.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';
|
||||
import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
|
||||
|
||||
function createMessage({ text, sender, type }: { text: string; sender: string; type: string }) {
|
||||
console.log(`[${type}] - ${sender} - ${text}`);
|
||||
}
|
||||
|
||||
export async function generateAuthSig(): Promise<any> {
|
||||
createMessage({
|
||||
text: "Attempting to generate AuthSig using MetaMask.",
|
||||
sender: '$lib/services/authWithMetamask/authWithMetamask.ts',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
|
||||
try {
|
||||
const authSig = await checkAndSignAuthMessage({ chain: 'xdai' });
|
||||
|
||||
createMessage({
|
||||
text: "AuthSig generated and storing in local storage.",
|
||||
sender: '$lib/services/authWithMetamask/authWithMetamask.ts',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
|
||||
localStorage.setItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE, JSON.stringify(authSig));
|
||||
return authSig;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
||||
createMessage({
|
||||
text: `Failed to sign auth message: ${err.message}`,
|
||||
sender: '$lib/services/authWithMetamask/authWithMetamask.ts',
|
||||
type: 'ERROR'
|
||||
});
|
||||
|
||||
throw new Error(`Failed to sign auth message: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
export function getStoredAuthSig(): any | null {
|
||||
createMessage({
|
||||
text: "Fetching stored AuthSig from local storage.",
|
||||
sender: '$lib/services/authWithMetamask/authWithMetamask.ts',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
|
||||
const storedAuthSig = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
|
||||
if (storedAuthSig) {
|
||||
return JSON.parse(storedAuthSig);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function logout(): void {
|
||||
createMessage({
|
||||
text: "Clearing AuthSig from local storage.",
|
||||
sender: '$lib/services/authWithMetamask/authWithMetamask.ts',
|
||||
type: 'SYSTEM'
|
||||
});
|
||||
|
||||
localStorage.removeItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
|
||||
}
|
@ -4,7 +4,7 @@
|
||||
let componentsData = {
|
||||
layout: `
|
||||
grid-template-areas:
|
||||
"app",
|
||||
"login",
|
||||
"main"
|
||||
"footer";
|
||||
grid-template-rows: 150px 1fr auto;
|
||||
@ -12,9 +12,9 @@
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
componentName: 'GoogleAuth',
|
||||
componentName: 'Login',
|
||||
props: {},
|
||||
slot: 'app'
|
||||
slot: 'login'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
Loading…
Reference in New Issue
Block a user