[dashboard] Check if localStorage is available before using it

components/dashboard/src/login/SSOLoginForm.tsx

@@ -14,6 +14,7 @@ import { useFeatureFlag } from "../data/featureflag-query";
 import { useLocation } from "react-router";
 import { useOnboardingState } from "../dedicated-setup/use-needs-setup";
 import { getOrgSlugFromQuery } from "../data/organizations/orgs-query";
+import { storageAvailable } from "../utils";
 
 type Props = {
     onSuccess: () => void;
@@ -34,10 +35,7 @@ export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
     const singleOrgMode = (onboardingState?.organizationCountTotal || 0) < 2;
 
     const [orgSlug, setOrgSlug] = useState(
-        getOrgSlugFromPath(location.pathname) ||
-            window.localStorage.getItem("sso-org-slug") ||
-            getOrgSlugFromQuery(location.search) ||
-            "",
+        getOrgSlugFromPath(location.pathname) || readSSOOrgSlug() || getOrgSlugFromQuery(location.search) || "",
     );
     const [error, setError] = useState("");
 
@@ -46,7 +44,7 @@ export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
     const openLoginWithSSO = useCallback(
         async (e: React.FormEvent<HTMLFormElement>) => {
             e.preventDefault();
-            window.localStorage.setItem("sso-org-slug", orgSlug.trim());
+            persistSSOOrgSlug(orgSlug.trim());
 
             try {
                 await openOIDCStartWindow({
@@ -105,3 +103,18 @@ export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
         </form>
     );
 };
+
+function readSSOOrgSlug(): string | undefined {
+    const isLocalStorageAvailable = storageAvailable("localStorage");
+    if (isLocalStorageAvailable) {
+        return window.localStorage.getItem("sso-org-slug") || undefined;
+    }
+    return undefined;
+}
+
+function persistSSOOrgSlug(slug: string) {
+    const isLocalStorageAvailable = storageAvailable("localStorage");
+    if (isLocalStorageAvailable) {
+        window.localStorage.setItem("sso-org-slug", slug.trim());
+    }
+}