SignIn.SocialLogins.GoogleLogin

Google authentication button component that handles OAuth integration with automatic Google Sign-In configuration.

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({
  googleButton: {
    alignItems: "center",
  },
});

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

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

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

  return (
    <SignIn.SocialLogins.GoogleLogin
      googleIosClientId="your-ios-client-id.googleusercontent.com"
      googleWebClientId="your-web-client-id.googleusercontent.com"
      internalId="google-signin"
      onSuccess={handleGoogleSuccess}
      onError={handleGoogleError}
      style={[
        styles.googleButton,
        {
          borderRadius: theme.borderRadius(2),
          paddingHorizontal: theme.spacing(4),
        },
      ]}
    >
      <SignIn.SocialLogins.GoogleLogin.Icon size={20} />
      <SignIn.SocialLogins.GoogleLogin.Text variant="labelLarge">
        Continue with Google
      </SignIn.SocialLogins.GoogleLogin.Text>
    </SignIn.SocialLogins.GoogleLogin>
  );
};

export default GoogleLoginExample;

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 configures Google Sign-In on mount and remains disabled until GoogleSignin.configure() succeeds. If configuration throws, the button stays disabled for that mount and does not call onError; validate the client IDs before rendering it.

On the webCopy Anchor Link

On React Native Web the button signs in through a redirect to Google and back, using googleWebClientId and googleRedirectUri (default /oauth/google.html). googleIosClientId is ignored, and nothing from @react-native-google-signin/google-signin is loaded. The app serves the return page, which the SDK exports as GOOGLE_RETURN_PAGE_HTML; see Sign in on the web.

StylingCopy Anchor Link

Theme Variables UsedCopy Anchor Link

• theme.spacing(2) - Gap spacing between icon and text elements
• theme.spacing(2) - Vertical padding for button
• Dynamic background/border colors based on theme.dark property

Child ComponentsCopy Anchor Link

• SignIn.SocialLogins.GoogleLogin.Icon - Google logo icon component
• SignIn.SocialLogins.GoogleLogin.Text - Text component with typography variant support

Related ComponentsCopy Anchor Link

• SignIn.SocialLogins - Social logins container
• SignIn.SocialLogins.AppleLogin - Apple authentication button