Fix nextjs bug not allowing users to login

Author: mjarkk

dashboard/pages/login.tsx

@@ -9,8 +9,7 @@ import React, { useEffect, useState } from 'react'
 import { fetcher } from '../src/auth'
 
 export default function Home() {
-	const [apiKeyId, setApiKeyId] = useState('')
-	const [apiKey, setApiKey] = useState('')
+	const [form, setForm] = useState({ id: '', key: '' })
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState('')
 	const router = useRouter()
@@ -20,7 +19,7 @@ export default function Home() {
 		try {
 			setLoading(true)
 			setError('')
-			await fetcher.login(apiKey, apiKeyId)
+			await fetcher.login(form)
 
 			const url = new URL(location.href)
 			const redirectTo = url.searchParams.get('redirectTo')
@@ -37,8 +36,10 @@ export default function Home() {
 	}
 
 	useEffect(() => {
-		setApiKeyId(fetcher.getApiKeyId)
-		setApiKey(fetcher.getApiKey)
+		setForm({
+			id: fetcher.getApiKeyId,
+			key: fetcher.getApiKey,
+		})
 	}, [])
 
 	return (
@@ -51,23 +52,23 @@ export default function Home() {
 			<form noValidate onSubmit={submit} >
 				<p>Insert a api key with the <b>Dashboard</b> role</p>
 				<TextField
-					value={apiKeyId}
+					value={form.id}
 					fullWidth
 					id="id"
 					label="API Key ID"
 					variant="filled"
-					onChange={e => setApiKeyId(e.target.value)}
+					onChange={e => setForm(f => ({ ...f, id: e.target.value }))}
 					disabled={loading}
 					error={!!error}
 				/>
 				<div className="marginTop" >
 					<TextField
-						value={apiKey}
+						value={form.key}
 						fullWidth
 						id="key"
 						label="API Key"
 						variant="filled"
-						onChange={e => setApiKey(e.target.value)}
+						onChange={e => setForm(f => ({ ...f, key: e.target.value }))}
 						disabled={loading}
 						error={!!error}
 						helperText={error}

dashboard/src/auth.ts

@@ -1,21 +1,21 @@
 import { Roles } from './roles'
-import { ApiKey } from './types';
+import { ApiKey } from './types'
 
 class AuthenticatedFetcher {
     private triedToRestoreCredentials = false;
     private apiKeyHashed = '';
     private apiKeyId = '';
 
-    async login(key: string, keyId: string) {
+    async login({ id, key }: { id: string, key: string }) {
         if (!this.triedToRestoreCredentials) this.tryRestoreCredentials();
 
         if (key == '')
             throw 'api key not set'
-        if (keyId == '')
+        if (id == '')
             throw 'api key id not set'
 
         this.apiKeyHashed = await this.hash(key)
-        this.apiKeyId = keyId
+        this.apiKeyId = id
         try {
             const keyInfo = await this.fetch('/api/v1/auth/keyinfo')
 
@@ -150,14 +150,11 @@ class AuthenticatedFetcher {
     }
 
     private async hash(data: string): Promise<string> {
-        return Buffer.from(
-            new Uint8Array(
-                await crypto.subtle.digest(
-                    'SHA-512',
-                    new TextEncoder().encode(data),
-                ),
-            ),
-        ).toString('hex')
+        const textEncoder = new TextEncoder()
+        const dataBuffer = textEncoder.encode(data)
+        const hashedData = await crypto.subtle.digest('SHA-512', dataBuffer)
+        const hashedDataAsUint8 = new Uint8Array(hashedData)
+        return Buffer.from(hashedDataAsUint8).toString('hex')
     }
 }