# SignIn.SocialLogins.GoogleLogin

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/sign-in/social-logins/google-login

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

## Quick Example [#quick-example]

```tsx
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;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/auth` API reference](/native-sdk/reference/auth).

## Component Behavior [#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.

## On the web [#on-the-web]

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](/native-sdk/guide/components/auth/sign-in/social-logins/#sign-in-on-the-web).

## Styling [#styling]

### Theme Variables Used [#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 [#child-components]

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

## Related Components [#related-components]

- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social logins container
- [SignIn.SocialLogins.AppleLogin](/native-sdk/guide/components/auth/sign-in/social-logins/apple-login) - Apple authentication button