mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-01 15:43:18 +00:00
a718267191
<!-- Please inform yourself about the contribution guidelines on submitting a PR here: https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr. Take note of how PR/commit titles should be written and replace the template texts in the sections below. Don't remove any of the sections. It is important that the commit history clearly shows what is changed and why. Important: By submitting a contribution you agree to the terms from our Licensing Policy as described here: https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions. --> # Which Problems Are Solved Don't show the external IdP section, if none are configured. # How the Problems Are Solved - Checks if the length of `identityProviders` is non-empty. # Additional Changes - Added 2 additional null-checks for `identityProviders` # Additional Context - Closes #10401 Co-authored-by: Max Peintner <max@caos.ch> Co-authored-by: Livio Spring <livio.a@gmail.com>
94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { idpTypeToSlug } from "@/lib/idp";
|
|
import { redirectToIdp } from "@/lib/server/idp";
|
|
import {
|
|
IdentityProvider,
|
|
IdentityProviderType,
|
|
} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
|
|
import { ReactNode, useActionState } from "react";
|
|
import { Alert } from "./alert";
|
|
import { SignInWithIdentityProviderProps } from "./idps/base-button";
|
|
import { SignInWithApple } from "./idps/sign-in-with-apple";
|
|
import { SignInWithAzureAd } from "./idps/sign-in-with-azure-ad";
|
|
import { SignInWithGeneric } from "./idps/sign-in-with-generic";
|
|
import { SignInWithGithub } from "./idps/sign-in-with-github";
|
|
import { SignInWithGitlab } from "./idps/sign-in-with-gitlab";
|
|
import { SignInWithGoogle } from "./idps/sign-in-with-google";
|
|
import { Translated } from "./translated";
|
|
|
|
export interface SignInWithIDPProps {
|
|
children?: ReactNode;
|
|
identityProviders: IdentityProvider[];
|
|
requestId?: string;
|
|
organization?: string;
|
|
linkOnly?: boolean;
|
|
}
|
|
|
|
export function SignInWithIdp({
|
|
identityProviders,
|
|
requestId,
|
|
organization,
|
|
linkOnly,
|
|
}: Readonly<SignInWithIDPProps>) {
|
|
const [state, action, _isPending] = useActionState(redirectToIdp, {});
|
|
|
|
const renderIDPButton = (idp: IdentityProvider, index: number) => {
|
|
const { id, name, type } = idp;
|
|
|
|
const components: Partial<
|
|
Record<
|
|
IdentityProviderType,
|
|
(props: SignInWithIdentityProviderProps) => ReactNode
|
|
>
|
|
> = {
|
|
[IdentityProviderType.APPLE]: SignInWithApple,
|
|
[IdentityProviderType.OAUTH]: SignInWithGeneric,
|
|
[IdentityProviderType.OIDC]: SignInWithGeneric,
|
|
[IdentityProviderType.GITHUB]: SignInWithGithub,
|
|
[IdentityProviderType.GITHUB_ES]: SignInWithGithub,
|
|
[IdentityProviderType.AZURE_AD]: SignInWithAzureAd,
|
|
[IdentityProviderType.GOOGLE]: (props) => (
|
|
<SignInWithGoogle {...props} e2e="google" />
|
|
),
|
|
[IdentityProviderType.GITLAB]: SignInWithGitlab,
|
|
[IdentityProviderType.GITLAB_SELF_HOSTED]: SignInWithGitlab,
|
|
[IdentityProviderType.SAML]: SignInWithGeneric,
|
|
[IdentityProviderType.LDAP]: SignInWithGeneric,
|
|
[IdentityProviderType.JWT]: SignInWithGeneric,
|
|
};
|
|
|
|
const Component = components[type];
|
|
return Component ? (
|
|
<form action={action} className="flex" key={`idp-${index}`}>
|
|
<input type="hidden" name="id" value={id} />
|
|
<input type="hidden" name="provider" value={idpTypeToSlug(type)} />
|
|
<input type="hidden" name="requestId" value={requestId} />
|
|
<input type="hidden" name="organization" value={organization} />
|
|
<input
|
|
type="hidden"
|
|
name="linkOnly"
|
|
value={linkOnly ? "true" : "false"}
|
|
/>
|
|
<Component key={id} name={name} />
|
|
</form>
|
|
) : null;
|
|
};
|
|
|
|
return (
|
|
<div className="flex w-full flex-col space-y-2 text-sm">
|
|
<p className="ztdl-p text-center">
|
|
<Translated i18nKey="orSignInWith" namespace="idp" />
|
|
</p>
|
|
{!!identityProviders?.length && identityProviders?.map(renderIDPButton)}
|
|
{state?.error && (
|
|
<div className="py-4">
|
|
<Alert>{state?.error}</Alert>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
SignInWithIdp.displayName = "SignInWithIDP";
|