diff --git a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/layout.tsx b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/layout.tsx index c64286074..11690f4bd 100644 --- a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/layout.tsx +++ b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/layout.tsx @@ -2,11 +2,11 @@ import { Box, Divider, Drawer, Stack, useTheme } from "@mui/joy"; import { useState } from "react"; -import { Logo } from "@/components/logo"; import { Sidebar } from "./sidebar"; import { AdminAppProvider } from "./useAdminInterface"; import { Header } from "./header"; import { Icon } from '@/components/icon'; +import { OnboardingDialog } from "./onboarding-dialog"; const navigationItems = [ { @@ -52,6 +52,7 @@ export default function Layout(props: { children: React.ReactNode, params: { pro return ( + setIsSidebarOpen(false)} > setIsSidebarOpen(false)} headerHeight={headerHeight} navigationItems={navigationItems} /> diff --git a/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/onboarding-dialog.tsx b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/onboarding-dialog.tsx new file mode 100644 index 000000000..ad64ffe0c --- /dev/null +++ b/packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/onboarding-dialog.tsx @@ -0,0 +1,71 @@ +import { Dialog } from "@/components/dialog"; +import { use, useId, useRef, useState } from "react"; +import { useStrictMemo } from "stack-shared/src/hooks/use-strict-memo"; +import { useAdminApp } from "./useAdminInterface"; +import { Stack } from "@mui/joy"; +import { Paragraph } from "@/components/paragraph"; +import Link from "next/link"; + +export function OnboardingDialog() { + return null; // TODO: Enable after fixing the "root exit" issue + const formId = useId(); + const stackAdminApp = useAdminApp(); + const [open, setOpen] = useState(false); + + const projectPromise = useStrictMemo(() => { + return stackAdminApp.getProject(); + }, []); + const project = use(projectPromise); + + const apiKeyPromise = useStrictMemo(async () => { + const apiKeySets = await stackAdminApp.listApiKeySets(); + if (apiKeySets.length > 0) { + return; + } + + setOpen(true); + + return await stackAdminApp.createApiKeySet({ + hasPublishableClientKey: true, + hasSecretServerKey: true, + hasSuperSecretAdminKey: false, + expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 200), // 200 years, effectively never + description: 'Onboarding' + }); + }, []); + const apiKey = use(apiKeyPromise); + + if (!apiKey || !project) { + return null; + } + + return ( + "prevent-close", + props: { + type: "submit", + form: formId, + }, + }} + open={open} + onClose={() => setOpen(false)} + > + {/* TODO: Add document link */} + + + Here are your new API keys. Please copy this to your .env.local file. Detailed instruction can be founder here. + + + NEXT_PUBLIC_STACK_PROJECT_ID={project.id} + NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY={apiKey.publishableClientKey} + STACK_SECRET_SERVER_KEY={apiKey.secretServerKey} + + + + ); +} \ No newline at end of file diff --git a/packages/stack-shared/src/interface/adminInterface.ts b/packages/stack-shared/src/interface/adminInterface.ts index b899f965b..c56222b14 100644 --- a/packages/stack-shared/src/interface/adminInterface.ts +++ b/packages/stack-shared/src/interface/adminInterface.ts @@ -167,7 +167,7 @@ export class StackAdminInterface extends StackServerInterface { return createApiKeySetFirstViewFromJson(await response.json()); } - async listApiKeySets() { + async listApiKeySets(): Promise { const response = await this.sendAdminRequest("/api-keys", {}, null); const json = await response.json(); return json.map((k: ApiKeySetSummaryJson) => createApiKeySetSummaryFromJson(k));