fixed onboarding

packages/stack-server/src/app/(main)/(protected)/projects/[projectId]/onboarding-dialog.tsx

@@ -2,22 +2,22 @@ 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 { Box, Stack, Typography } 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 called = useRef(false);
   const formId = useId();
   const stackAdminApp = useAdminApp();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
 
-  const projectPromise = useStrictMemo(() => {
-    return stackAdminApp.getProject();
-  }, []);
-  const project = use(projectPromise);
+  const dataPromis = useStrictMemo(async () => {
+    if (called.current) {
+      return;
+    }
+    called.current = true;
 
-  const apiKeyPromise = useStrictMemo(async () => {
     const apiKeySets = await stackAdminApp.listApiKeySets();
     if (apiKeySets.length > 0) {
       return;
@@ -25,28 +25,33 @@ export function OnboardingDialog() {
 
     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'
-    });
+    return await Promise.all([
+      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'
+      }),
+      stackAdminApp.getProject()
+    ]);
   }, []);
-  const apiKey = use(apiKeyPromise);
-
-  if (!apiKey || !project) {
+  const data = use(dataPromis);
+  console.log(data);
+  if (!data) {
     return null;
   }
 
+  const [apiKey, project] = data;
+
   return (
     <Dialog
       titleIcon="library_add"
       title="Create new project"
       cancelButton
       okButton={{
-        label: "Create",
-        onClick: async () => "prevent-close",
+        label: "Continue",
+        onClick: async () => setOpen(false),
         props: {
           type: "submit",
           form: formId,
@@ -56,14 +61,23 @@ export function OnboardingDialog() {
       onClose={() => setOpen(false)}
     >
       {/* TODO: Add document link */}
-      <Stack spacing={2}>
+      <Stack spacing={1}>
         <Paragraph body>
           Here are your new API keys. Please copy this to your .env.local file. Detailed instruction can be founder <Link href="/docs/getting-started">here</Link>. 
         </Paragraph>
+        <Box p={2} bgcolor="background.paper" borderRadius={4} overflow='auto'>
+          <Typography>
+            NEXT_PUBLIC_STACK_PROJECT_ID={project.id}
+          </Typography>
+          <Typography>
+            NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY={apiKey.publishableClientKey}
+          </Typography>
+          <Typography>
+            STACK_SECRET_SERVER_KEY={apiKey.secretServerKey}
+          </Typography>
+        </Box>
         <Paragraph body>
-          NEXT_PUBLIC_STACK_PROJECT_ID={project.id}
-          NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY={apiKey.publishableClientKey}
-          STACK_SECRET_SERVER_KEY={apiKey.secretServerKey}
+          Note that the secret server key is only shown once. You need to generate a new one if you lose it.
         </Paragraph>
       </Stack>
     </Dialog>

packages/stack-server/src/app/(main)/(protected)/projects/header.tsx

@@ -1,11 +1,9 @@
-"use client";
-
+"use client";;
 import { Logo } from "@/components/logo";
-import { Sheet, SheetProps, Select, Option, SelectOption, Stack, Typography } from "@mui/joy";
-import * as React from 'react';
+import { Sheet, SheetProps, Stack } from "@mui/joy";
 
 export function Header(props: SheetProps & { headerHeight: number }) {
-  const { ...sheetProps } = props;
+  const { headerHeight, ...sheetProps } = props;
 
   return (
     <Sheet
@@ -22,11 +20,11 @@ export function Header(props: SheetProps & { headerHeight: number }) {
         borderRight: 'none',
         display: 'flex',
         alignItems: 'stretch',
-        height: `${props.headerHeight}px`,
-        ...sheetProps.sx ?? {},
+        height: `${headerHeight}px`,
+        ...(sheetProps.sx ?? {}),
       }}
     >
-      <Stack sx={{ marginLeft: 2, justifyContent: 'center', height: props.headerHeight - 1 }}>
+      <Stack sx={{ marginLeft: 2, justifyContent: 'center', height: headerHeight - 1 }}>
         <Logo full height={24} href="/projects" />
       </Stack>
     </Sheet>

packages/stack-server/src/app/(main)/(protected)/projects/page-client.tsx

@@ -124,6 +124,7 @@ function CreateProjectDialog(props: { open: boolean, onClose(): void, onInvalida
                 displayName: `${formData.get('name')}`,
                 description: `${formData.get('description')}`,
               });
+              
               props.onInvalidate();
               props.onClose();
             } finally {