update apple sign on to use OIDC if clientId is added

blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx

@@ -5,14 +5,18 @@ import { SIGN_UP } from "../constants";
 
 const AppleIcon = <Icon name="Apple" width={21} height={24} viewBox="0 0 24 24" />;
 
-function AppleSignIn({ customButtons, socialSignOnIn, className, OidcClient }) {
+function AppleSignIn({ customButtons, socialSignOnIn, className, oidcClients = [], appleClientId }) {
 	const phrases = usePhrases();
 	const { Identity } = useIdentity();
 
+	const appleOIDCClient = oidcClients.find((oidcClient) => (
+		oidcClient.protocol === 'Apple' && oidcClient.clientId === appleClientId
+	));
+
 	const handleClick = () => {
-		if (OidcClient?.clientId) {
+		if (appleOIDCClient?.clientId) {
 			Identity.initiateOIDC(
-				OidcClient.clientId,
+				appleOIDCClient.clientId,
 				['name', 'email'],
 				true,
 				true

blocks/identity-block/components/social-sign-on/_children/AppleSignIn.test.jsx

@@ -19,6 +19,21 @@ jest.mock("@wpmedia/arc-themes-components", () => ({
 	Icon: () => <div data-testid="Apple-icon" />,
 }));
 
+const mockInitAppleSignOn = jest.fn();
+const mockInitiateOIDCMock = jest.fn();
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+	...jest.requireActual("@wpmedia/arc-themes-components"),
+	Icon: () => <div data-testid="Apple-icon" />,
+	useIdentity: () => {
+		const Identity = {
+			initiateOIDC: mockInitiateOIDCMock,
+			initAppleSignOn: mockInitAppleSignOn,
+		};
+		return { Identity };
+	},
+}));
+
 describe("Identity Social Login Component", () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -37,4 +52,28 @@ describe("Identity Social Login Component", () => {
 		render(<AppleSignIn socialSignOnIn="SignUp" />);
 		expect(screen.getByText("identity-block.social-signOn-apple-signUp")).not.toBeNull();
 	});
+
+	it("triggers Identity.initiateOIDC when using Apple OIDC is used", () => {
+		render(<AppleSignIn socialSignOnIn="Login" oidcClients={[{ clientId: 'appleoidc', protocol: 'Apple' }]} appleClientId='appleoidc' />);
+		screen.getByText("identity-block.social-signOn-apple-login").click();
+		expect(mockInitiateOIDCMock).toHaveBeenCalled();
+	});
+
+	it("triggers Identity.initAppleSignOn when using Apple v1 sign on is used", () => {
+		render(<AppleSignIn socialSignOnIn="Login" />);
+		screen.getByText("identity-block.social-signOn-apple-login").click();
+		expect(mockInitAppleSignOn).toHaveBeenCalled();
+	});
+
+	it("triggers Identity.initAppleSignOn when clientId is not available in OIDC client list", () => {
+		render(<AppleSignIn socialSignOnIn="Login" oidcClients={[{ clientId: 'appleoidc', protocol: 'Apple' }]} appleClientId='noappleoidc' />);
+		screen.getByText("identity-block.social-signOn-apple-login").click();
+		expect(mockInitAppleSignOn).toHaveBeenCalled();
+	});
+
+	it("triggers Identity.initAppleSignOn when clientId is not a protocol: 'Apple'", () => {
+		render(<AppleSignIn socialSignOnIn="Login" oidcClients={[{ clientId: 'appleoidc', protocol: 'Default' }]} appleClientId='appleoidc' />);
+		screen.getByText("identity-block.social-signOn-apple-login").click();
+		expect(mockInitAppleSignOn).toHaveBeenCalled();
+	});
 });

blocks/identity-block/components/social-sign-on/index.jsx

@@ -3,7 +3,6 @@ import PropTypes from "@arc-fusion/prop-types";
 import FacebookSignIn from "./_children/FacebookSignIn";
 import GoogleSignIn from "./_children/GoogleSignIn";
 import AppleSignIn from "./_children/AppleSignIn";
-import OIDCSignIn from "./_children/OIDCSignin";
 import useSocialSignIn from "./utils/useSocialSignIn";
 
 const SocialSignOn = ({
@@ -12,7 +11,8 @@ const SocialSignOn = ({
 	redirectURL,
 	isOIDC,
 	socialSignOnIn,
-	customButtons
+	customButtons,
+	appleClientId,
 }) => {
 	const {
 		facebookAppId,
@@ -27,13 +27,13 @@ const SocialSignOn = ({
 		<section className={className}>
 			{googleClientId && <GoogleSignIn customButtons={customButtons} socialSignOnIn={socialSignOnIn} className={className} />}
 			{facebookAppId && <FacebookSignIn customButtons={customButtons} socialSignOnIn={socialSignOnIn} className={className} />}
-			{appleTeamId && appleKeyId && appleUrlToReceiveAuthToken && <AppleSignIn customButtons={customButtons} socialSignOnIn={socialSignOnIn} className={className} />}
-			{oidcClients?.length && oidcClients?.length > 0 && (
-				<OIDCSignIn
+			{appleTeamId && appleKeyId && appleUrlToReceiveAuthToken && (
+				<AppleSignIn
 					customButtons={customButtons}
 					socialSignOnIn={socialSignOnIn}
-					oidcClients={oidcClients}
 					className={className}
+					oidcClients={oidcClients}
+					appleClientId={appleClientId}
 				/>
 			)}
 		</section>
@@ -42,6 +42,7 @@ const SocialSignOn = ({
 
 SocialSignOn.propTypes = {
 	redirectURL: PropTypes.string.isRequired,
+	appleClientId: PropTypes.string,
 	onError: PropTypes.func.isRequired,
 };
 

blocks/identity-block/features/social-sign-on/default.jsx

@@ -18,7 +18,8 @@ const SocialSignOnBlock = ({ customFields }) => {
 		OIDC,
 		socialSignOnIn,
 		hideDiv,
-		customButtons
+		customButtons,
+		appleClientId,
 	} = customFields;
 
 	const checkAppleCodeExists = (url) => {
@@ -72,6 +73,7 @@ const SocialSignOnBlock = ({ customFields }) => {
 					isOIDC={isOIDC}
 					socialSignOnIn={socialSignOnIn}
 					customButtons={customButtons}
+					appleClientId={appleClientId}
 				/>
 			</GoogleSignInProvider>
 			{error ? (
@@ -91,6 +93,12 @@ SocialSignOnBlock.propTypes = {
 			name: "Redirect URL",
 			defaultValue: "/account/",
 		}),
+		appleClientId: PropTypes.string.tag({
+			name: "Apple OIDC Client ID",
+			defaultValue: "",
+			description:
+				'Client ID for Apple OIDC authentication provider. This is the "Provider key" in your "Authentication Providers" settings',
+		}),
 		redirectToPreviousPage: PropTypes.bool.tag({
 			name: "Redirect to previous page",
 			defaultValue: true,