first commit
This commit is contained in:
@@ -0,0 +1,104 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user