Skip to main content

Sign-In

Use SignIn to compose an email sign-in screen from SDK components. The default email form calls login() on the active OvokClient 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​

Render the screen below OvokProvider and the SDK ThemeProvider. Patient sign-in requires the tenant code for the OVOK environment.

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"; a tenant code is optional for that variant.

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. See the social login reference for provider props.