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:
Why do newly created Service IDs fail with invalid_client while older ones work?
Are there undocumented requirements, propagation delays, or steps for new Service IDs to become active?
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!
