[BLOCKS]/Social Auth Buttons

SYS.UNIT // SOCIAL-AUTH-BUTTONS

EXPO 52 NATIVE

STRICT_TYPES

Social Auth Buttons

Branded OAuth authentication buttons for Apple, Google, and GitHub.

RUNTIME: 0.00 KB

STYLES: StyleSheet

PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

Source

┌┐

SIMULATION.ACTIVE// LIVE REACT NATIVE WEBSIM.ACTIVE

OR CONTINUE WITH

└┘

Installation

Install the component and its peer dependencies automatically via the CLI:

pnpm dlx @rnblocks/cli add social-auth-buttons

// SYS.USAGE

Drop this code into your screen or view:

social-auth-buttons-example.tsx

20 lines

1import SocialAuthButtons from "@/components/social-auth-buttons";
2 
3export default function LoginScreen() {
4  return (
5    <SocialAuthButtons
6      theme="dark"
7      showDivider={true}
8      dividerText="or continue with"
9      onGooglePress={async () => {
10        console.log("Initiate Google OAuth");
11      }}
12      onApplePress={async () => {
13        console.log("Initiate Apple Sign-In");
14      }}
15      onGithubPress={async () => {
16        console.log("Initiate GitHub OAuth");
17      }}
18    />
19  );
20}

// SPEC.PROPS_API

Configurable interfaces for <SocialAuthButtons />

PROP_IDENTIFIER	TYPE_SIGNATURE	DEFAULT_VAL	TELEMETRY_NOTES
theme	"dark" \| "light"	`"dark"`	Color theme mode for button backgrounds, borders, and brand labels.
onApplePress	() => void \| Promise<void>	`undefined`	Callback fired when the Apple authentication button is pressed.
onGooglePress	() => void \| Promise<void>	`undefined`	Callback fired when the Google authentication button is pressed.
onGithubPress	() => void \| Promise<void>	`undefined`	Callback fired when the GitHub authentication button is pressed.
showDivider	boolean	`false`	Whether to render a stylized divider above the social auth button stack.
dividerText	string	`"Or continue with"`	Text displayed in the center of the divider.
disabled	boolean	`false`	Disables interaction across all buttons during active authentication flows.

theme

"dark" | "light"

Color theme mode for button backgrounds, borders, and brand labels.

DEFAULT:"dark"

onApplePress

() => void | Promise<void>

Callback fired when the Apple authentication button is pressed.

DEFAULT:undefined

onGooglePress

() => void | Promise<void>

Callback fired when the Google authentication button is pressed.

DEFAULT:undefined

onGithubPress

() => void | Promise<void>

Callback fired when the GitHub authentication button is pressed.

DEFAULT:undefined

showDivider

boolean

Whether to render a stylized divider above the social auth button stack.

DEFAULT:false

dividerText

string

Text displayed in the center of the divider.

DEFAULT:"Or continue with"

disabled

boolean

Disables interaction across all buttons during active authentication flows.

DEFAULT:false

// PERFORMANCE_&_A11Y

Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets:

All provider triggers declare accessibilityRole='button'.

Explicit accessibilityLabel for each brand (e.g. 'Continue with Google', 'Continue with Apple').

accessibilityState={{ disabled }} dynamically announced during loading/disabled state.

48pt touch target height ensures comfortable thumb activation and WCAG compliance.

[PREV]|Comparison Chart

Trend Chart|[NEXT]