# SignIn.LoginWithSeparator

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

Visual separator component that divides email login from social login options with localized separator text.

## Quick Example [#quick-example]

```tsx
import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";

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

  return (
    <SignIn.LoginWithSeparator
      textColor={theme.colors.onSurfaceVariant}
      lineColor={theme.colors.outline}
      testID="login-separator"
    />
  );
};

export default SeparatorExample;
```

## Props [#props]

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

## Localization [#localization]

The component uses this translation key:

```json
{
  "sign-in": {
    "or-login-with": "Or sign in with"
  }
}
```

- `sign-in.or-login-with` - Separator text displayed between email form and social logins

## Component Behavior [#component-behavior]

The component renders a horizontal layout with two flex lines and centered text, using theme spacing for consistent gap between elements.

## Styling [#styling]

### Theme Variables Used [#theme-variables-used]

- `theme.spacing(4)` - Gap spacing between separator elements
- `theme.colors.onSurfaceDisabled` - Default text color
- `theme.colors.outlineVariant` - Default line color

## Related Components [#related-components]

- [SignIn](/native-sdk/guide/components/auth/sign-in/) - Main sign-in component container
- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social logins container