Post

Replies

Boosts

Views

Activity

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: 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!
0
1
123
Jun ’25