104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useGetCoreConfigQuery } from "@/lib/store";
|
|
import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Copy, InfoIcon, KeyRound } from "lucide-react";
|
|
import { useMemo } from "react";
|
|
import ContactUsView from "../views/contactUsView";
|
|
|
|
export default function APIKeysView() {
|
|
const { data: bifrostConfig, isLoading } = useGetCoreConfigQuery({ fromDB: true });
|
|
const isAuthConfigure = useMemo(() => {
|
|
return bifrostConfig?.auth_config?.is_enabled;
|
|
}, [bifrostConfig]);
|
|
|
|
const curlExample = `# Base64 encode your username:password
|
|
# Example: echo -n "username:password" | base64
|
|
curl --location 'http://localhost:8080/v1/chat/completions'
|
|
--header 'Content-Type: application/json'
|
|
--header 'Accept: application/json'
|
|
--header 'Authorization: Basic <base64_encoded_username:password>'
|
|
--data '{
|
|
"model": "openai/gpt-4",
|
|
"messages": [
|
|
{
|
|
"role": "user",
|
|
"content": "explain big bang?"
|
|
}
|
|
]
|
|
}'`;
|
|
|
|
const { copy: copyToClipboard } = useCopyToClipboard();
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
if (!isAuthConfigure) {
|
|
return (
|
|
<Alert variant="default">
|
|
<InfoIcon className="text-muted h-4 w-4" />
|
|
<AlertDescription>
|
|
<p className="text-md text-muted-foreground">
|
|
To generate API keys, you need to set up admin username and password first.{" "}
|
|
<Link to="/workspace/config/security" className="text-md text-primary underline">
|
|
Configure Security Settings
|
|
</Link>
|
|
.<br />
|
|
<br />
|
|
Once generated you will need to use this API key for all API calls to the Bifrost admin APIs and UI.
|
|
</p>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
const isInferenceAuthDisabled = bifrostConfig?.auth_config?.disable_auth_on_inference ?? false;
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-4xl space-y-4">
|
|
<Alert variant="default">
|
|
<InfoIcon className="text-muted h-4 w-4" />
|
|
<AlertDescription>
|
|
<p className="text-md text-muted-foreground">
|
|
{isInferenceAuthDisabled ? (
|
|
<>
|
|
Authentication is currently <strong>disabled for inference API calls</strong>. You can make inference requests without
|
|
authentication. Dashboard and admin API calls still require Basic auth with your admin credentials encoded in the standard{" "}
|
|
<code className="bg-muted rounded px-1 py-0.5 text-sm">username:password</code> format with base64 encoding.
|
|
</>
|
|
) : (
|
|
<>
|
|
Use Basic auth with your admin credentials when making API calls to Bifrost. Encode your credentials in the standard{" "}
|
|
<code className="bg-muted rounded px-1 py-0.5 text-sm">username:password</code> format with base64 encoding.
|
|
</>
|
|
)}
|
|
</p>
|
|
{!isInferenceAuthDisabled && (
|
|
<>
|
|
<br />
|
|
<p className="text-md text-muted-foreground">
|
|
<strong>Example:</strong>
|
|
</p>
|
|
|
|
<div className="relative mt-2 w-full min-w-0 overflow-x-auto">
|
|
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(curlExample)} className="absolute top-2 right-2 z-10 h-8">
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
<pre className="bg-muted min-w-max rounded p-3 pr-12 font-mono text-sm whitespace-pre">{curlExample}</pre>
|
|
</div>
|
|
</>
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<ContactUsView
|
|
className="mt-4 rounded-md border px-3 py-8"
|
|
icon={<KeyRound size={48} />}
|
|
title="Scope Based API Keys"
|
|
description="Need granular access control with scope-based API keys? Enterprise customers can create multiple API keys with specific permissions for different services, teams, or environments."
|
|
readmeLink="https://docs.getbifrost.io/enterprise/api-keys"
|
|
/>
|
|
</div>
|
|
);
|
|
} |