SignIn.SocialLogins.AppleLogin

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

Quick ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/auth API reference.

Component BehaviorCopy Anchor Link

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 webCopy Anchor Link

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.

StylingCopy Anchor Link

Theme Variables UsedCopy Anchor Link

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

Child ComponentsCopy Anchor Link

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

Related ComponentsCopy Anchor Link

• SignIn.SocialLogins - Social logins container
• SignIn.SocialLogins.GoogleLogin - Google authentication button