zod-backend/client/src/components/auth/AppleLogin.tsx

import AppleSignInButton from 'react-apple-signin-auth';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { GrantType } from '../../enums';

interface LoginProps {
  setError: (error: string) => void;
  setLoading: (loading: boolean) => void;
}
export const AppleLogin = ({ setError, setLoading }: LoginProps) => {
  const { login } = useAuth();
  const navigate = useNavigate();

  const onError = (err: any) => {
    setError(err instanceof Error ? err.message : 'Login failed. Please check your credentials.');
  };

  const onSuccess = async (response: any) => {
    try {
      setLoading(true);
      await login({ grantType: GrantType.APPLE, appleToken: response.authorization.id_token });
      navigate('/dashboard');
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Login failed. Please check your credentials.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppleSignInButton
      /** Auth options passed to AppleID.auth.init() */
      authOptions={{
        /** Client ID - eg: 'com.example.com' */
        clientId: process?.env.REACT_APP_APPLE_CLIENT_ID!,

        scope: 'email name',
        /** Requested scopes, seperated by spaces - eg: 'email name' */
        /** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */
        redirectURI: process?.env.REACT_APP_APPLE_REDIRECT_URI!,

        state: 'default',

        /** Uses popup auth instead of redirection */
        usePopup: true,
      }} // REQUIRED
      /** General props */
      uiType="dark"
      /** className */
      className="apple-auth-btn"
      /** Removes default style tag */
      noDefaultStyle={false}
      /** Allows to change the button's children, eg: for changing the button text */
      buttonExtraChildren="Continue with Apple"
      /** Extra controlling props */
      /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */
      onSuccess={(response: any) => {
        onSuccess(response);
      }} // default = undefined
      /** Called upon signin error */
      onError={(error: any) => onError(error)} // default = undefined
      /** Skips loading the apple script if true */
      skipScript={false} // default = undefined
      /** Apple image props */

      /** render function - called with all props - can be used to fully customize the UI by rendering your own component  */
    />
  );
};