Syncing data with Clerk

const {email} = useUser();
const doSomething = useMutation(api.foo.bla);
const <button onClick={() => doSomething({email})} />;

const {email} = useUser();
const doSomething = useMutation(api.foo.bla);
const <button onClick={() => doSomething({email})} />;

You're right. Client-side data can be tampered with, and it's essential to ensure that the backend independently verifies the identity and permissions of the user making the request. To address this, you should rely on server-side authentication and data fetching. Here's how you can adjust the architecture to ensure security and reliability:


To replace useUser with a secure server-side approach, we need to fetch user data on the server side and pass it to the client components. Here's how you can translate the code:

You're right. Client-side data can be tampered with, and it's essential to ensure that the backend independently verifies the identity and permissions of the user making the request. To address this, you should rely on server-side authentication and data fetching. Here's how you can adjust the architecture to ensure security and reliability:


To replace useUser with a secure server-side approach, we need to fetch user data on the server side and pass it to the client components. Here's how you can translate the code:

export interface UserJSON extends ClerkResourceJSON {
    object: typeof ObjectType.User;
    username: string | null;
    first_name: string | null;
    last_name: string | null;
    image_url: string;
    has_image: boolean;
    primary_email_address_id: string | null;
    primary_phone_number_id: string | null;
    primary_web3_wallet_id: string | null;
    password_enabled: boolean;
    two_factor_enabled: boolean;
    totp_enabled: boolean;
    backup_code_enabled: boolean;
    email_addresses: EmailAddressJSON[];
    phone_numbers: PhoneNumberJSON[];
    web3_wallets: Web3WalletJSON[];
    organization_memberships: OrganizationMembershipJSON[] | null;
    external_accounts: ExternalAccountJSON[];
    saml_accounts: SamlAccountJSON[];
    password_last_updated_at: number | null;
    public_metadata: UserPublicMetadata;
    private_metadata: UserPrivateMetadata;
    unsafe_metadata: UserUnsafeMetadata;
    external_id: string | null;
    last_sign_in_at: number | null;
    banned: boolean;
    locked: boolean;
    lockout_expires_in_seconds: number | null;
    verification_attempts_remaining: number | null;
    created_at: number;
    updated_at: number;
    last_active_at: number | null;
    create_organization_enabled: boolean;
}

export interface UserJSON extends ClerkResourceJSON {
    object: typeof ObjectType.User;
    username: string | null;
    first_name: string | null;
    last_name: string | null;
    image_url: string;
    has_image: boolean;
    primary_email_address_id: string | null;
    primary_phone_number_id: string | null;
    primary_web3_wallet_id: string | null;
    password_enabled: boolean;
    two_factor_enabled: boolean;
    totp_enabled: boolean;
    backup_code_enabled: boolean;
    email_addresses: EmailAddressJSON[];
    phone_numbers: PhoneNumberJSON[];
    web3_wallets: Web3WalletJSON[];
    organization_memberships: OrganizationMembershipJSON[] | null;
    external_accounts: ExternalAccountJSON[];
    saml_accounts: SamlAccountJSON[];
    password_last_updated_at: number | null;
    public_metadata: UserPublicMetadata;
    private_metadata: UserPrivateMetadata;
    unsafe_metadata: UserUnsafeMetadata;
    external_id: string | null;
    last_sign_in_at: number | null;
    banned: boolean;
    locked: boolean;
    lockout_expires_in_seconds: number | null;
    verification_attempts_remaining: number | null;
    created_at: number;
    updated_at: number;
    last_active_at: number | null;
    create_organization_enabled: boolean;
}

export const upsertFromClerk = internalMutation({
  args: { data: v.any() as Validator<UserJSON> }, // no runtime validation, trust Clerk
  async handler(ctx, { data }) {
    const userAttributes = {
      firstName: data.first_name,
      externalId: data.id,
      // Should all UserJSON attributes exist here? 
    };

    const user = await userByExternalId(ctx, data.id);
    if (user === null) {
      await ctx.db.insert("users", userAttributes);
    } else {
      await ctx.db.patch(user._id, userAttributes);
    }
  },
});

export const upsertFromClerk = internalMutation({
  args: { data: v.any() as Validator<UserJSON> }, // no runtime validation, trust Clerk
  async handler(ctx, { data }) {
    const userAttributes = {
      firstName: data.first_name,
      externalId: data.id,
      // Should all UserJSON attributes exist here? 
    };

    const user = await userByExternalId(ctx, data.id);
    if (user === null) {
      await ctx.db.insert("users", userAttributes);
    } else {
      await ctx.db.patch(user._id, userAttributes);
    }
  },
});