dashboard: show instructions if a team requires sso login (#42689)

When we detect that login with SSO is required for a team, show a UI with instructions on what the user should do next.

GitOrigin-RevId: c124f64cd80db870e37cf890aa80d6acdb6efdf5

Author: atrakh

npm-packages/dashboard/src/api/api.ts

@@ -14,7 +14,7 @@ import { SWRConfiguration } from "swr";
 import { useAccessToken } from "hooks/useServerSideData";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
-import { usePrevious } from "react-use";
+import { createGlobalState, usePrevious } from "react-use";
 import { captureException } from "@sentry/nextjs";
 import { getGoogleAnalyticsClientId, reportHttpError } from "../hooks/fetching";
 import { forceCheckIsOnline } from "./onlineStatus";
@@ -36,6 +36,8 @@ export const useMutate = createMutateHook(client, "big-brain", isMatch);
 
 type Path<M extends "post" | "put" | "get"> = PathsWithMethod<BigBrainPaths, M>;
 
+export const useSSOLoginRequired = createGlobalState<string>();
+
 export function useBBQuery<QueryPath extends Path<"get">>({
   path,
   pathParams,
@@ -45,8 +47,11 @@ export function useBBQuery<QueryPath extends Path<"get">>({
   path: QueryPath;
   pathParams: BigBrainPaths[QueryPath]["get"]["parameters"]["path"];
   queryParams?: BigBrainPaths[QueryPath]["get"]["parameters"]["query"];
-  swrOptions?: SWRConfiguration;
+  swrOptions?: Omit<SWRConfiguration, "onError">;
 }) {
+  const router = useRouter();
+  const [ssoLoginRequired, setSSOLoginRequired] = useSSOLoginRequired();
+
   const googleAnalyticsId =
     typeof document !== "undefined" &&
     getGoogleAnalyticsClientId(document.cookie);
@@ -86,6 +91,11 @@ export function useBBQuery<QueryPath extends Path<"get">>({
   const res = useQuery(path, requestOptions, {
     keepPreviousData: true,
     isPaused: () => paused,
+    onError: (e) => {
+      if ((e as any).code === "SSORequired" && !ssoLoginRequired) {
+        setSSOLoginRequired(router.query.team as string);
+      }
+    },
     ...swrOptions,
   });
   if ("error" in res && !!res.error && typeof res.error === "object") {

npm-packages/dashboard/src/pages/_app.tsx

@@ -32,6 +32,10 @@ import { UIProvider } from "@ui/UIContext";
 import Link from "next/link";
 import { RefreshSession } from "components/login/RefreshSession";
 import { AuthProvider } from "providers/AuthProvider";
+import { useSSOLoginRequired } from "api/api";
+import { Sheet } from "@ui/Sheet";
+import { Button } from "@ui/Button";
+import { ExitIcon, LockClosedIcon } from "@radix-ui/react-icons";
 
 declare global {
   interface Window {
@@ -52,6 +56,7 @@ const UNAUTHED_ROUTES = [
 ];
 
 export default function App({ Component, pageProps }: AppProps) {
+  const [ssoLoginRequired] = useSSOLoginRequired();
   const router = useRouter();
   const pathWithoutQueryString = router.asPath.split("?")[0].split("#")[0];
 
@@ -102,7 +107,36 @@ export default function App({ Component, pageProps }: AppProps) {
                             <div className="flex h-screen flex-col">
                               <CommandPalette />
                               <DashboardHeader />
-                              {inDeployment ? (
+                              {!!ssoLoginRequired &&
+                              ssoLoginRequired === router.query.team ? (
+                                <div className="flex h-full w-full items-center justify-center">
+                                  <Sheet className="flex max-w-prose flex-col gap-4">
+                                    <div className="flex items-center gap-2">
+                                      <LockClosedIcon className="size-8" />
+                                      <h3>Single Sign-On Login Required</h3>
+                                    </div>
+                                    <span className="flex flex-col gap-2">
+                                      <p>
+                                        This team requires you to log in with
+                                        Single Sign-On to access it.
+                                      </p>
+                                      <p>
+                                        You may log out and log back in through
+                                        your Single Sign-On provider, or switch
+                                        teams by using the selector on the top
+                                        of this page.
+                                      </p>
+                                    </span>
+                                    <Button
+                                      className="ml-auto w-fit"
+                                      href="/api/auth/logout"
+                                      icon={<ExitIcon />}
+                                    >
+                                      Log Out
+                                    </Button>
+                                  </Sheet>
+                                </div>
+                              ) : inDeployment ? (
                                 <DeploymentInfoProvider>
                                   <MaybeDeploymentApiProvider>
                                     <CurrentDeploymentDashboardLayout>