# Sign in with Apple uses correct button styling if social login exists

- **Pattern:** `ab-000440` (`app-store-metadata-listing.platform-specific.sign-in-apple-button`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000440
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000440)

## Why it matters

Apple Guideline 4.8 requires that Sign in with Apple be offered whenever any other social login (Google, Facebook, Twitter) is available in an iOS app. Violation causes rejection. Beyond the guideline, Apple mandates use of its official button component (`AppleAuthenticationButton`) with approved styles — a custom-colored button that calls the Apple auth API but renders as a blue pill violates the Human Interface Guidelines and triggers rejection during review. CWE-284 (Improper Access Control) applies when the requirement is absent entirely: users who want Apple's privacy-preserving login (hide-my-email) are denied that option, pushing them toward more data-exposing alternatives.

## Severity rationale

High because offering any third-party login on iOS without Sign in with Apple causes automatic rejection under Guideline 4.8, blocking all users from the app.

## Remediation

Replace any custom sign-in button with the official Expo component:

```tsx
import * as AppleAuthentication from 'expo-apple-authentication';

<AppleAuthentication.AppleAuthenticationButton
  buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
  buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
  cornerRadius={5}
  style={{ width: '100%', height: 44 }}
  onPress={handleAppleSignIn}
/>
```

Do not wrap this in a custom `TouchableOpacity` or restyle it — Apple validates button authenticity during review. Ensure the Sign in with Apple button is the same height and visual weight as any Google or Facebook login button on the same screen. Enable the Sign in with Apple capability in `ios/[AppName].entitlements` and in App Store Connect under the app's capabilities before submission.

## Detection

- **ID:** `sign-in-apple-button`
- **Severity:** `high`
- **What to look for:** First, check whether Sign in with Apple is used: look for `@invertase/react-native-apple-authentication` or `expo-apple-authentication` in `package.json`; `SignInWithAppleButton` component imports; `appleAuth.performRequest()` calls; `expo.ios.usesAppleSignIn: true` in `app.json`. If Sign in with Apple is present, examine the button implementation: (a) Apple requires that the "Sign in with Apple" button use Apple's official button — either the `AppleButton` component from `@invertase/react-native-apple-authentication` or `AppleAuthentication.AppleAuthenticationButton` from `expo-apple-authentication`. Using a custom-styled button that mimics the appearance of the Apple sign-in button but is not the official component is a policy violation. (b) Check that the button's `buttonStyle` prop uses a valid Apple-defined style (`BLACK`, `WHITE`, `WHITE_OUTLINE`) rather than a custom color. (c) If other social login providers (Google, Facebook) are present, Sign in with Apple is required on iOS — check that it is present alongside other providers, not absent. (d) Apple's Human Interface Guidelines require that the Sign in with Apple button be at least as prominent as any other social login button on the same screen. Count all instances found and enumerate each.
- **Pass criteria:** Sign in with Apple uses the official Apple-provided button component with an approved style; or no social login is present; or the app is Android-only. At least 1 implementation must be confirmed.
- **Fail criteria:** Sign in with Apple is implemented with a custom button rather than the official Apple component; the button uses a custom non-Apple color (e.g., blue Sign in with Apple button); other social logins are present but Sign in with Apple is absent in an iOS app.
- **Skip (N/A) when:** App has no social login of any kind; or app is Android-only.
- **Detail on fail:** `"Sign in with Apple implemented with a custom TouchableOpacity instead of AppleAuthentication.AppleAuthenticationButton — this violates Apple's guidelines and causes rejection"` or `"Google Sign-In present but no Sign in with Apple found — required for iOS apps with third-party login options"`.
- **Remediation:** Incorrect Sign in with Apple button styling causes rejection under Apple Guideline 4.8.
  1. Use the official button from the authentication library:
     ```tsx
     import * as AppleAuthentication from 'expo-apple-authentication';
     <AppleAuthentication.AppleAuthenticationButton
       buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
       buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
       cornerRadius={5}
       style={{ width: 200, height: 44 }}
       onPress={handleAppleSignIn}
     />
     ```
  2. Never replace the Apple button with a custom component that just calls the Apple auth API
  3. Ensure the Sign in with Apple button is the same size or larger than other social login buttons on the same screen
  4. If adding any social login to an iOS app, Sign in with Apple must be included as an option

## External references

- external apple-guideline-4.8 — https://developer.apple.com/app-store/review/guidelines/#4.8
- cwe CWE-284

Taxons: regulatory-conformance, access-control

HTML version: https://auditbuffet.com/patterns/ab-000440