Skip to main content

SignIn.SocialLogins.AppleLogin

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

Quick Example​

import { AuthResponse } from "@ovok/core";
import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";
import { StyleSheet } from "react-native";

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

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

  const handleAppleSuccess = (response: AuthResponse) => {
    console.log("Apple login successful:", response);
  };

  const handleAppleError = (error: Error) => {
    console.error("Apple login failed:", error);
  };

  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​

PropTypeRequiredDefaultDescription
internalIdstring✓-Internal tracking ID
onSuccess(response: AuthResponse) => void--Success callback
onError(error: Error) => void--Error callback
testIDstring--Test identifier
childrenReact.ReactNode✓-Button content

Inherits all TouchableOpacityProps except press handlers

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.

Styling​

Theme Variables Used​

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

Child Components​

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