Apple Sign-In Integration using AppleJS

Frontend
1

Apple Sign-In Integration using AppleJS

This guide walks you through the complete process of integrating Apple Sign-In in a React application using AppleJS.

:white_check_mark: Prerequisites

  • Node.js and npm installed
  • React project set up (e.g., via create-react-app or Next.js)
  • Apple Developer Account ($99/year)
  • Custom domain with HTTPS (required by Apple for redirect URLs)

:pushpin: Step 1: Apple Developer Account Setup

1.1 Create App ID

  1. Log in to Apple Developer Console.
  2. Navigate to Certificates, Identifiers & Profiles.
  3. Go to Identifiers > App IDs > + to register a new App ID.
    1071×434 66.3 KB
  4. Fill out:
    • Description: Your app name
    • Bundle ID: com.yourdomain.yourapp
  5. Under Capabilities, check :white_check_mark: Sign In with Apple.
  6. Click Continue > Register.

1.2 Create Service ID

  1. Go to Identifiers > Services IDs > + to register a new Service ID.
  2. Fill out:
    • Description: Your app name
    • Identifier: com.yourdomain.yourapp.service
      1072×362 57.6 KB
  3. Enable :white_check_mark: Sign In with Apple.
  4. Click Configure:
    • Add your domain and return URLs (e.g., https://yourdomain.com)
      1082×952 105 KB
  5. Click Continue > Register.

1.3 Create Key (.p8)

  1. Navigate to Keys > + to create a new key.
    1073×702 128 KB
  2. Fill out:
    • Key Name: Sign In with Apple Key
  3. Enable :white_check_mark: Sign In with Apple.
  4. Click Configure:
  5. Click Continue > Register > Download the .p8 file.

:locked: Important: Save this file securely. It can only be downloaded once.

Make note of:

  • Key ID
  • Team ID (found in your Apple developer account)

:laptop: Step 2: Implement Apple Sign-In in React

Embed AppleJS Script

In your component or _document.tsx, include:

<Script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" />

Handle Sign-In Function

function handleAppleSignIn() {
  AppleID.auth.init({
    clientId: process.env.NEXT_PUBLIC_APPLE_CLIENT_ID,
    scope: 'name email',
    redirectURI: process.env.NEXT_PUBLIC_AUTH_URL,
    state: 'state123',
    usePopup: true,
  });

  AppleID.auth.signIn().then((response: any) => {
    if (response?.authorization?.id_token) {
      const id_token = response.authorization.id_token;
      const decodedToken = jwt.decode(id_token);
      const { email, sub } = decodedToken as { email: string; sub: string };

      const cookieData : SessionCookie = {
        email: email,
        idToken: id_token,
        sub: sub,
        type: "Apple"
      };

      document.cookie = `session=${encodeURIComponent(JSON.stringify(cookieData))}; path=/; max-age=${60 * 60 * 24 * 7}; SameSite=Strict`;

      const sessionCookie = getSessionData();
      if (sessionCookie) {
        // navigate to a success screen
      } else {
        // error
      }
    }
  }).catch((error: any) => {
    console.error('Error during Apple login:', error);
  });
}

Apple Sign-In Button

<SocialButton
  icon="/images/apple.png"
  alt="apple logo"
  onClick={() => handleAppleSignIn()}
/>

:rocket: Step 3: Test Your Integration

Start your React app:

npm start
  1. Click the Sign in with Apple button.
  2. Authenticate using your Apple ID.
  3. You should be redirected to your configured return URL with an ID token.
  4. Verify that:
    • The token is stored correctly.
    • User data is fetched successfully.

:paperclip: Notes

  • :white_check_mark: Your return URL must use HTTPS and be registered in the Apple Developer Console.
  • :white_check_mark: The clientId must exactly match the Service ID identifier.
  • Sign in with Apple feature doesn’t work with localhost (or 127.0.0.1) and requires a real domain/ or domain name with etc/hosts mapping.
  • :cross_mark: Never expose your .p8 file or use it in client-side code.
    It is for server-side token validation and refresh handling only.
3 Likes