# Sign-In

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

Use `SignIn` to compose an email sign-in screen from SDK components. The default
email form calls `client.auth.login()` on the active native `Ovok` client and activates the returned
login. Your app decides where a successful user goes and how sign-in errors are
presented.

## Add a patient sign-in screen [#add-a-patient-sign-in-screen]

Render the screen below [`OvokProvider`](/native-sdk/guide/how-to/app-shell) and the SDK
`ThemeProvider`. Patient sign-in uses the tenant configured on the native client;
pass the same tenant code to the existing form prop.

```tsx
import { SignIn } from "@ovok/native";
import { useRouter } from "expo-router";
import { Alert } from "react-native";

export function SignInScreen() {
  const router = useRouter();
  const tenantCode = process.env.EXPO_PUBLIC_TENANT_CODE;

  if (!tenantCode) {
    throw new Error("Set EXPO_PUBLIC_TENANT_CODE for this app environment");
  }

  return (
    <SignIn>
      <SignIn.Header>
        <SignIn.Header.Title />
        <SignIn.Header.Description />
      </SignIn.Header>

      <SignIn.EmailForm
        loginType="Patient"
        tenantCode={tenantCode}
        onSuccess={() => router.replace("/home")}
        onError={() =>
          Alert.alert("Sign-in failed", "Check your details or try again.")
        }
      >
        <SignIn.EmailForm.Inputs />
        <SignIn.EmailForm.SigninButton />
      </SignIn.EmailForm>

      <SignIn.RegisterLink onPress={() => router.push("/register")} />
    </SignIn>
  );
}
```

Use your app's route names in place of `/home` and `/register`. For practitioner
sign-in, set `loginType="Practitioner"`; the form's tenant code is optional for that
variant. For carer (RelatedPerson) sign-in, set `loginType="RelatedPerson"` with
the tenant code. Carers have no register route: their account is made when they
accept a record-share invite (see [Invites and carers](/native-sdk/guide/how-to/invites-and-carers)).

## Add MFA or social sign-in [#add-mfa-or-social-sign-in]

With the default client-backed form, an MFA response changes
`SignIn.EmailForm.Inputs` to the verification-code input. The SDK verifies that
code, activates the login, and then calls `onSuccess`. Use a compatible
`@ovok/core` release that supports MFA responses.

An `onSubmit` callback replaces the default submission path. If you provide
one, your implementation owns credential verification, MFA, active-login
storage, and session updates. The default `onSuccess` and `onError` callbacks
cannot be combined with that custom submitter.

Google and Apple buttons are optional. Add them inside `SignIn.SocialLogins`
only after completing the native provider setup in [installation](/native-sdk/guide/how-to/installation).
See the [social login reference](/native-sdk/guide/components/auth/sign-in/social-logins/) for provider props, and
[Sign in on the web](/native-sdk/guide/components/auth/sign-in/social-logins/#sign-in-on-the-web) for React Native Web.

## Related references [#related-references]

- [Sign-in container](/native-sdk/guide/components/auth/sign-in/container)
- [Email form](/native-sdk/guide/components/auth/sign-in/form/), [inputs](/native-sdk/guide/components/auth/sign-in/form/inputs), and [submit button](/native-sdk/guide/components/auth/sign-in/form/signin-button)
- [Authentication integration guide](/native-sdk/guide/modules/auth)