Restrict API Keys from demo accounts

MrBartusek · Apr 24, 2024 · 53df600 · 53df600
1 parent 89686c1
commit 53df600
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 23 deletions.
diff --git a/apps/api/src/api-keys/api-keys.controller.ts b/apps/api/src/api-keys/api-keys.controller.ts
@@ -5,9 +5,11 @@ import { Types } from 'mongoose';
 import { ApiKeyDto } from 'shared-types';
 import { AuthenticatedGuard } from '../auth/guards/authenticated.guard';
 import { ApiKeysService } from './api-keys.service';
+import { NotDemoGuard } from '../models/users/guards/not-demo.guard';
 
 @Controller('api-keys')
 @ApiExcludeController()
+@UseGuards(NotDemoGuard)
 @UseGuards(AuthenticatedGuard)
 export class ApiKeysController {
 	constructor(private readonly apiKeysService: ApiKeysService) {}

diff --git a/apps/client/src/components/User/UserApiKeyForm.tsx b/apps/client/src/components/User/UserApiKeyForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import toast from 'react-hot-toast';
 import { BsClipboard2, BsEye, BsEyeSlash } from 'react-icons/bs';
 import useApiKey from '../../hooks/useApiKey';
@@ -7,10 +7,14 @@ import Form from '../Form/Form';
 import FormField from '../Form/FormField';
 import FormInput from '../Form/FormInput';
 import RegenerateApiKeyButton from '../RegenerateApiKeyButton';
+import useUser from '../../hooks/useUser';
+import { UserContext } from '../../context/UserContext';
+import Alert from '../Helpers/Alert';
 
 function UserApiKeyForm() {
+	const { apiKey, error } = useApiKey();
+	const { user } = useContext(UserContext);
 	const [showKey, setShowKey] = useState(false);
-	const { apiKey } = useApiKey();
 
 	function handleEyeClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
 		event.preventDefault();
@@ -26,28 +30,34 @@ function UserApiKeyForm() {
 
 	return (
 		<div className="my-8">
-			<Form>
-				<FormField
-					label="Your API key"
-					hint="Use this API key for each request"
-				>
-					<FormInput
-						value={apiKey || '...'}
-						type={showKey ? 'text' : 'password'}
-						readOnly
-					/>
-					<div className="flex">
-						<ActionButton
-							icon={showKey ? BsEyeSlash : BsEye}
-							onClick={handleEyeClick}
+			{user.isDemo ? (
+				<Alert>
+					Demo account are restricted from using Public API. Please use regular user account.
+				</Alert>
+			) : (
+				<Form>
+					<FormField
+						label="Your API key"
+						hint="Use this API key for each request"
+					>
+						<FormInput
+							value={error ? 'Failed to get API key' : apiKey || 'Loading...'}
+							type={showKey || !apiKey ? 'text' : 'password'}
+							readOnly
 						/>
-						<ActionButton
-							icon={BsClipboard2}
-							onClick={handleCopy}
-						/>
-					</div>
-				</FormField>
-			</Form>
+						<div className="flex">
+							<ActionButton
+								icon={showKey ? BsEyeSlash : BsEye}
+								onClick={handleEyeClick}
+							/>
+							<ActionButton
+								icon={BsClipboard2}
+								onClick={handleCopy}
+							/>
+						</div>
+					</FormField>
+				</Form>
+			)}
 
 			<RegenerateApiKeyButton />
 		</div>