Implement social sign in using OIDC: Apple

To integrate your Apple app account with multiple applications (Web, Mobile, or Desktop) or a single application, you can utilize the Apple OIDC Authentication Provider on the ArcXP platform.

Note

Before you start, see Configure third-party authentication providers, Facebook, Google, Apple, and OIDC. This documentation provides a comprehensive guide on configuring Sign In with Apple using the OIDC protocol.

If you are using our Arc XP Identity blocks, see ArcXP Identity Themes Blocks Configuration & Customization Deep Dive. We provide a prebuilt Theme Block that can be used to display the Apple Sign-In button and connect to the Authentication Provider. If you need to build this on your own, consider the explanation and code provided below.

Create Apple Sign In Button

After setting up, create an Apple Sign In button on your website for users to sign in with their Apple ID. Utilize our Identity SDKs to implement the Apple Sign In functionality.

export default function AppleSignInButton() {
  return (
    <button
      onClick={async () => {
        // Args: clientId, scopes, usePopup, usePKCE
        await Identity.initiateOIDC(clientId, ['name', 'email'], true, true);
      }}
    >
      Sign in with Apple
    </button>
  );
}

Caution

Apple only returns the user’s name on the first authorization for a given Apple ID. On subsequent sign-ins the name scope will come back empty — capture and persist it during the first sign-in rather than re-requesting it later.

Apple Sign In Redirect and Login

Once the user signs in with Apple and is redirected to the specified page under the Redirect URI configured in our Authentication Provider, they need to be logged in using ArcXP Identity. Below is an example code snippet for reference.

The example below uses react-router v6 (useSearchParams / useNavigate). Adapt to your router as needed.

import { useEffect } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';

export const AppleRedirectAndLogin = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const code = searchParams.get('code');
  const state = searchParams.get('state');

  useEffect(() => {
    // Verify `state` matches the value you stored before calling initiateOIDC
    // to protect against CSRF before exchanging the code.
    Identity.signInWithOIDC(code, state)
      .then(() => navigate('/profile'))
      .catch((err) => {
        console.error('Apple sign-in failed', err);
      });
  }, [code, state, navigate]);

  return <h3>Redirecting...</h3>;
};

You should now be set up to use Apple Sign In using the OIDC protocol.