---
title: Configure email and SMS behavior
description: Customize how the email and SMS are sent in your frontend application.
sidebar:
  order: 60
---

## Changing email / SMS resend time interval

:::warning
These instructions are only applicable if you are using the pre-built UI.
:::


You can set `resendEmailOrSMSGapInSeconds` to establish a minimum delay before the frontend allows the user to click the "Resend" button.
This limit is only enforced on the client-side. For API rate-limiting please check out the [deployment section](/deployment/rate-limits).


<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    Passwordless.init({
      contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
      signInUpFeature: {
        // The default value is 15 seconds
        resendEmailOrSMSGapInSeconds: 60,
      },
    }),
    Session.init({
      /* ... */
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIPasswordless.init({
      contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
      signInUpFeature: {
        // The default value is 15 seconds
        resendEmailOrSMSGapInSeconds: 60,
      },
    }),
    supertokensUISession.init({
      /* ... */
    }),
  ],
});
```
</Tab>
</CodeGroup>


---

## Setting default country for phone inputs

:::warning
These instructions are only applicable if you are using the pre-built UI.
:::

<PasswordlessRecipeForm />

<ContextCondition condition={{
    "recipes.passwordless.contactMethod": "EMAIL"
}}>

Since your delivery method is email, this section is not relevant. If you would still like to see the content, you can resubmit your desired configuration by clicking on the button above.

</ContextCondition>

<ContextCondition condition={{
    "recipes.passwordless.contactMethod": "PHONE"
}}>

By default, there is no default country selected. This means that users have to select / type in their phone number international code when signing in / signing up.

If you would like to set a default country (for all users), then you should use the `defaultCountry` configuration:

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    Passwordless.init({
      contactMethod: "PHONE",
      signInUpFeature: {
        /*
         * Must be a two-letter ISO country code (e.g.: "US")
         */
        defaultCountry: "HU",
      },
    }),
    Session.init({
      /* ... */
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIPasswordless.init({
      contactMethod: "PHONE",
      signInUpFeature: {
        /*
         * Must be a two-letter ISO country code (e.g.: "US")
         */
        defaultCountry: "HU",
      },
    }),
    supertokensUISession.init({
      /* ... */
    }),
  ],
});
```
</Tab>
</CodeGroup>

</ContextCondition>
<ContextCondition condition={{
    "recipes.passwordless.contactMethod": "EMAIL_OR_PHONE"
}}>

By default, there is no default country selected. This means that users have to select / type in their phone number international code when signing in / signing up.

If you would like to set a default country (for all users), then you should use the `defaultCountry` configuration:

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    Passwordless.init({
      contactMethod: "EMAIL_OR_PHONE",
      signInUpFeature: {
        /*
         * Must be a two-letter ISO country code (e.g.: "US")
         */
        defaultCountry: "HU",
      },
    }),
    Session.init({
      /* ... */
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="This example omits surrounding application and SuperTokens configuration."
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIPasswordless.init({
      contactMethod: "EMAIL_OR_PHONE",
      signInUpFeature: {
        /*
         * Must be a two-letter ISO country code (e.g.: "US")
         */
        defaultCountry: "HU",
      },
    }),
    supertokensUISession.init({
      /* ... */
    }),
  ],
});
```
</Tab>
</CodeGroup>

</ContextCondition>


---


## See also

<CardGroup cols={3}>
  <Card title="Email Delivery" href="/platform-configuration/email-delivery" />
  <Card title="SMS Delivery" href="/platform-configuration/sms-delivery" />
  <Card title="Rate Limiting" href="/deployment/rate-limits" />
  <Card title="Customize the magic link" href="/authentication/passwordless/customize-the-magic-link" />
  <Card title="Customize the OTP" href="/authentication/passwordless/customize-the-otp" />
  <Card title="Hooks and overrides" href="/authentication/passwordless/hooks-and-overrides" />
</CardGroup>