# Parts: SocialSignIn to OrdersScope (/themes/sdk/reference/customer/parts-3)

```ts
import { … } from '@poltura/theme-sdk/customer';
```

## `SocialSignIn` [#socialsignin]

The external sign-in buttons, with the terms and privacy note; nothing when no provider is on.

```ts
SocialSignIn(props: SocialSignInProps): ReactElement | null
```

The host runs the redirect to the provider and back, remembers the page and the language the shopper came from, and finishes the session.

**Props:** [`SocialSignInProps`](/themes/sdk/reference/customer/types-3#socialsigninprops)

**Example**

```tsx
import { SocialSignIn, useAuthForm } from '@poltura/theme-sdk/customer';

export function OtherWays() {
  return <SocialSignIn form={useAuthForm('signIn')} />;
}
```

## `EmailCodeStep` [#emailcodestep]

The verify page's whole step: the field for the code from the email, then the password a sign-up chooses, with the button that finishes it.

```ts
EmailCodeStep(props: EmailCodeStepProps): ReactElement
```

Works inside the verify page's main section only. A shopper who opened the email's link arrives with the code held and sees the second part; one who read the email elsewhere types the code.

**Props:** [`EmailCodeStepProps`](/themes/sdk/reference/customer/types-3#emailcodestepprops)

**Example**

```tsx
import { EmailCodeStep } from '@poltura/theme-sdk/customer';
import { overrideSection } from '@poltura/theme-sdk/elements';

export const verifyMain = overrideSection('verify-main', () => (
  <div className='mx-auto max-w-md py-12'>
    <EmailCodeStep />
  </div>
));
```

## `AuthFields` [#authfields]

The sign-in or sign-up form the merchant placed on the page, drawn through the theme's override of it when there is one; nothing when the merchant hid it.

```ts
AuthFields(props: AuthFieldsProps): ReactElement | null
```

Works inside the sign-in and sign-up pages' main section only.

**Props:** [`AuthFieldsProps`](/themes/sdk/reference/customer/types-3#authfieldsprops)

**Example**

```tsx
import { AuthFields, authRegions } from '@poltura/theme-sdk/customer';
import { Slot, overrideSection } from '@poltura/theme-sdk/elements';

export const authMain = overrideSection('auth-form', ({ attrs }) => (
  <div {...attrs}>
    <Slot name={authRegions.head} />
    <AuthFields className='mx-auto max-w-md' />
  </div>
));
```

## `BusinessSignUpFields` [#businesssignupfields]

The company fields of a registration form: buyer type, company, tax number with its live check and tier applications; nothing without [`BusinessSignUp`](/themes/sdk/reference/customer/types-1#businesssignup).

```ts
BusinessSignUpFields(props: BusinessSignUpFieldsProps): ReactElement | null
```

**Props:** [`BusinessSignUpFieldsProps`](/themes/sdk/reference/customer/types-3#businesssignupfieldsprops)

**Example**

```tsx
import { AuthInput, AuthSubmit, BusinessSignUpFields, useAuthForm } from '@poltura/theme-sdk/customer';

export function SignUp() {
  const form = useAuthForm('register');
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <AuthInput form={form} field='email' />
      <AuthInput form={form} field='password' />
      <BusinessSignUpFields form={form} />
      <AuthSubmit form={form} />
    </form>
  );
}
```

## `OrdersScope` [#ordersscope]

Hands a page of orders to the order history block placed inside it, so the section that pages and the block that lists read one page.

```ts
OrdersScope(props: OrdersScopeProps): ReactElement
```

**Props:** [`OrdersScopeProps`](/themes/sdk/reference/customer/types-3#ordersscopeprops)

**Example**

```tsx
import { useState } from 'react';
import { OrdersScope, accountRegions, useOrders } from '@poltura/theme-sdk/customer';
import { Slot } from '@poltura/theme-sdk/elements';

export function OrderHistory() {
  const [page] = useState(1);
  const orders = useOrders({ page });
  return (
    <OrdersScope orders={orders}>
      <Slot name={accountRegions.orders} />
    </OrdersScope>
  );
}
```