Merge dev into update-oauth-docs

apps/backend/src/app/api/latest/webhooks/svix-token/route.tsx

@@ -2,15 +2,20 @@ import { getSvixClient } from "@/lib/webhooks";
 import { createCrudHandlers } from "@/route-handlers/crud-handler";
 import { svixTokenCrud } from "@stackframe/stack-shared/dist/interface/crud/svix-token";
 import { yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
 import { createLazyProxy } from "@stackframe/stack-shared/dist/utils/proxies";
 
+const svixServerUrl = getEnvVariable("STACK_SVIX_SERVER_URL", "");
+
 const appPortalCrudHandlers = createLazyProxy(() => createCrudHandlers(svixTokenCrud, {
   paramsSchema: yupObject({}),
   onCreate: async ({ auth }) => {
     const svix = getSvixClient();
     await svix.application.getOrCreate({ uid: auth.project.id, name: auth.project.id });
     const result = await svix.authentication.appPortalAccess(auth.project.id, {});
-    return { token: result.token };
+    // svix embedded app portal is only available on hosted svix.
+    const url = svixServerUrl ? undefined : result.url;
+    return { token: result.token, url };
   },
 }));
 

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/webhooks/page-client.tsx

@@ -17,6 +17,56 @@ import { PageLayout } from "../page-layout";
 import { useAdminApp } from "../use-admin-app";
 import { getSvixResult } from "./utils";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { useTheme } from "next-themes";
+import { AppPortal } from "svix-react";
+import "svix-react/style.css";
+
+
+export default function PageClient() {
+  const stackAdminApp = useAdminApp();
+  const svixToken = stackAdminApp.useSvixToken();
+  const { resolvedTheme } = useTheme();
+  const [updateCounter, setUpdateCounter] = useState(0);
+  const [testDialogEndpoint, setTestDialogEndpoint] = useState<Endpoint | null>(null);
+
+  return (
+    <AppEnabledGuard appId="webhooks">
+      <PageLayout
+        title="Webhooks"
+        description="Webhooks are used to sync users and teams events from Stack to your own server."
+      >
+        {svixToken.url ? (
+          <div>
+            <AppPortal url={svixToken.url} darkMode={resolvedTheme === "dark"} fullSize />
+          </div>
+        ) : (
+          <SvixProvider
+            key={updateCounter}
+            token={svixToken.token}
+            appId={stackAdminApp.projectId}
+            options={{ serverUrl: getPublicEnvVar('NEXT_PUBLIC_STACK_SVIX_SERVER_URL') }}
+          >
+            <Endpoints
+              updateFn={() => setUpdateCounter(x => x + 1)}
+              onTestRequested={(endpoint) => setTestDialogEndpoint(endpoint)}
+            />
+            {testDialogEndpoint && (
+              <TestEndpointDialog
+                endpoint={testDialogEndpoint}
+                open
+                onOpenChange={(open) => {
+                  if (!open) {
+                    setTestDialogEndpoint(null);
+                  }
+                }}
+              />
+            )}
+          </SvixProvider>
+        )}
+      </PageLayout>
+    </AppEnabledGuard>
+  );
+}
 
 type Endpoint = {
   id: string,
@@ -157,7 +207,7 @@ function CreateDialog(props: {
   );
 }
 
-export function EndpointEditDialog(props: {
+function EndpointEditDialog(props: {
   open: boolean,
   onClose: () => void,
   endpoint: Endpoint,
@@ -369,42 +419,3 @@ function Endpoints(props: { updateFn: () => void, onTestRequested: (endpoint: En
     );
   }
 }
-
-export default function PageClient() {
-  const stackAdminApp = useAdminApp();
-  const svixToken = stackAdminApp.useSvixToken();
-  const [updateCounter, setUpdateCounter] = useState(0);
-  const [testDialogEndpoint, setTestDialogEndpoint] = useState<Endpoint | null>(null);
-
-  return (
-    <AppEnabledGuard appId="webhooks">
-      <PageLayout
-        title="Webhooks"
-        description="Webhooks are used to sync users and teams events from Stack to your own server."
-      >
-        <SvixProvider
-          key={updateCounter}
-          token={svixToken}
-          appId={stackAdminApp.projectId}
-          options={{ serverUrl: getPublicEnvVar('NEXT_PUBLIC_STACK_SVIX_SERVER_URL') }}
-        >
-          <Endpoints
-            updateFn={() => setUpdateCounter(x => x + 1)}
-            onTestRequested={(endpoint) => setTestDialogEndpoint(endpoint)}
-          />
-          {testDialogEndpoint && (
-            <TestEndpointDialog
-              endpoint={testDialogEndpoint}
-              open
-              onOpenChange={(open) => {
-                if (!open) {
-                  setTestDialogEndpoint(null);
-                }
-              }}
-            />
-          )}
-        </SvixProvider>
-      </PageLayout>
-    </AppEnabledGuard>
-  );
-}

packages/stack-shared/src/interface/crud/svix-token.ts

@@ -3,6 +3,7 @@ import { yupObject, yupString } from "../../schema-fields";
 
 export const svixTokenAdminReadSchema = yupObject({
   token: yupString().defined(),
+  url: yupString().optional(),
 }).defined();
 
 export const svixTokenAdminCreateSchema = yupObject({}).defined();

packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts

@@ -416,9 +416,9 @@ export class _StackAdminAppImplIncomplete<HasTokenStore extends boolean, Project
   }
   // END_PLATFORM
   // IF_PLATFORM react-like
-  useSvixToken(): string {
+  useSvixToken(): { token: string, url: string | undefined } {
     const crud = useAsyncCache(this._svixTokenCache, [], "adminApp.useSvixToken()");
-    return crud.token;
+    return { token: crud.token, url: crud.url };
   }
   // END_PLATFORM
 

packages/template/src/lib/stack-app/apps/interfaces/admin-app.ts

@@ -49,7 +49,7 @@ export type StackAdminApp<HasTokenStore extends boolean = boolean, ProjectId ext
     updateProjectPermissionDefinition(permissionId: string, data: AdminProjectPermissionDefinitionUpdateOptions): Promise<void>,
     deleteProjectPermissionDefinition(permissionId: string): Promise<void>,
 
-    useSvixToken(): string, // THIS_LINE_PLATFORM react-like
+    useSvixToken(): { token: string, url: string | undefined }, // THIS_LINE_PLATFORM react-like
 
     sendTestEmail(options: {
       recipientEmail: string,