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 automatically checks Apple Sign-In availability and handles the complete OAuth flow including credential verification and authentication with the backend.

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