SignIn 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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/auth API reference.

Child ComponentsCopy Anchor Link

• SignIn.Header - Header section with title and description
• SignIn.EmailForm - Email/password form components and authentication logic
• SignIn.RegisterLink - Link for navigating to registration
• SignIn.SocialLogins - Social authentication options (Google, Apple)

Related ComponentsCopy Anchor Link

• SignIn.Header - Header section with title and description
• SignIn.EmailForm - Email/password form components and authentication logic
• SignIn.RegisterLink - Link for navigating to registration
• SignIn.SocialLogins - Social authentication options (Google, Apple)