awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-17 02:47:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

deconflict merge

Browse Source
This commit is contained in:
Scott Wilson
2025-04-16 15:40:18 -07:00
parent d9bd1ac878 ee185cbe47
commit 1fdb695240
203 changed files with 3233 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/auth/AdminLoginPage/route.tsx
+7
View File
@@ -0,0 +1,7 @@
import { createFileRoute } from "@tanstack/react-router";
import { LoginPage } from "../LoginPage/LoginPage";
export const Route = createFileRoute("/_restrict-login-signup/login/admin")({
component: () => <LoginPage isAdmin />
});
frontend/src/pages/auth/LoginPage/Login.utils.tsx
+9 -2
View File
@@ -33,14 +33,21 @@ export const useNavigateToSelectOrganization = () => {
const { config } = useServerConfig();
const navigate = useNavigate();
const navigateToSelectOrganization = async (cliCallbackPort?: string) => {
const navigateToSelectOrganization = async (
cliCallbackPort?: string,
isFromAdminLogin?: boolean
) => {
if (!config.defaultAuthOrgId) {
queryClient.invalidateQueries({ queryKey: userKeys.getUser });
}
navigate({
to: "/login/select-organization",
search: { callback_port: cliCallbackPort, org_id: config.defaultAuthOrgId }
search: {
callback_port: cliCallbackPort,
org_id: config.defaultAuthOrgId,
is_admin_login: isFromAdminLogin
}
});
};
frontend/src/pages/auth/LoginPage/LoginPage.tsx
+2 -1
View File
@@ -8,7 +8,7 @@ import { isLoggedIn } from "@app/hooks/api/reactQuery";
import { InitialStep, SSOStep } from "./components";
import { useNavigateToSelectOrganization } from "./Login.utils";
export const LoginPage = () => {
export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
const { t } = useTranslation();
const [step, setStep] = useState(0);
const [email, setEmail] = useState("");
@@ -44,6 +44,7 @@ export const LoginPage = () => {
case 0:
return (
<InitialStep
isAdmin={isAdmin}
setStep={setStep}
email={email}
setEmail={setEmail}
frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
+15 -5
View File
@@ -26,9 +26,17 @@ type Props = {
setEmail: (email: string) => void;
password: string;
setPassword: (email: string) => void;
isAdmin?: boolean;
};
export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
export const InitialStep = ({
setStep,
email,
setEmail,
password,
setPassword,
isAdmin
}: Props) => {
const navigate = useNavigate();
const { t } = useTranslation();
@@ -62,7 +70,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
};
useEffect(() => {
if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
if (serverDetails?.samlDefaultOrgSlug && !isAdmin) {
redirectToSaml(serverDetails.samlDefaultOrgSlug);
}
}, [serverDetails?.samlDefaultOrgSlug]);
const handleSaml = () => {
@@ -82,7 +92,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
};
const shouldDisplayLoginMethod = (method: LoginMethod) =>
!config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
isAdmin || !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -120,7 +130,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
if (isLoginSuccessful && isLoginSuccessful.success) {
// case: login was successful
navigateToSelectOrganization();
navigateToSelectOrganization(undefined, isAdmin);
createNotification({
text: "Successfully logged in",
type: "success"
@@ -160,7 +170,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
setIsLoading(false);
};
if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod) {
if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod && !isAdmin) {
return (
<form
onSubmit={handleLogin}
frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx
+8 -1
View File
@@ -14,6 +14,7 @@ import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin"
import SecurityClient from "@app/components/utilities/SecurityClient";
import { Button, Spinner } from "@app/components/v2";
import { SessionStorageKeys } from "@app/const";
import { OrgMembershipRole } from "@app/helpers/roles";
import { useToggle } from "@app/hooks";
import {
useGetOrganizations,
@@ -53,6 +54,7 @@ export const SelectOrganizationPage = () => {
const queryParams = new URLSearchParams(window.location.search);
const orgId = queryParams.get("org_id");
const callbackPort = queryParams.get("callback_port");
const isAdminLogin = queryParams.get("is_admin_login") === "true";
const defaultSelectedOrg = organizations.data?.find((org) => org.id === orgId);
const logout = useLogoutUser(true);
@@ -68,7 +70,12 @@ export const SelectOrganizationPage = () => {
const handleSelectOrganization = useCallback(
async (organization: Organization) => {
if (organization.authEnforced) {
const canBypassOrgAuth =
organization.bypassOrgAuthEnabled &&
organization.userRole === OrgMembershipRole.Admin &&
isAdminLogin;
if (organization.authEnforced && !canBypassOrgAuth) {
// org has an org-level auth method enabled (e.g. SAML)
// -> logout + redirect to SAML SSO
await logout.mutateAsync();
frontend/src/pages/auth/SelectOrgPage/route.tsx
+5 -2
View File
@@ -6,13 +6,16 @@ import { SelectOrganizationPage } from "./SelectOrgPage";
export const SelectOrganizationPageQueryParams = z.object({
org_id: z.string().optional().catch(""),
callback_port: z.coerce.number().optional().catch(undefined)
callback_port: z.coerce.number().optional().catch(undefined),
is_admin_login: z.boolean().optional().catch(false)
});
export const Route = createFileRoute("/_restrict-login-signup/login/select-organization")({
component: SelectOrganizationPage,
validateSearch: zodValidator(SelectOrganizationPageQueryParams),
search: {
middlewares: [stripSearchParams({ org_id: "", callback_port: undefined })]
middlewares: [
stripSearchParams({ org_id: "", callback_port: undefined, is_admin_login: false })
]
}
});
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx
+5
View File
@@ -9,6 +9,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
import { DiscriminativePick } from "@app/types";
import { AppConnectionHeader } from "../AppConnectionHeader";
import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
import { AwsConnectionForm } from "./AwsConnectionForm";
import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
import { AzureKeyVaultConnectionForm } from "./AzureKeyVaultConnectionForm";
@@ -86,6 +87,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
return <CamundaConnectionForm onSubmit={onSubmit} />;
case AppConnection.Windmill:
return <WindmillConnectionForm onSubmit={onSubmit} />;
case AppConnection.Auth0:
return <Auth0ConnectionForm onSubmit={onSubmit} />;
default:
throw new Error(`Unhandled App ${app}`);
}
@@ -148,6 +151,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
case AppConnection.Windmill:
return <WindmillConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
case AppConnection.Auth0:
return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
default:
throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
}
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx
+179
View File
@@ -0,0 +1,179 @@
import { Controller, FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
Button,
FormControl,
Input,
ModalClose,
SecretInput,
Select,
SelectItem
} from "@app/components/v2";
import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
import { Auth0ConnectionMethod, TAuth0Connection } from "@app/hooks/api/appConnections";
import { AppConnection } from "@app/hooks/api/appConnections/enums";
import {
genericAppConnectionFieldsSchema,
GenericAppConnectionsFields
} from "./GenericAppConnectionFields";
type Props = {
appConnection?: TAuth0Connection;
onSubmit: (formData: FormData) => Promise<void>;
};
const rootSchema = genericAppConnectionFieldsSchema.extend({
app: z.literal(AppConnection.Auth0)
});
const formSchema = z.discriminatedUnion("method", [
rootSchema.extend({
method: z.literal(Auth0ConnectionMethod.ClientCredentials),
credentials: z.object({
domain: z.string().trim().min(1, "Domain required"),
clientId: z.string().trim().min(1, "Client ID required"),
clientSecret: z.string().trim().min(1, "Client Secret required"),
audience: z.string().url().trim().min(1, "Audience required")
})
})
]);
type FormData = z.infer<typeof formSchema>;
export const Auth0ConnectionForm = ({ appConnection, onSubmit }: Props) => {
const isUpdate = Boolean(appConnection);
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
defaultValues: appConnection ?? {
app: AppConnection.Auth0,
method: Auth0ConnectionMethod.ClientCredentials
}
});
const {
handleSubmit,
control,
formState: { isSubmitting, isDirty }
} = form;
return (
<FormProvider {...form}>
<form onSubmit={handleSubmit(onSubmit)}>
{!isUpdate && <GenericAppConnectionsFields />}
<Controller
name="method"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
tooltipText={`The method you would like to use to connect with ${
APP_CONNECTION_MAP[AppConnection.Auth0].name
}. This field cannot be changed after creation.`}
errorText={error?.message}
isError={Boolean(error?.message)}
label="Method"
>
<Select
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
{Object.values(Auth0ConnectionMethod).map((method) => {
return (
<SelectItem value={method} key={method}>
{getAppConnectionMethodDetails(method).name}
</SelectItem>
);
})}
</Select>
</FormControl>
)}
/>
<Controller
name="credentials.domain"
control={control}
shouldUnregister
render={({ field, fieldState: { error } }) => (
<FormControl
errorText={error?.message}
isError={Boolean(error?.message)}
label="Domain"
>
<Input {...field} placeholder="xxxxxxxxxxxx.xx.auth0.com" />
</FormControl>
)}
/>
<Controller
name="credentials.clientId"
control={control}
shouldUnregister
render={({ field, fieldState: { error } }) => (
<FormControl
errorText={error?.message}
isError={Boolean(error?.message)}
label="Client ID"
>
<Input {...field} placeholder="djfh67bpCZAw7HBCPoNml3CcYEUrU0os" />
</FormControl>
)}
/>
<Controller
name="credentials.clientSecret"
control={control}
shouldUnregister
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
errorText={error?.message}
isError={Boolean(error?.message)}
label="Client Secret"
>
<SecretInput
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
value={value}
onChange={(e) => onChange(e.target.value)}
/>
</FormControl>
)}
/>
<Controller
name="credentials.audience"
control={control}
shouldUnregister
render={({ field, fieldState: { error } }) => (
<FormControl
errorText={error?.message}
isError={Boolean(error?.message)}
label="Audience"
tooltipText="The unique identifier of the target API you want to access."
>
<Input {...field} placeholder="Your API identifier" />
</FormControl>
)}
/>
<div className="mt-8 flex items-center">
<Button
className="mr-4"
size="sm"
type="submit"
colorSchema="secondary"
isLoading={isSubmitting}
isDisabled={isSubmitting || !isDirty}
>
{isUpdate ? "Update Credentials" : "Connect to Auth0"}
</Button>
<ModalClose asChild>
<Button colorSchema="secondary" variant="plain">
Cancel
</Button>
</ModalClose>
</div>
</form>
</FormProvider>
);
};
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx
+24 -21
View File
@@ -24,27 +24,30 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
return (
<div className="grid grid-cols-4 gap-2">
{appConnectionOptions?.map((option) => (
<button
type="button"
key={option.app}
onClick={() => onSelect(option.app)}
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${APP_CONNECTION_MAP[option.app].image}`}
style={{
height: "50px",
width: "50px"
}}
className="mt-auto"
alt={`${APP_CONNECTION_MAP[option.app].name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{APP_CONNECTION_MAP[option.app].name}
</div>
</button>
))}
{appConnectionOptions?.map((option) => {
const { image, name, size = 50 } = APP_CONNECTION_MAP[option.app];
return (
<button
type="button"
key={option.app}
onClick={() => onSelect(option.app)}
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<img
src={`/images/integrations/${image}`}
style={{
width: `${size}px`
}}
className="mt-auto"
alt={`${name} logo`}
/>
<div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{name}
</div>
</button>
);
})}
<Tooltip
side="bottom"
className="max-w-sm py-4"
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export const AppConnectionRow = ({
<img
alt={`${APP_CONNECTION_MAP[app].name} integration`}
src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
className="mr-0.5 h-5 w-5"
className="mr-0.5 w-5"
/>
<span className="hidden lg:inline">{APP_CONNECTION_MAP[app].name}</span>
</div>
frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OIDCModal.tsx
+33 -4
View File
@@ -18,6 +18,7 @@ import { useOrganization } from "@app/context";
import { useToggle } from "@app/hooks";
import { useGetOIDCConfig } from "@app/hooks/api";
import { useCreateOIDCConfig, useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations";
import { OIDCJWTSignatureAlgorithm } from "@app/hooks/api/oidcConfig/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
enum ConfigurationType {
@@ -43,7 +44,8 @@ const schema = z
userinfoEndpoint: z.string().optional(),
clientId: z.string().min(1),
clientSecret: z.string().min(1),
allowedEmailDomains: z.string().optional()
allowedEmailDomains: z.string().optional(),
jwtSignatureAlgorithm: z.nativeEnum(OIDCJWTSignatureAlgorithm).optional()
})
.superRefine((data, ctx) => {
if (data.configurationType === ConfigurationType.CUSTOM) {
@@ -159,6 +161,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
setValue("clientSecret", data.clientSecret);
setValue("allowedEmailDomains", data.allowedEmailDomains);
setValue("configurationType", data.configurationType);
setValue("jwtSignatureAlgorithm", data.jwtSignatureAlgorithm);
}
}, [data]);
@@ -172,7 +175,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
configurationType,
discoveryURL,
clientId,
clientSecret
clientSecret,
jwtSignatureAlgorithm
}: OIDCFormData) => {
try {
if (!currentOrg) {
@@ -192,7 +196,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
clientId,
clientSecret,
isActive: true,
orgSlug: currentOrg.slug
orgSlug: currentOrg.slug,
jwtSignatureAlgorithm
});
} else {
await updateMutateAsync({
@@ -207,7 +212,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
clientId,
clientSecret,
isActive: true,
orgSlug: currentOrg.slug
orgSlug: currentOrg.slug,
jwtSignatureAlgorithm
});
}
@@ -362,6 +368,29 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
/>
</>
)}
<Controller
control={control}
defaultValue={OIDCJWTSignatureAlgorithm.RS256}
name="jwtSignatureAlgorithm"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
className="w-full"
label="JWT Signature Algorithm"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
onValueChange={(e) => onChange(e)}
className="w-full"
>
<SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
<SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
<SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
</Select>
</FormControl>
)}
/>
<Controller
control={control}
name="allowedEmailDomains"
frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+83 -3
View File
@@ -1,7 +1,10 @@
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { Switch } from "@app/components/v2";
import { Switch, Tooltip } from "@app/components/v2";
import {
OrgPermissionActions,
OrgPermissionSubjects,
@@ -52,6 +55,28 @@ export const OrgGeneralAuthSection = () => {
}
};
const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
try {
if (!currentOrg?.id) return;
if (!subscription?.samlSSO) {
handlePopUpOpen("upgradePlan");
return;
}
await mutateAsync({
orgId: currentOrg?.id,
bypassOrgAuthEnabled: value
});
createNotification({
text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
type: "success"
});
} catch (err) {
console.error(err);
}
};
return (
<>
{/* <div className="py-4">
@@ -72,7 +97,9 @@ export const OrgGeneralAuthSection = () => {
</div> */}
<div className="py-4">
<div className="mb-2 flex justify-between">
<h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
<div className="flex items-center gap-1">
<span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
</div>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Switch
@@ -85,9 +112,62 @@ export const OrgGeneralAuthSection = () => {
</OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">
Enforce members to authenticate via SAML to access this organization
Enforce users to authenticate via SAML to access this organization
</p>
</div>
{currentOrg?.authEnforced && (
<div className="py-4">
<div className="mb-2 flex justify-between">
<div className="flex items-center gap-1">
<span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
<Tooltip
className="max-w-lg"
content={
<div>
<span>
When this is enabled, we strongly recommend enforcing MFA at the organization
level.
</span>
<p className="mt-4">
In case of a lockout, admins can use the admin login portal at{" "}
<a
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-2 hover:text-mineshaft-300"
href={`${window.location.origin}/login/admin`}
>
{window.location.origin}/login/admin
</a>
</p>
</div>
}
>
<FontAwesomeIcon
icon={faInfoCircle}
size="sm"
className="mt-0.5 inline-block text-mineshaft-400"
/>
</Tooltip>
</div>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Switch
id="allow-admin-bypass"
isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
isDisabled={!isAllowed}
/>
)}
</OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">
<span>
Allow organization admins to bypass SAML enforcement when SSO is unavailable,
misconfigured, or inaccessible.
</span>
</p>
</div>
)}
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
+79 -2
View File
@@ -82,6 +82,28 @@ export const OrgOIDCSection = (): JSX.Element => {
}
};
const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
try {
if (!currentOrg?.id) return;
if (!subscription?.oidcSSO) {
handlePopUpOpen("upgradePlan");
return;
}
await updateOrg({
orgId: currentOrg?.id,
bypassOrgAuthEnabled: value
});
createNotification({
text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
type: "success"
});
} catch (err) {
console.error(err);
}
};
const handleOIDCGroupManagement = async (value: boolean) => {
try {
if (!currentOrg?.id) return;
@@ -158,7 +180,9 @@ export const OrgOIDCSection = (): JSX.Element => {
)}
<div className="py-4">
<div className="mb-2 flex justify-between">
<h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
<div className="flex items-center gap-1">
<span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
</div>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Switch
@@ -171,9 +195,62 @@ export const OrgOIDCSection = (): JSX.Element => {
</OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">
Enforce members to authenticate via OIDC to access this organization
<span>Enforce users to authenticate via OIDC to access this organization.</span>
</p>
</div>
{currentOrg?.authEnforced && (
<div className="py-4">
<div className="mb-2 flex justify-between">
<div className="flex items-center gap-1">
<span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
<Tooltip
className="max-w-lg"
content={
<div>
<span>
When this is enabled, we strongly recommend enforcing MFA at the organization
level.
</span>
<p className="mt-4">
In case of a lockout, admins can use the admin login portal at{" "}
<a
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-2 hover:text-mineshaft-300"
href={`${window.location.origin}/login/admin`}
>
{window.location.origin}/login/admin
</a>
</p>
</div>
}
>
<FontAwesomeIcon
icon={faInfoCircle}
size="sm"
className="mt-0.5 inline-block text-mineshaft-400"
/>
</Tooltip>
</div>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
{(isAllowed) => (
<Switch
id="allow-admin-bypass"
isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
isDisabled={!isAllowed}
/>
)}
</OrgPermissionCan>
</div>
<p className="text-sm text-mineshaft-300">
<span>
Allow organization admins to bypass OIDC enforcement when SSO is unavailable,
misconfigured, or inaccessible.
</span>
</p>
</div>
)}
<div className="py-4">
<div className="mb-2 flex justify-between">
<div className="text-md flex items-center text-mineshaft-100">
frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModal.tsx
+32 -6
View File
@@ -20,6 +20,8 @@ import { useToggle } from "@app/hooks";
import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
import { SSOModalHeader } from "./SSOModalHeader";
enum AuthProvider {
OKTA_SAML = "okta-saml",
AZURE_SAML = "azure-saml",
@@ -30,12 +32,32 @@ enum AuthProvider {
}
const ssoAuthProviders = [
{ label: "Okta SAML", value: AuthProvider.OKTA_SAML },
{ label: "Azure / Entra SAML", value: AuthProvider.AZURE_SAML },
{ label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
{ label: "Keycloak SAML", value: AuthProvider.KEYCLOAK_SAML },
{ label: "Google SAML", value: AuthProvider.GOOGLE_SAML },
{ label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML }
{ label: "Okta SAML", value: AuthProvider.OKTA_SAML, image: "Okta.png", docsUrl: "okta" },
{
label: "Azure / Entra SAML",
value: AuthProvider.AZURE_SAML,
image: "Microsoft Azure.png",
docsUrl: "azure"
},
{
label: "JumpCloud SAML",
value: AuthProvider.JUMPCLOUD_SAML,
image: "JumpCloud.png",
docsUrl: "jumpcloud"
},
{
label: "Keycloak SAML",
value: AuthProvider.KEYCLOAK_SAML,
image: "Keycloak.png",
docsUrl: "keycloak-saml"
},
{
label: "Google SAML",
value: AuthProvider.GOOGLE_SAML,
image: "Google.png",
docsUrl: "google-saml"
},
{ label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML, image: "Auth0.png", docsUrl: "auth0-saml" }
];
const schema = z
@@ -231,6 +253,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
}}
>
<ModalContent title="Manage SAML configuration">
<SSOModalHeader
providerDetails={ssoAuthProviders.find((provider) => provider.value === authProvider)!}
isConnected={Boolean(data)}
/>
<form onSubmit={handleSubmit(onSSOModalSubmit)}>
<Controller
control={control}
frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModalHeader.tsx
+53
View File
@@ -0,0 +1,53 @@
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type ProviderDetails = {
label: string;
image: string;
value: string;
docsUrl: string;
};
type Props = {
providerDetails: ProviderDetails;
isConnected: boolean;
};
const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
return (
<div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<img
alt={`${providerDetails.label} logo`}
src={`/images/sso/${providerDetails.image}`}
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
/>
<div>
<div className="flex items-center text-mineshaft-300">
{providerDetails.label}
<a
href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
target="_blank"
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="mb-[0.07rem] ml-1 text-[10px]"
/>
</div>
</a>
</div>
<p className="text-sm leading-4 text-mineshaft-400">
{isConnected
? `${providerDetails.label} Connection`
: `Connect to ${providerDetails.label}`}
</p>
</div>
</div>
);
};
frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx
+57
View File
@@ -0,0 +1,57 @@
import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions";
import { Checkbox } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { useToggleDeleteProjectProtection } from "@app/hooks/api/workspace/queries";
export const DeleteProjectProtection = () => {
const { currentWorkspace } = useWorkspace();
const { mutateAsync } = useToggleDeleteProjectProtection();
const handleToggleDeleteProjectProtection = async (state: boolean) => {
try {
if (!currentWorkspace?.id) return;
await mutateAsync({
workspaceID: currentWorkspace.id,
state
});
const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
createNotification({
text,
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update delete protection",
type: "error"
});
}
};
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-3 text-xl font-semibold">Delete Protection</p>
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
{(isAllowed) => (
<div className="w-max">
<Checkbox
className="data-[state=checked]:bg-primary"
id="hasDeleteProtection"
isDisabled={!isAllowed}
isChecked={currentWorkspace?.hasDeleteProtection ?? false}
onCheckedChange={(state) => {
handleToggleDeleteProjectProtection(state as boolean);
}}
>
Protects the project from being deleted accidentally. While this option is enabled,
you can&apos;t delete the project.
</Checkbox>
</div>
)}
</ProjectPermissionCan>
</div>
);
};
frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/index.tsx
+1
View File
@@ -0,0 +1 @@
export { DeleteProjectProtection } from "./DeleteProjectProtection";
frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
+1 -1
View File
@@ -144,7 +144,7 @@ export const DeleteProjectSection = () => {
{(isAllowed) => (
<Button
isLoading={isDeleting}
isDisabled={!isAllowed || isDeleting}
isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
colorSchema="danger"
variant="outline_bg"
type="submit"
frontend/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx
+2
View File
@@ -5,6 +5,7 @@ import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSection";
import { DeleteProjectProtection } from "../DeleteProjectProtection";
import { DeleteProjectSection } from "../DeleteProjectSection";
import { EnvironmentSection } from "../EnvironmentSection";
import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
@@ -27,6 +28,7 @@ export const ProjectGeneralTab = () => {
{currentWorkspace?.version !== ProjectVersion.V3 && isSecretManager && (
<RebuildSecretIndicesSection />
)}
<DeleteProjectProtection />
<DeleteProjectSection />
</div>
);