# SignIn Container

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/sign-in/container

The main container component that wraps all sign-in related functionality. It provides a scrollable interface with keyboard handling and safe area support, serving as the foundation for building complete sign-in experiences.

> **SDK-first — do NOT hand-roll an auth form.** When your build needs sign-in, render `<SignIn>` + `<SignIn.EmailForm>` from `@ovok/native`. The component ships the entire form (email + password inputs, Formik/Yup validation, submit handler, error states, social-login buttons, "Forgot password" link, and the MFA step) and reads theme tokens via `useAppTheme()` automatically. A hand-rolled `<TextInput>` + `<Pressable onPress={...}>` clone has none of that and locks you out of future SDK upgrades. If you're tempted to write your own form because "I just need email + password", you don't — `<SignIn.EmailForm>` IS that.

## Quick Start Example [#quick-start-example]

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

// Static styles outside component
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const LoginScreen = () => {
  const { t } = useTranslation();
  const theme = useAppTheme();

  return (
    <SignIn
      style={[
        styles.container,
        {
          backgroundColor: theme.colors.background,
        },
      ]}
      contentContainerStyle={{
        padding: theme.spacing(3),
        gap: theme.spacing(4),
      }}
    >
      <SignIn.Header>
        <SignIn.Header.Title>{t("auth.signIn.title")}</SignIn.Header.Title>
        <SignIn.Header.Description>
          {t("auth.signIn.description")}
        </SignIn.Header.Description>
      </SignIn.Header>

      <SignIn.EmailForm
        loginType="Patient"
        tenantCode="your-tenant-code"
        onSuccess={(response) => {
          // Handle successful authentication
        }}
        onError={(error) => {
          // Handle authentication error
        }}
      >
        <SignIn.EmailForm.Inputs />
        <SignIn.EmailForm.SigninButton />
      </SignIn.EmailForm>
    </SignIn>
  );
};

export default LoginScreen;
```

## Props [#props]

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

## Child Components [#child-components]

- [SignIn.Header](/native-sdk/guide/components/auth/sign-in/header/) - Header section with title and description
- [SignIn.EmailForm](/native-sdk/guide/components/auth/sign-in/form/) - Email/password form components and authentication logic
- [SignIn.RegisterLink](/native-sdk/guide/components/auth/sign-in/register-link) - Link for navigating to registration
- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social authentication options (Google, Apple)

## Related Components [#related-components]

- [SignIn.Header](/native-sdk/guide/components/auth/sign-in/header/) - Header section with title and description
- [SignIn.EmailForm](/native-sdk/guide/components/auth/sign-in/form/) - Email/password form components and authentication logic
- [SignIn.RegisterLink](/native-sdk/guide/components/auth/sign-in/register-link) - Link for navigating to registration
- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social authentication options (Google, Apple)