# SignIn.EmailForm

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

Complete email/password authentication interface combining all form elements with validation, error handling, and customization options. Provides compound components for building flexible sign-in forms with built-in authentication logic.

## Prerequisites [#prerequisites]

Before using the Sign-In module, you must configure your `ovokClient` with a valid tenant code.

### Obtaining Your Tenant Code [#obtaining-your-tenant-code]

To get your organization's tenant code, use the Ovok API to receive organization codes via email:

```bash
curl -X POST https://api.ovok.com/organizations/code/email \
  -H "Content-Type: application/json" \
  -d '{"email": "your-email@example.com"}'
```

For detailed API documentation, refer to the [Ovok API Reference](https://docs.ovok.com/reference/organizationcodecontroller_sendemailoforganizations).

### Configuring Your Client [#configuring-your-client]

Once you receive your tenant code, update your `ovokClient` configuration in `app/_layout.tsx`:

```tsx
import { Ovok } from "@ovok/native/next";
import * as SecureStore from "expo-secure-store";

const ovokClient = new Ovok({
  baseUrl: "https://api.example.com",
  tenantCode: "your-tenant-code-here",
  secureStore: SecureStore,
});
```

## Quick Start Example [#quick-start-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({
  form: {
    flex: 1,
  },
});

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

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

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

  return (
    <SignIn.EmailForm
      loginType="Patient"
      tenantCode="your-tenant-code"
      onSuccess={handleSuccess}
      onError={handleError}
      style={[
        styles.form,
        {
          padding: theme.spacing(12),
          gap: theme.spacing(12),
        },
      ]}
    >
      <SignIn.EmailForm.Inputs />
      <SignIn.EmailForm.ForgotPassword />
      <SignIn.EmailForm.Spacing percentage={3} />
      <SignIn.EmailForm.SigninButton />
    </SignIn.EmailForm>
  );
};

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.EmailForm.Inputs](/native-sdk/guide/components/auth/sign-in/form/inputs)** - Email and password input fields with validation
- **[SignIn.EmailForm.SigninButton](/native-sdk/guide/components/auth/sign-in/form/signin-button)** - Submit button with loading states and error display
- **[SignIn.EmailForm.ForgotPassword](/native-sdk/guide/components/auth/sign-in/form/forgot-password)** - Forgot password link component
- **[SignIn.EmailForm.Spacing](/native-sdk/guide/components/auth/sign-in/form/spacing)** - Layout spacing component for consistent vertical spacing

## Localization [#localization]

The SignIn.EmailForm component uses these translation keys that should be defined in your localization files:

```json
{
  "sign-in": {
    "email": "Email",
    "password": "Password",
    "button": "Sign In",
    "forgot-password": "Forgot password?",
    "form": {
      "email": {
        "invalid": "Invalid email address",
        "required": "Email is required"
      },
      "password": {
        "required": "Password is required"
      }
    }
  }
}
```

### Translation Key Usage [#translation-key-usage]

- `sign-in.email` - Email input field label
- `sign-in.password` - Password input field label
- `sign-in.button` - Submit button text
- `sign-in.forgot-password` - Forgot password link text
- `sign-in.form.email.invalid` - Email validation error message
- `sign-in.form.email.required` - Required email field error
- `sign-in.form.password.required` - Required password field error

The SDK registers English defaults for these keys without overwriting your own translations.

## Common Patterns [#common-patterns]

### With Custom Validation [#with-custom-validation]

```tsx
import { SignIn, useAppTheme } from "@ovok/native";
import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

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

const customValidations = {
  email: (existingRule: Yup.StringSchema) =>
    existingRule
      .email("Invalid email address")
      .matches(/@ovok\.com$/, "Email must be from ovok.com domain"),
};

export const CustomValidationLoginForm = () => {
  const theme = useAppTheme();

  return (
    <SignIn.EmailForm
      loginType="Practitioner"
      customValidations={customValidations}
      style={[
        styles.form,
        {
          gap: theme.spacing(4),
        },
      ]}
    >
      <SignIn.EmailForm.Inputs />
      <SignIn.EmailForm.SigninButton />
    </SignIn.EmailForm>
  );
};
```

## Related Components [#related-components]

- [SignIn](/native-sdk/guide/components/auth/sign-in/) - Main sign-in component container
- [SignIn.Header](/native-sdk/guide/components/auth/sign-in/header/) - Header components for titles and descriptions
- [SignIn.SocialLogins](/native-sdk/guide/components/auth/sign-in/social-logins/) - Social authentication components