Devin/oauth developer settings 1764693294

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/oAuth/page.tsx

@@ -1,25 +1,31 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
-import LegacyPage from "~/settings/admin/oauth-view";
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import OAuthClientsAdminView from "~/settings/admin/oauth-clients-admin-view";
+
+const Page = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  await getTranslate();
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/admin/oauth");
+  }
+
+  return <OAuthClientsAdminView />;
+};
 
 export const generateMetadata = async () =>
   await _generateMetadata(
-    (t) => t("oAuth"),
-    (t) => t("admin_oAuth_description"),
+    (t) => t("oauth_clients_admin"),
+    (t) => t("oauth_clients_admin_description"),
     undefined,
     undefined,
-    "/settings/admin/oAuth"
+    "/settings/admin/oauth"
   );
 
-const Page = async () => {
-  const t = await getTranslate();
-  return (
-    <SettingsHeader title={t("oAuth")} description={t("admin_oAuth_description")}>
-      <LegacyPage />
-    </SettingsHeader>
-  );
-};
-
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -147,6 +147,11 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
           href: "/settings/developer/api-keys",
           trackingMetadata: { section: "developer", page: "api_keys" },
         },
+        {
+          name: "oAuth",
+          href: "/settings/developer/oauth",
+          trackingMetadata: { section: "developer", page: "oauth_clients" }
+        },
         {
           name: "admin_api",
           href: "/settings/organizations/admin-api",
@@ -281,7 +286,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
         },
         {
           name: "oAuth",
-          href: "/settings/admin/oAuth",
+          href: "/settings/admin/oauth",
           trackingMetadata: { section: "admin", page: "oauth" },
         },
         {
@@ -298,7 +303,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
     },
   ];
 
-  tabs.find((tab) => {
+  for (const tab of tabs) {
     if (tab.name === "security" && !HOSTED_CAL_FEATURES) {
       tab.children?.push({
         name: "sso_configuration",
@@ -308,21 +313,21 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
       // TODO: Enable dsync for self hosters
       // tab.children?.push({ name: "directory_sync", href: "/settings/security/dsync" });
     }
+
     if (tab.name === "admin" && IS_CALCOM) {
       tab.children?.push({
         name: "create_org",
         href: "/settings/organizations/new",
         trackingMetadata: { section: "admin", page: "create_org" },
       });
-    }
-    if (tab.name === "admin" && IS_CALCOM) {
+
       tab.children?.push({
         name: "create_license_key",
         href: "/settings/license-key/new",
         trackingMetadata: { section: "admin", page: "create_license_key" },
       });
     }
-  });
+  }
 
   return tabs;
 };
@@ -338,7 +343,7 @@ const organizationAdminKeys = [
   "delegation_credential",
 ];
 
-export interface SettingsPermissions {
+interface SettingsPermissions {
   canViewRoles?: boolean;
   canViewOrganizationBilling?: boolean;
   canUpdateOrganization?: boolean;
@@ -554,7 +559,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
           if (!teamMenuState[index]) {
             return null;
           }
-          if (teamMenuState.some((teamState) => teamState.teamId === team.id))
+          if (teamMenuState.some((teamState) => teamState.teamId === team.id)) {
             return (
               <Collapsible
                 className="cursor-pointer"
@@ -697,6 +702,9 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                 </CollapsibleContent>
               </Collapsible>
             );
+          }
+
+          return null;
         })}
     </>
   );
@@ -1037,14 +1045,14 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
   );
 };
 
-export type SettingsLayoutProps = {
+type SettingsLayoutProps = {
   children: React.ReactNode;
   containerClassName?: string;
   teamFeatures?: Record<number, TeamFeatures>;
   permissions?: SettingsPermissions;
 } & ComponentProps<typeof Shell>;
 
-export default function SettingsLayoutAppDirClient({
+function SettingsLayoutAppDirClient({
   children,
   teamFeatures,
   permissions,
@@ -1133,3 +1141,6 @@ const SidebarContainerElement = ({
     </>
   );
 };
+
+export type { SettingsLayoutProps, SettingsPermissions };
+export default SettingsLayoutAppDirClient;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/oauth/page.tsx

@@ -0,0 +1,33 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import OAuthClientsView from "~/settings/developer/oauth-clients-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("oauth_clients"),
+    (t) => t("oauth_clients_description"),
+    undefined,
+    undefined,
+    "/settings/developer/oauth"
+  );
+
+const Page = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  const t = await getTranslate();
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/developer/oauth");
+  }
+
+  return (
+    <OAuthClientsView />
+  );
+};
+
+export default Page;

apps/web/app/api/auth/oauth/token/__tests__/route.test.ts

@@ -149,6 +149,7 @@ describe("POST /api/auth/oauth/token", () => {
       redirectUri: "https://app.example.com/callback",
       clientSecret: null,
       clientType: "PUBLIC" as const,
+      status: "APPROVED" as const,
     } as const;
 
     const mockAccessCode = {
@@ -279,6 +280,7 @@ describe("POST /api/auth/oauth/token", () => {
       redirectUri: "https://app.example.com/callback",
       clientSecret: "hashed_secret",
       clientType: "CONFIDENTIAL" as const,
+      status: "APPROVED" as const,
     } as const;
 
     const mockAccessCode = {
@@ -494,6 +496,7 @@ describe("POST /api/auth/oauth/token", () => {
         redirectUri: "https://app.example.com/callback",
         clientSecret: null,
         clientType: "PUBLIC" as const,
+        status: "APPROVED" as const,
       } as Awaited<ReturnType<typeof prismaMock.oAuthClient.findUnique>>);
 
       const tokenRequest = createTokenRequest({
@@ -517,6 +520,7 @@ describe("POST /api/auth/oauth/token", () => {
         redirectUri: "https://app.example.com/callback",
         clientSecret: null,
         clientType: "PUBLIC" as const,
+        status: "APPROVED" as const,
       } as Awaited<ReturnType<typeof prismaMock.oAuthClient.findUnique>>);
       prismaMock.accessCode.findFirst.mockResolvedValue(null);
 

apps/web/modules/auth/oauth2/authorize-view.tsx

@@ -14,14 +14,15 @@ import { Button } from "@calcom/ui/components/button";
 import { Select } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 
-export default function Authorize() {
+export function Authorize() {
   const { t } = useLocale();
   const { status } = useSession();
 
   const router = useRouter();
   const searchParams = useCompatSearchParams();
 
   const client_id = (searchParams?.get("client_id") as string) || "";
+  const redirect_uri = searchParams?.get("redirect_uri") as string;
   const state = searchParams?.get("state") as string;
   const scope = searchParams?.get("scope") as string;
   const code_challenge = searchParams?.get("code_challenge") as string;
@@ -32,12 +33,17 @@ export default function Authorize() {
   const [selectedAccount, setSelectedAccount] = useState<{ value: string; label: string } | null>();
   const scopes = scope ? scope.toString().split(",") : [];
 
-  const { data: client, isPending: isPendingGetClient } = trpc.viewer.oAuth.getClient.useQuery(
+  const {
+    data: client,
+    error: getClientError,
+    isPending: isPendingGetClient,
+  } = trpc.viewer.oAuth.getClientForAuthorization.useQuery(
     {
       clientId: client_id as string,
+      redirectUri: redirect_uri,
     },
     {
-      enabled: status !== "loading",
+      enabled: status === "authenticated" && !!redirect_uri,
     }
   );
 
@@ -50,29 +56,12 @@ export default function Authorize() {
         data.redirectUrl ?? `${client?.redirectUri}?code=${data.authorizationCode}&state=${state}`;
     },
     onError: (error) => {
-      let oauthError = "server_error";
-      if (error.data?.code === "BAD_REQUEST") {
-        oauthError = "invalid_request";
-      } else if (error.data?.code === "UNAUTHORIZED") {
-        oauthError = "unauthorized_client";
-      }
-
-      const errorParams = new URLSearchParams({
-        error: oauthError,
-      });
-
-      if (error.message) {
-        errorParams.append("error_description", error.message);
-      }
-
-      if (state) {
-        errorParams.append("state", state);
-      }
-
       if (client?.redirectUri) {
-        window.location.href = `${client.redirectUri}${
-          client.redirectUri.includes("?") ? "&" : "?"
-        }${errorParams.toString()}`;
+        redirectToOAuthError({
+          redirectUri: client.redirectUri,
+          trpcError: error,
+          state,
+        });
       }
     },
   });
@@ -120,9 +109,11 @@ export default function Authorize() {
     }
   }, [status]);
 
-  const isPending = isPendingGetClient || isPendingProfiles || status !== "authenticated";
+  if (getClientError) {
+    return <div>{getClientError.message}</div>;
+  }
 
-  if (isPending) {
+  if (isPendingGetClient || isPendingProfiles || status !== "authenticated") {
     return <></>;
   }
 
@@ -248,3 +239,56 @@ export default function Authorize() {
     </div>
   );
 }
+
+function mapTrpcCodeToOAuthError(code: string | undefined) {
+  if (code === "BAD_REQUEST") return "invalid_request";
+  if (code === "UNAUTHORIZED") return "unauthorized_client";
+  return "server_error";
+}
+
+function buildOAuthErrorRedirectUrl({
+  redirectUri,
+  error,
+  errorDescription,
+  state,
+}: {
+  redirectUri: string;
+  error: string;
+  errorDescription?: string;
+  state?: string;
+}) {
+  const errorParams = new URLSearchParams({
+    error,
+  });
+
+  if (errorDescription) {
+    errorParams.append("error_description", errorDescription);
+  }
+
+  if (state) {
+    errorParams.append("state", state);
+  }
+
+  return `${redirectUri}${redirectUri.includes("?") ? "&" : "?"}${errorParams.toString()}`;
+}
+
+function redirectToOAuthError({
+  redirectUri,
+  trpcError,
+  state,
+}: {
+  redirectUri: string;
+  trpcError: { data?: { code?: string } | null; message: string };
+  state?: string;
+}) {
+  const redirectUrl = buildOAuthErrorRedirectUrl({
+    redirectUri,
+    error: mapTrpcCodeToOAuthError(trpcError.data?.code),
+    errorDescription: trpcError.message,
+    state,
+  });
+
+  window.location.href = redirectUrl;
+}
+
+export default Authorize;