Skip to content

fix: remove the hand holding from create keys #5108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
perkinsjr merged 1 commit into from
Feb 20, 2026
Merged

fix: remove the hand holding from create keys #5108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions ...kspaceSlug]/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,6 @@ export const KeyCreatedSuccessDialog: FC<KeyCreatedSuccessDialogProps> = ({
codeClassName="p-0"
/>
<div className="mt-6">
<div className="mt-4 text-center text-gray-10 text-xs leading-6">
All set! You can now create another key or explore the docs to learn more
</div>
<div className="flex gap-3 mt-4 items-center justify-center w-full">
<Button
variant="outline"
Expand Down
66 changes: 1 addition & 65 deletions ...pp)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-secret-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@

import { SecretKey } from "@/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/secret-key";
import { CircleInfo } from "@unkey/icons";
import { Alert, AlertDescription, AlertTitle } from "@unkey/ui";
import { Code, CopyButton, VisibleButton } from "@unkey/ui";
import { useState } from "react";

type KeySecretSectionProps = {
keyValue: string;
Expand All @@ -16,34 +13,15 @@ type KeySecretSectionProps = {

export const KeySecretSection = ({
keyValue,
apiId,
className,
secretKeyClassName = "bg-white dark:bg-black",
codeClassName,
}: KeySecretSectionProps) => {
const [showKeyInSnippet, setShowKeyInSnippet] = useState(false);

const split = keyValue.split("_") ?? [];
const maskedKey =
split.length >= 2
? `${split.at(0)}_${"*".repeat(split.at(1)?.length ?? 0)}`
: "*".repeat(split.at(0)?.length ?? 0);

const snippet = `curl -XPOST '${
process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.com"
}/v2/keys.verifyKey' \\
-H 'Authorization: Bearer <UNKEY_ROOT_KEY>' \\
-H 'Content-Type: application/json' \\
-d '{
"key": "${keyValue}"
}'`;

return (
<div className={className}>
<div className="flex flex-col gap-2 items-start w-full">
<div className="text-gray-12 text-sm font-semibold">Key Secret</div>
<SecretKey value={keyValue} title="API Key" className={secretKeyClassName} />
<div className="text-gray-9 text-[13px] flex items-center gap-1.5">
<div className="text-gray-9 text-[13px] flex items-center gap-1.5 self-center">
<CircleInfo className="text-accent-9" iconSize="sm-regular" />
<span>
Copy and save this key secret as it won't be shown again.{" "}
Expand All @@ -58,48 +36,6 @@ export const KeySecretSection = ({
</span>
</div>
</div>
<div className="flex flex-col gap-2 items-start w-full mt-8">
<div className="text-gray-12 text-sm font-semibold">Try It Out</div>
<div className="relative w-full">
<Code className={codeClassName} preClassName="overflow-x-auto p-0 mb-0">
<div className="p-4">
{showKeyInSnippet ? snippet : snippet.replace(keyValue, maskedKey)}
</div>
</Code>
<VisibleButton
isVisible={showKeyInSnippet}
setIsVisible={setShowKeyInSnippet}
className="absolute right-12 top-3 md:top-4"
/>
<CopyButton
value={snippet}
className="absolute right-3 md:right-4 top-3 md:top-4 secret"
/>
</div>
<Alert variant="warn">
<div className="flex items-start mb-1 gap-2">
<CircleInfo iconSize="lg-regular" aria-hidden="true" className="flex-shrink-0" />
<div>
<AlertTitle className="mb-1">Root Key Required</AlertTitle>
<AlertDescription className="text-gray-12">
To verify keys, you'll need a root key with{" "}
<code className="bg-gray-3 px-1 rounded text-xs">api.*.verify_key</code> or{" "}
<code className="bg-gray-3 px-1 rounded text-xs">api.{apiId}.verify_key</code>{" "}
permission.
<br />
<a
href="https://www.unkey.com/docs/security/root-keys"
target="_blank"
rel="noopener noreferrer"
className="text-info-11 hover:underline"
>
Learn more about root keys
</a>
</AlertDescription>
</div>
</div>
</Alert>
</div>
</div>
);
};