Pre-filled Data

Learn how to handle registration with pre-existing data and partial user information.

Basic Pre-filled Registration

Use default values to pre-populate form fields:

import React from "react";
import { View, Text } from "react-native";
import { Register } from "@ovok/native";

export const PreFilledRegistration = () => {
  const existingUserData = {
    name: "John",
    surname: "Doe",
    email: "john.doe@example.com",
  };

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>
          Complete Your Registration
        </Register.Header.Title>
        <Register.Header.Description>
          Just add a password to finish setting up your account
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={existingUserData}
        tenantCode="your-tenant-code"
        onSuccess={(response) =>
          console.log("Registration completed:", response)
        }
        onError={(error) => console.error("Registration failed:", error)}
      >
        {/* Only password fields will be shown since other fields are pre-filled */}
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Handle registration after social authentication:

import React from "react";
import { Register } from "@ovok/native";

export const SocialRegistrationCompletion = () => {
  // Data received from social login (Google, Apple, etc.)
  const socialUserData = {
    name: "Jane",
    surname: "Smith",
    email: "jane.smith@gmail.com",
    // No password needed for social login
    password: "social_auth_token",
  };

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Welcome, Jane!</Register.Header.Title>
        <Register.Header.Description>
          Your account has been created successfully
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={socialUserData}
        tenantCode="your-tenant-code"
        onSuccess={(response) => {
          console.log("Social registration completed:", response);
          // Navigate to dashboard
        }}
        onError={(error) => console.error("Error:", error)}
      >
        {/* No input fields will be shown since all required data is provided */}
        <Register.EmailForm.Inputs />

        {/* Show completion message or additional setup options */}
        <View style={{ padding: 20, alignItems: "center" }}>
          <Text>Your account is ready to use!</Text>
        </View>

        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Partial Data Flow

Handle cases where only some information is available:

import React from "react";
import { Register } from "@ovok/native";

export const PartialDataRegistration = () => {
  // Email from invitation or previous step
  const partialData = {
    email: "invited.user@company.com",
  };

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Complete Your Profile</Register.Header.Title>
        <Register.Header.Description>
          Please provide your details to finish registration
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={partialData}
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Profile completed:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        {/* Email field will be hidden, name/surname/password fields will show */}
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Dynamic Data Loading

Load user data asynchronously and pre-fill the form:

import React, { useState, useEffect } from "react";
import { Register } from "@ovok/native";
import { ActivityIndicator, View } from "react-native";

export const DynamicPreFilledRegistration = ({
  userId,
}: {
  userId: string;
}) => {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadUserData = async () => {
      try {
        // Fetch user data from API
        const response = await fetch(`/api/users/${userId}/profile`);
        const data = await response.json();

        setUserData({
          name: data.firstName,
          surname: data.lastName,
          email: data.emailAddress,
        });
      } catch (error) {
        console.error("Failed to load user data:", error);
        setUserData({}); // Empty object to show all fields
      } finally {
        setLoading(false);
      }
    };

    loadUserData();
  }, [userId]);

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Update Your Information</Register.Header.Title>
        <Register.Header.Description>
          Please verify and complete your details
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={userData}
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Updated successfully:", response)}
        onError={(error) => console.error("Update failed:", error)}
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Password-only Registration

For cases where only password is needed:

import React from "react";
import { Register } from "@ovok/native";

export const PasswordOnlyRegistration = () => {
  const completeUserData = {
    name: "Michael",
    surname: "Johnson",
    email: "michael.johnson@company.com",
  };

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Set Your Password</Register.Header.Title>
        <Register.Header.Description>
          Create a secure password for your account: {completeUserData.email}
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={completeUserData}
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Password set:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        {/* Only password and password confirmation fields will show */}
        <Register.EmailForm.Inputs />
        <Register.EmailForm.Spacing percentage={2} />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Editable Pre-filled Data

Allow users to edit pre-filled information:

import React, { useState } from "react";
import { Register } from "@ovok/native";
import { View, TouchableOpacity, Text } from "react-native";

export const EditablePreFilledRegistration = () => {
  const [allowEdit, setAllowEdit] = useState(false);

  const defaultData = {
    name: "Sarah",
    surname: "Wilson",
    email: "sarah.wilson@email.com",
  };

  // Don't pass defaultValues if editing is allowed
  const formDefaultValues = allowEdit ? {} : defaultData;

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Confirm Your Details</Register.Header.Title>
        <Register.Header.Description>
          Review your information and set a password
        </Register.Header.Description>
      </Register.Header>

      {!allowEdit && (
        <View
          style={{ padding: 16, backgroundColor: "#F5F5F5", borderRadius: 8 }}
        >
          <Text style={{ fontSize: 16, marginBottom: 8 }}>
            Your Information:
          </Text>
          <Text>
            Name: {defaultData.name} {defaultData.surname}
          </Text>
          <Text>Email: {defaultData.email}</Text>

          <TouchableOpacity
            onPress={() => setAllowEdit(true)}
            style={{ marginTop: 12 }}
          >
            <Text style={{ color: "#007AFF", fontWeight: "600" }}>
              Edit Information
            </Text>
          </TouchableOpacity>
        </View>
      )}

      <Register.EmailForm
        defaultValues={formDefaultValues}
        tenantCode="your-tenant-code"
        onSuccess={(response) =>
          console.log("Registration completed:", response)
        }
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Form State Management

Handle complex pre-filled data scenarios:

import React, { useMemo } from "react";
import { Register } from "@ovok/native";

interface UserProfile {
  firstName?: string;
  lastName?: string;
  emailAddress?: string;
  hasPassword?: boolean;
}

export const StateBasedRegistration = ({
  profile,
}: {
  profile: UserProfile;
}) => {
  const defaultValues = useMemo(() => {
    const values: any = {};

    if (profile.firstName) values.name = profile.firstName;
    if (profile.lastName) values.surname = profile.lastName;
    if (profile.emailAddress) values.email = profile.emailAddress;

    // If user already has a password, don't require password confirmation
    if (profile.hasPassword) {
      values.password = "existing_password";
      values.passwordConfirm = "existing_password";
    }

    return values;
  }, [profile]);

  const getHeaderContent = () => {
    const missingFields = [];
    if (!profile.firstName) missingFields.push("name");
    if (!profile.lastName) missingFields.push("surname");
    if (!profile.emailAddress) missingFields.push("email");
    if (!profile.hasPassword) missingFields.push("password");

    if (missingFields.length === 0) {
      return {
        title: "Welcome Back!",
        description: "Your account is ready to use.",
      };
    }

    return {
      title: "Complete Your Profile",
      description: `Please provide your ${missingFields.join(", ")} to continue.`,
    };
  };

  const headerContent = getHeaderContent();

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>{headerContent.title}</Register.Header.Title>
        <Register.Header.Description>
          {headerContent.description}
        </Register.Header.Description>
      </Register.Header>

      <Register.EmailForm
        defaultValues={defaultValues}
        tenantCode="your-tenant-code"
        onSuccess={(response) => console.log("Profile updated:", response)}
        onError={(error) => console.error("Error:", error)}
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Features

Conditional Fields: Fields are automatically hidden when default values are provided
Flexible Data: Support for partial, complete, or dynamic data
Social Integration: Handle social login data seamlessly
State Management: Complex logic for different user states
Validation: Maintains validation rules even with pre-filled data
User Experience: Smooth flow for different registration scenarios

Field Visibility Rules

Default Value Provided	Field Visibility
`name`	Name field hidden
`surname`	Surname field hidden
`email`	Email field hidden
`password`	Password field hidden
`passwordConfirm` OR `password`	Password confirmation hidden

Best Practices

Clear Communication: Tell users why fields are pre-filled
Edit Options: Allow users to modify pre-filled data when appropriate
Validation: Maintain proper validation even with default values
Loading States: Show loading indicators when fetching data
Error Handling: Handle cases where data loading fails
Security: Don't pre-fill sensitive data inappropriately

Next Steps

Basic Usage - Learn fundamental registration patterns
Custom Validation - Add validation for pre-filled data

Basic Pre-filled Registration​

Social Login Flow​

Partial Data Flow​

Dynamic Data Loading​

Password-only Registration​

Editable Pre-filled Data​

Form State Management​

Features​

Field Visibility Rules​

Best Practices​

Next Steps​