Skip to content

Commit

Permalink
Rework API keys in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakubno
jakubno committed Nov 10, 2023
1 parent 45c1801 commit f70059d
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 103 deletions.
151 changes: 110 additions & 41 deletions apps/docs/src/app/getting-started/api-key/APIKey.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,124 @@
'use client'
"use client";

import clsx from 'clsx'
import { Button } from '@/components/Button'
import { useApiKey, useUser } from '@/utils/useUser'
import { obfuscateSecret } from '@/utils/obfuscate'
import { CopyButton } from '@/components/CopyButton'
import { usePostHog } from 'posthog-js/react'
import { useSignIn } from '@/utils/useSignIn'
import clsx from "clsx";
import { useAccessToken, useApiKey, useUser } from "@/utils/useUser";
import { usePostHog } from "posthog-js/react";
import { useSignIn } from "@/utils/useSignIn";
import { obfuscateSecret } from "@/utils/obfuscate";
import { Button } from "@/components/Button";
import { CopyButton } from "@/components/CopyButton";
import { Note } from '@/components/mdx'

export function CopyableSecret({
secret,
onAfterCopy,
obfuscateStart,
obfuscateEnd,
}: {
secret: string;
onAfterCopy: () => void;
obfuscateStart?: number;
obfuscateEnd?: number;
}) {
return (
<div className="relative flex">
<span className="whitespace-nowrap font-mono text-yellow-400 group-hover:opacity-0">
{obfuscateSecret(secret, obfuscateStart, obfuscateEnd)}
</span>
<span className="absolute inset-0">
<CopyButton
code={secret}
onAfterCopy={onAfterCopy}
customPositionClassNames={clsx(
"top-[-2px] bottom-[2px]" /* nudge 2px up*/,
"left-[-8px] right-[-8px]" /* widen a little to fit nicely */,
"min-h-[28px]"
)}
/>
</span>
</div>
);
}

function SecretBlock({ name, description, secret, posthog, tip }) {
return (
<div className="flex flex-col space-y-1">
<h2 className="flex flex-row items-center justify-items-end align-text-bottom mt-6">
<span>{name}</span>
<div className="group text-sm ml-4 border-2 mt-1 outline-2 outline-offset-2 outline-zinc-700 rounded-full px-[8px]">
<CopyableSecret
secret={secret}
onAfterCopy={() => posthog?.capture("copied API key")}
obfuscateStart={12}
obfuscateEnd={5}
/>
</div>
</h2>
<span>{description}</span>
<span>{tip}</span>
</div>
);
}
function APIKey() {
const signIn = useSignIn()
const { user } = useUser()
const apiKey = useApiKey()
const posthog = usePostHog()
const signIn = useSignIn();
const { user } = useUser();
const apiKey = useApiKey();
const posthog = usePostHog();
const accessToken = useAccessToken();

return (
<div className="flex flex-col items-start justify-start space-y-4">
<div className="flex flex-col items-start justify-start -mb-6">
{user ? (
<div
className="
group relative flex
flex-row
gap-2 text-xs
"
>
<span className="whitespace-nowrap font-bold text-zinc-400 group-hover:opacity-25">
API Key
</span>
<span className="whitespace-nowrap font-mono text-yellow-400 group-hover:opacity-25">
{obfuscateSecret(apiKey)}
</span>
<span className="absolute inset-0">
<CopyButton
code={apiKey}
onAfterCopy={() => posthog?.capture('copied API key')}
customPositionClassNames={clsx(
'top-[-2px] bottom-[2px]' /* nudge 2px up*/,
'left-[-6px] right-[-6px]' /* widen a little to fit nicely */,
'min-h-[28px]',
)}
/>
</span>
<div className="flex flex-col space-y-4">
<SecretBlock
name="API Key"
description={
<span>
Use for <strong>running</strong> the sandboxes.
</span>
}
secret={apiKey}
posthog={posthog}
tip={
<span>
Set as <code>E2B_API_KEY</code> environment variable to avoid passing it
every time.
</span>
}
/>
<SecretBlock
name="Access Token"
description={
<div className="flex flex-col">
<span>
Use for <strong>managing</strong> the sandboxes
(creating/listing/deleting).
</span>
<span>
Not needed when logging in CLI via <code>e2b login</code>.
</span>
</div>
}
secret={accessToken}
posthog={posthog}
tip={
<Note>
<div className="flex flex-col">
<span>To authenticate without the browser, you can set <code>E2B_ACCESS_TOKEN</code> as an environment variable.</span>
<span>This can be useful for CI/CD pipelines.</span>
</div>
</Note>
}
/>
</div>
) : (
<>
<div className="mt-6">
<span>You can get your API key by signing up.</span>
<Button onClick={() => signIn()}>Sign up to get your API key</Button>
</>
</div>
)}
</div>
)
);
}

export default APIKey
export default APIKey;
63 changes: 4 additions & 59 deletions apps/docs/src/components/Auth.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button } from '@/components/Button'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
import { useAccessToken, useApiKey, useUser } from '@/utils/useUser'
import { useApiKey, useUser } from '@/utils/useUser'
import { LogOutIcon } from 'lucide-react'
import { CopyButton } from '@/components/CopyButton'
import clsx from 'clsx'
Expand All @@ -10,7 +10,6 @@ import { usePostHog } from 'posthog-js/react'
import { obfuscateSecret } from '@/utils/obfuscate'
import { useSignIn } from '@/utils/useSignIn'

import { Popover, PopoverContent, PopoverTrigger } from './ui/Popover'

function CopyableSecret({
secret = '',
Expand Down Expand Up @@ -47,7 +46,6 @@ export const Auth = function () {
const { user, isLoading, error } = useUser()
const signIn = useSignIn()
const apiKey = useApiKey()
const accessToken = useAccessToken()
const posthog = usePostHog()
const router = useRouter()
const supabase = createClientComponentClient()
Expand Down Expand Up @@ -98,62 +96,9 @@ export const Auth = function () {
</div>
<HeaderSeparator/>
<div className="flex items-center gap-2">
<Popover>
<PopoverTrigger
className="
whitespace-nowrap text-xs font-bold
"
>
{user.email}
</PopoverTrigger>
<PopoverContent className="w-144">
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<span className="text-xs font-bold">API Key</span>
<span className="text-xs text-gray-200">
Use for <strong>running</strong> the sandboxes.
</span>
<div className="group relative text-xs">
<CopyableSecret
secret={apiKey}
onAfterCopy={() => posthog?.capture('copied API key')}
obfuscateStart={12}
obfuscateEnd={5}
/>
</div>
<span className="text-xs text-gray-400">
TIP: Set as <code>E2B_API_KEY</code> env var to avoid
passing it every time.
</span>
</div>
<div className="flex flex-col">
<span className="text-xs font-bold">Access Token</span>
<span className="text-xs text-gray-200">
Use for <strong>managing</strong> the sandboxes
(creating/listing/deleting).
</span>
<span className="text-xs text-gray-200">
Not needed when logging in via CLI via{' '}
<code>e2b login</code>
</span>
<div className="group relative text-xs">
<CopyableSecret
secret={accessToken}
onAfterCopy={() =>
posthog?.capture('copied Access Token')
}
obfuscateStart={12}
obfuscateEnd={5}
/>
</div>
<span className="text-xs text-gray-400">
TIP: Set as <code>E2B_ACCESS_TOKEN</code> env var to avoid
passing it every time.
</span>
</div>
</div>
</PopoverContent>
</Popover>
<div className="whitespace-nowrap text-xs font-bold">
{user.email}
</div>
{/* @ts-ignore */}
<Button
variant="textSubtle"
Expand Down
6 changes: 3 additions & 3 deletions packages/cli/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ updateNotifier.default({
program
.version(packageJSON.version, undefined, 'Display E2B CLI version')
.addOption(new Option('-cmd2json').hideHelp()).on('option:-cmd2json', () => {
process.stdout.write(JSON.stringify((program.commands.sort((row1: any, row2: any) => row1.name().localeCompare(row2.name())).map((x: any) => ({
process.stdout.write(JSON.stringify((program.commands.map((x: any) => ({
command: x.name(),
description: stripAnsi.default(x.description()),
options: x.options.map((y: any) => ({
flags: y.flags,
description: stripAnsi.default(y.description),
defaultValue: y.defaultValue,
})),
})))));
process.exit();
})).sort((row1: any, row2: any) => row1.name().localeCompare(row2.name())))));
process.exit(0);
}).parse();

1 comment on commit f70059d

@vercel
Copy link

@vercel vercel bot commented on f70059d Nov 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

e2b-docs – ./apps/docs

e2b-docs.vercel.app
e2b-docs-e2b.vercel.app
e2b-docs-git-main-e2b.vercel.app

Please sign in to comment.