added jwks url

stack-auth · Dec 23, 2024 · 71a479a · 71a479a
1 parent 02be71b
commit 71a479a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 35 deletions.
diff --git a/...ashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx b/...ashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { InputField, SwitchField } from "@/components/form-fields";
 import { StyledLink } from "@/components/link";
-import { FormSettingCard, SettingCard, SettingSwitch } from "@/components/settings";
+import { FormSettingCard, SettingCard, SettingSwitch, SettingText } from "@/components/settings";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionDialog, Alert, Button, Typography } from "@stackframe/stack-ui";
 import * as yup from "yup";
 import { PageLayout } from "../page-layout";
@@ -23,6 +23,49 @@ export default function PageClient() {
 
   return (
     <PageLayout title="Project Settings" description="Manage your project">
+      <SettingCard
+        title="Project Information"
+      >
+        <SettingText label="Project ID">
+          {project.id}
+        </SettingText>
+
+        <SettingText label="JWKS URL">
+          {`${process.env.NEXT_PUBLIC_STACK_API_URL}/api/v1/projects/${project.id}/.well-known/jwks.json`}
+        </SettingText>
+      </SettingCard>
+      <FormSettingCard
+        title="Project Details"
+        defaultValues={{
+          displayName: project.displayName,
+          description: project.description || undefined,
+        }}
+        formSchema={projectInformationSchema}
+        onSubmit={async (values) => {
+          await project.update(values);
+        }}
+        render={(form) => (
+          <>
+            <InputField
+              label="Display Name"
+              control={form.control}
+              name="displayName"
+              required
+            />
+            <InputField
+              label="Description"
+              control={form.control}
+              name="description"
+            />
+
+            <Typography variant="secondary" type="footnote">
+              The display name and description may be publicly visible to the
+              users of your app.
+            </Typography>
+          </>
+        )}
+      />
+
       <SettingCard
         title="Production mode"
         description="Production mode disallows certain configuration options that are useful for development but deemed unsafe for production usage. To prevent accidental misconfigurations, it is strongly recommended to enable production mode on your production environments."
@@ -82,38 +125,6 @@ export default function PageClient() {
         )}
       />}
 
-      <FormSettingCard
-        title="Project Information"
-        defaultValues={{
-          displayName: project.displayName,
-          description: project.description || undefined,
-        }}
-        formSchema={projectInformationSchema}
-        onSubmit={async (values) => {
-          await project.update(values);
-        }}
-        render={(form) => (
-          <>
-            <InputField
-              label="Display Name"
-              control={form.control}
-              name="displayName"
-              required
-            />
-            <InputField
-              label="Description"
-              control={form.control}
-              name="description"
-            />
-
-            <Typography variant="secondary" type="footnote">
-              The display name and description may be publicly visible to the
-              users of your app.
-            </Typography>
-          </>
-        )}
-      />
-
       <SettingCard
         title="Danger Zone"
         description="Be careful with the options in this section. They can have irreversible effects."

diff --git a/apps/dashboard/src/components/settings.tsx b/apps/dashboard/src/components/settings.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DelayedInput, Form, Label, Switch, Typography, useToast } from "@stackframe/stack-ui";
 import { Settings } from "lucide-react";
 import React, { useEffect, useId, useState } from "react";
@@ -114,7 +114,7 @@ export function SettingInput(props: {
 }
 
 export function SettingText(props: {
-  label: string,
+  label: React.ReactNode,
   children: React.ReactNode,
 }) {
   return (