# SignIn.SocialLogins.AppleLogin

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/sign-in/social-logins/apple-login

Apple authentication button component that handles Sign in with Apple integration and availability checking.

## Quick Example [#quick-example]

```tsx
import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";
import { Alert, StyleSheet } from "react-native";

// Static styles outside component
const styles = StyleSheet.create({
  appleButton: {
    alignItems: "center",
  },
});

const AppleLoginExample = () => {
  const theme = useAppTheme();

  const handleAppleSuccess = () => Alert.alert("Signed in");

  const handleAppleError = (error: Error) => Alert.alert("Sign-in failed", error.message);

  return (
    <SignIn.SocialLogins.AppleLogin
      internalId="apple-signin"
      onSuccess={handleAppleSuccess}
      onError={handleAppleError}
      style={[
        styles.appleButton,
        {
          backgroundColor: "#000000",
          borderRadius: theme.borderRadius(2),
          paddingHorizontal: theme.spacing(4),
          paddingVertical: theme.spacing(3),
        },
      ]}
    >
      <SignIn.SocialLogins.AppleLogin.Icon size={20} color="#ffffff" />
      <SignIn.SocialLogins.AppleLogin.Text
        style={{
          color: "#ffffff",
          fontWeight: "600",
        }}
      >
        Continue with Apple
      </SignIn.SocialLogins.AppleLogin.Text>
    </SignIn.SocialLogins.AppleLogin>
  );
};

export default AppleLoginExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/auth` API reference](/native-sdk/reference/auth).

## Component Behavior [#component-behavior]

The component checks Apple Sign-In availability on mount and handles the OAuth flow
when available. Until `AppleAuthentication.isAvailableAsync()` resolves, and on
platforms where it resolves `false`, the component renders `null` including no
fallback for its children. Render your own placeholder if the app needs one.

## On the web [#on-the-web]

On React Native Web the button opens Sign in with Apple JS in a popup for `appleServicesId`, with `appleRedirectUri`
as the Return URL (default: the site's origin). Without `appleServicesId` it renders nothing on the web. Use an
`internalId` that names an Ovok entry for the Services ID, because the web's tokens have it as their audience.
`expo-apple-authentication` is not loaded; see [Sign in on the web](/native-sdk/guide/components/auth/sign-in/social-logins/#sign-in-on-the-web).

## Styling [#styling]

### Theme Variables Used [#theme-variables-used]

- No specific theme variables used by default
- Inherits styling capabilities from TouchableOpacity

## Child Components [#child-components]

- **SignIn.SocialLogins.AppleLogin.Icon** - Apple logo icon component
- **SignIn.SocialLogins.AppleLogin.Text** - Text component with typography variant support

## Related Components [#related-components]

- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social logins container
- [SignIn.SocialLogins.GoogleLogin](/native-sdk/guide/components/auth/sign-in/social-logins/google-login) - Google authentication button