quic-issues/427e7578-d7bf-49c8-aee9-2dd999e25316
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ create user with public/private key

Browse Source 
+ sign and verify votes and prevent unverified updates
This commit is contained in:
1ynx
2026-04-04 22:36:17 +02:00
parent b5cb0e83e3
commit bc5e2eead8
15 changed files with 10672 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/app.vue
View File

@@ -25,7 +25,8 @@ input {
font-size: 1rem;
}
button {
button,
.button {
background: #3b82f6;
color: white;
border: none;
@@ -36,7 +37,8 @@ button {
transition: background 0.2s;
}
button:hover { background: #2563eb; }
button:hover,
.button:hover { background: #2563eb; }
.status {
font-size: 0.85rem;
@@ -61,6 +63,12 @@ button:hover { background: #2563eb; }
font-size: 0.7rem;
background: #64748b;
}
/* Hide the actual file input */
input[type="file"] {
display: none;
}
</style>
<template>
<div class="poll-container">
@@ -72,23 +80,96 @@ button:hover { background: #2563eb; }
● {{ isConnected ? 'Synced' : 'Waiting for other Peers...' }}
</span>
<span> | Peers online: {{ connectedPeers }}</span>
<h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
<div v-if="user===null" style="margin-top: 10px;">
<button @click="createUser">Create New User</button>
Or
<label title="Select Key File">
<span class="button">Login</span>
<input
type="file"
accept=".pem"
@change="loadUser"
/>
</label>
</div>
</div>
<h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
</header>
<main>
<PollList v-if="!activePollId" @select-poll="selectPoll" />
<Poll v-else :activePollId="activePollId" :pollData="pollData" :addOption="addOption" :vote="vote"/>
<PollList v-if="!activePollId" :userid="user?.userid" @select-poll="selectPoll" />
<Poll v-else :activePollId="activePollId" :userid="user?.userid" :poll-data="pollData" :addOption="addOption" :vote="vote"/>
</main>
</div>
</template>
<script setup lang="ts">
import { v4 as uuidv4 } from 'uuid';
const activePollId = ref<string | null>(null);
const user = shallowRef<UserData | null>(null);
const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId);
const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId,user);
const selectPoll = (id: string) => {
activePollId.value = id;
};
const createUser = async () => {
try {
const keypair : CryptoKeyPair = await generateUserKeyPair();
console.log('keypair:', keypair);
const uuid = uuidv4();
user.value = {
userid: uuid,
private_key: keypair.privateKey,
public_key: keypair.publicKey,
};
const prvKeyString = await exportPrivateKey(keypair.privateKey);
await savePrivateKeyToFile(prvKeyString,uuid+".pem")
const pubKeyString = await exportPublicKey(keypair.publicKey);
await $fetch(`/api/users/${uuid}`, {
method: 'POST',
body: { public_key: pubKeyString }
});
} catch (err) {
user.value = null
console.error("Failed to create new User!", err);
}
};
const loadUser = async (event: Event) => {
const target = event.target as HTMLInputElement;
const file = target.files?.[0];
if (file) {
try {
const content = await file.text();
console.log("File loaded: ");
if (file.name && content) {
try {
const uuid = file.name.replace(".pem", "");
// Standardize the string for the importer
const pkBase64 = content.replace(/-----BEGIN PRIVATE KEY-----|-----END PRIVATE KEY-----/g, "").replace(/\s+/g, "");
const key = await stringToCryptoKey(pkBase64, "private");
user.value = {
userid: uuid,
private_key: key,
public_key: undefined, // Note: You might need to import a pub key too!
};
console.log("Login successful for:", uuid);
} catch (err) {
console.error("Crypto Import Error:", err);
alert("The file content is not a valid Private Key.");
}
}
} catch (e) {
console.error("Failed to read file", e);
}
}
};
</script>

7
app/components/Poll.vue
View File

@@ -44,7 +44,7 @@
<div>
<h2 class="poll-title">Poll: {{ activePollId }}</h2>
<p v-if="Object.keys(pollData).length==0">Note: Add at least one Option to save the Poll.</p>
<form @submit.prevent="handleAddNewOption" class="add-option-form">
<form @submit.prevent="handleAddNewOption" class="add-option-form" v-if="userid">
<input v-model="newOption" placeholder="Enter a new poll option..." required />
<button type="submit">Add Option</button>
</form>
@@ -54,7 +54,7 @@
<span class="option-name">{{ optionName }}</span>
<div class="vote-section">
<span class="vote-count">{{ votes.length }} {{ votes.length === 1 ? 'vote' : 'votes' }}</span>
<button @click="vote(String(optionName),String(userGuid))" class="vote-btn" :disabled="voted(votes)">+1</button>
<button @click="vote(String(optionName))" class="vote-btn" :disabled="userid==undefined || voted(votes)">+1</button>
</div>
</li>
</ul>
@@ -71,11 +71,10 @@
newOption.value = '';
};
const userGuid = useCookie('user_guid');
const voted = (votes: SignedData<VoteData>[]) => {
for(let vote of votes){
if(vote.data.userid == userGuid.value){
if(vote.data.userid == props.userid){
return true;
}
}

4
app/components/PollList.vue
View File

@@ -27,7 +27,7 @@
</li>
</ul>
<p v-else class="empty-state">No polls found. Create the first one!</p>
<div class="create-poll">
<div class="create-poll" v-if="userid !== undefined">
<input
v-model="newPollId"
placeholder="Enter new poll name..."
@@ -39,6 +39,8 @@
</template>
<script setup lang="ts">
import type { PollListProps } from '@/utils/types'
const props = defineProps<PollListProps>()
const newPollId = ref('');
const polls = ref<string[]>([]);

62
app/composables/usePoll.ts
View File

@@ -2,7 +2,7 @@
import { ref, watch, onUnmounted } from 'vue';
import * as Y from 'yjs';
export const usePoll = (pollId: Ref<string | null>) => {
export const usePoll = (pollId: Ref<string | null>, user: Ref<UserData | null>) => {
const pollData = ref<PollData>({});
const isConnected = ref(false);
const connectionAttempFailed = ref(false);
@@ -26,7 +26,10 @@ export const usePoll = (pollId: Ref<string | null>) => {
// 1. Fetch Snapshot from Nuxt API
try {
const response = await $fetch<{ update: number[] | null }>(`/api/polls/${id}`);
const response = await $fetch<{ update: number[] | null }>(`/api/polls/${id}`).catch((e) => {
console.error("Failed to get poll: " + id,e)
});
//trust the server without verification.
if (response?.update) {
Y.applyUpdate(ydoc, new Uint8Array(response.update));
}
@@ -37,20 +40,28 @@ export const usePoll = (pollId: Ref<string | null>) => {
yMap = ydoc.getMap<SignedData<VoteData>[]>('shared-poll');
// 2. Local State Sync
yMap.observe(() => {
pollData.value = yMap!.toJSON();
yMap.observe(async () => {
await performUpdateAndVerify();
saveStateToServer(id);
});
pollData.value = yMap.toJSON();
await performUpdateAndVerify();
// 3. P2P Connection
const { WebrtcProvider } = await import('y-webrtc');
provider = new WebrtcProvider(`nuxt-p2p-${id}`, ydoc, {
signaling: ["ws:localhost:4444", "ws:lynxpi.ddns.net:4444"]
signaling: ["ws://localhost:4444", "ws://lynxpi.ddns.net:4444"]
});
provider.on('synced', (arg: {synced: boolean}) => isConnected.value = arg.synced);
provider.on('peers', (data: any) => connectedPeers.value = data.webrtcPeers.length + 1);
provider.on('synced', (arg: {synced: boolean}) => {
isConnected.value = arg.synced;
console.log('Connection synced:', arg.synced) // "connected" or "disconnected"
});
provider.on('status', (event: { connected: boolean }) => {
console.log('Connection status:', event.connected) // "connected" or "disconnected"
})
provider.on('peers', (data: any) => {
connectedPeers.value = data.webrtcPeers.length + 1
});
};
const saveStateToServer = async (id: string) => {
@@ -59,7 +70,9 @@ export const usePoll = (pollId: Ref<string | null>) => {
await $fetch(`/api/polls/${id}`, {
method: 'POST',
body: { update: Array.from(stateUpdate) }
}).catch(() => {});
}).catch((e) => {
console.error("Failed to update poll",e)
});
};
// Watch for ID changes (e.g., user clicks a link or goes back)
@@ -77,12 +90,29 @@ export const usePoll = (pollId: Ref<string | null>) => {
if (yMap && !yMap.has(optionName)) yMap.set(optionName, []);
};
const vote = (optionName: string, uuid: string) => {
if (yMap?.has(optionName)) {
var voteData : SignedData<VoteData>[] | undefined = yMap.get(optionName)
if(voteData != undefined){
const performUpdateAndVerify = async () => {
const pollDataUpdate = yMap!.toJSON();
console.log("Poll Data Update: ", pollDataUpdate)
for(var option in pollDataUpdate){
console.log("verifying votes for option: " + option);
const votes = pollDataUpdate[option] || [];
const verified = await verifyAllVotesForOption(votes);
if(!verified){
console.error("Failed to verify option: "+option)
return;
}
}
console.log("All options verified! :)")
pollData.value = pollDataUpdate
}
const vote = async (optionName: string) => {
const currentUser = user.value;
if (currentUser != undefined && yMap?.has(optionName)) {
const voteData = [...(yMap.get(optionName) || [])];
if(voteData != undefined && currentUser.private_key){
var unsignedVoteData : VoteData = {
userid: uuid,
userid: currentUser.userid,
timestamp: new Date().toISOString()
}
var newVote : SignedData<VoteData> = {
@@ -90,7 +120,9 @@ export const usePoll = (pollId: Ref<string | null>) => {
signature: "",
}
voteData?.push(newVote)
yMap.set(optionName, voteData);
const signature = await signVote(voteData,currentUser.private_key);
newVote.signature=signature
yMap?.set(optionName, voteData);
}
}
};

2
app/composables/user.ts Normal file
View File

@@ -0,0 +1,2 @@
export const user = (user: Ref<UserData | null>) => {
}

145
app/utils/crypto.ts
View File

@@ -39,4 +39,149 @@ export const verifyVote = async (data: any, signatureStr: string, publicKey: Cry
signature,
encodedData
);
};
/**
* Verifies a specific vote within an array of votes by
* reconstructing the "signed state" at that point in time.
*/
export const verifyChainedVote = async (
voteData: SignedData<VoteData>[],
index: number
) => {
const voteToVerify = voteData[index];
console.log("Verifying vote: " + voteToVerify)
if(voteToVerify) {
// 1. Reconstruct the exact data state the user signed
// We need the array exactly as it was when they pushed their vote
const historicalState = voteData.slice(0, index + 1).map((v, i) => {
if (i === index) {
// For the current vote, the signature must be empty string
// because it wasn't signed yet when passed to signVote
return { ...v, signature: "" };
}
return v;
});
try {
// 2. Fetch public key
const response = await $fetch<{ public_key: string }>(`/api/users/${voteToVerify.data.userid}`);
console.log("Got key: ",response)
const pubKey = await stringToCryptoKey(response.public_key, 'public');
console.log("Using pubKey to verify Vote.")
// 3. Verify: Does this historicalState match the signature?
return await verifyVote(historicalState, voteToVerify.signature, pubKey);
} catch (err) {
console.error("Verification failed")
console.error(err);
return false;
}
}
console.error("Vote is undefined or null");
return false;
};
export const verifyAllVotesForOption = async (votes: SignedData<VoteData>[]) => {
console.log("verifying votes for option ",votes);
for (let i = votes.length-1; i >= 0 ; i--) {
const isValid = await verifyChainedVote(votes, i);
if(!isValid){
console.error("Error! Invalid Vote at: " + i,votes)
return false;
}
}
return true;
};
// Helper to convert ArrayBuffer to Base64 string
const bufferToBase64 = (buf: ArrayBuffer) =>
window.btoa(String.fromCharCode(...new Uint8Array(buf)));
export const exportPublicKey = async (key: CryptoKey) => {
// Export Public Key
const exportedPublic = await window.crypto.subtle.exportKey("spki", key);
const publicKeyString = bufferToBase64(exportedPublic);
return publicKeyString;
};
export const exportPrivateKey = async (key: CryptoKey) => {
// Export Private Key
const exportedPrivate = await window.crypto.subtle.exportKey("pkcs8", key);
const privateKeyString = bufferToBase64(exportedPrivate);
return privateKeyString;
};
/**
* Converts a Base64 string back into a usable CryptoKey object
* @param keyStr The Base64 string (without PEM headers)
* @param type 'public' or 'private'
*/
export const stringToCryptoKey = async (keyStr: string, type: 'public' | 'private'): Promise<CryptoKey> => {
// 1. Convert Base64 string to a Uint8Array (binary)
const binaryString = window.atob(keyStr);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
// 2. Identify the format based on the key type
// Public keys usually use 'spki', Private keys use 'pkcs8'
const format = type === 'public' ? 'spki' : 'pkcs8';
const usages: KeyUsage[] = type === 'public' ? ['verify'] : ['sign'];
// 3. Import the key
return await window.crypto.subtle.importKey(
format,
bytes.buffer,
{
name: "RSASSA-PKCS1-v1_5",
hash: "SHA-256",
},
true, // extractable (set to false if you want to lock it in memory)
usages
);
};
export const savePrivateKeyToFile = (privateKeyStr: string, filename: string) => {
// Optional: Wrap in PEM headers for standard formatting
const pemHeader = "-----BEGIN PRIVATE KEY-----\n";
const pemFooter = "\n-----END PRIVATE KEY-----";
const fileContent = pemHeader + privateKeyStr + pemFooter;
const blob = new Blob([fileContent], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
// Cleanup
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
export const loadPrivateKeyFromFile = async (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target?.result as string;
// Clean up the string by removing PEM headers and newlines
const cleanKey = content
.replace("-----BEGIN PRIVATE KEY-----", "")
.replace("-----END PRIVATE KEY-----", "")
.replace(/\s+/g, ""); // Removes all whitespace/newlines
resolve(cleanKey);
};
reader.onerror = () => reject("Error reading file");
reader.readAsText(file);
});
};

13
app/utils/types.ts
View File

@@ -1,8 +1,13 @@
export interface PollProps {
userid: string | undefined,
activePollId: string,
pollData: PollData,
addOption: (name: string) => void,
vote: (optionName: string,uuid: string) => void
vote: (optionName: string) => void
}
export interface PollListProps {
userid: string | undefined,
}
export interface PollData extends Record<string, SignedData<VoteData>[]> {
@@ -22,4 +27,10 @@ export interface OptionData {
userid: string,
timestamp: string,
optionName: string
}
export interface UserData {
userid: string,
private_key: CryptoKey | undefined,
public_key: CryptoKey | undefined
}