Skip to main content

SignIn.SocialLogins.GoogleLogin

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

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

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

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

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

  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;

Props​

PropTypeRequiredDefaultDescription
googleIosClientIdstring✓-iOS OAuth client ID
googleWebClientIdstring✓-Web OAuth client ID
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 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.

Styling​

Theme Variables Used​

  • 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 Components​

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