Apple JS SDK: invalid_client error with new Service IDs in AppleID.auth.signIn()

We’re integrating Sign in with Apple using Apple’s official JavaScript SDK:

https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js

We’ve successfully used this setup with an older Service ID, but when we try to use any newly created Service ID, we get the following error immediately when calling AppleID.auth.signIn():

invalid_client

This happens before any request reaches our backend. The same flow, redirect URI, and frontend code works fine with an old Service ID — but fails with new ones.


✅ What We’ve Verified:

  • The Service ID (e.g., com.projectx.web.login) is created under Apple Developer → Identifiers → Service IDs
  • The redirect URI is correct and matches exactly (HTTPS, no trailing slash)
  • No client_secret is passed in the frontend (by design)
  • We’re using usePopup: true

❌ What Doesn’t Work:

Any new Service ID we create — even on the same domain and configuration — fails with invalid_client.


🔁 What We’ve Tried:

  • Creating multiple new Service IDs
  • Waiting 48+ hours in case of propagation delays
  • Validating HTTPS and redirect URI setup
  • Comparing all settings with the working (older) Service ID (which we deleted since we thought that was causing a problem)
  • Testing in different environments and browsers

❓ Questions:

  1. Why do newly created Service IDs fail with invalid_client while older ones work?
  2. Are there undocumented requirements, propagation delays, or steps for new Service IDs to become active?
  3. Is this a known limitation or bug in the SDK?

💻 Our Code:

import { useEffect } from "react";
import { Button, Box } from "@mui/material";
import api from "../utils/api"; // Axios wrapper
import AppleIcon from "@mui/icons-material/Apple";
import MainAuthStyles from "../pages/MainAuthStyles";
import { useUser } from "../../../user-module/src/contexts/UserContext";
import { useNavigate } from "react-router-dom";

// Apple global type
declare global {
  interface Window {
    AppleID: any;
  }
}

type AppleSignInButtonProps = {
  setApiError: (msg: string) => void;
};

const AppleLogInButton = ({ setApiError }: AppleSignInButtonProps) => {
  const { user, setUser } = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (!window.AppleID) return;

    window.AppleID.auth.init({
      clientId: import.meta.env.VITE_APPLE_CLIENT_ID,
      scope: "name email",
      redirectURI: import.meta.env.VITE_APPLE_REDIRECT_URI,
      usePopup: true,
    });
  }, []);

  const handleAppleLogin = async () => {
    try {
      const response = await window.AppleID.auth.signIn();

      const { id_token, code, user } = response.authorization;

      const res = await api.post("/auth/apple-login", {
        idToken: id_token,
        code,
        user,
        rememberMe: true,
      });

      if (res.data.success == true &&
          res.data.user.userDataInitialised == true
      ) {
        setUser({
          id: res.data.user.id ? res.data.user.id : '',
          fullName: res.data.user.fullName ? res.data.user.fullName : '',
          email: res.data.user.email ? res.data.user.email : '',
          role: res.data.user.role ? res.data.user.role : '',
          signUpType: res.data.user.signUpType ? res.data.user.signUpType : '',
          userDataInitialised: res.data.user.userDataInitialised ? res.data.user.userDataInitialised : false,
        });

        localStorage.setItem("accessToken", res.data.accessToken);
        localStorage.setItem("refreshToken", res.data.refreshToken);

        navigate("/app")
      } else {
        setApiError("Unrecognized login method")
        return;
      }
    } catch (err) {
      console.error("Apple Sign-In failed", err);
      setApiError("AppleSignInFailed");
    }
  };

  return (
    <Box mt={2}>
      <Button
        variant="outlined"
        fullWidth
        onClick={handleAppleLogin}
        className="AuthAppleButton"
        startIcon={<AppleIcon />}
      >
        Log in with Apple
      </Button>
    </Box>
  );
};

export default AppleLogInButton;

Any help from the Apple team or anyone who's resolved this issue would be appreciated — we’re currently blocked on deploying new environments due to this error.

Thanks!

Apple JS SDK: invalid_client error with new Service IDs in AppleID.auth.signIn()
 
 
Q