---
title: Override React components
description: Learn to replace and enhance specific components rendered by SuperTokens.
sidebar:
  order: 30
---

## Overview

SuperTokens allows you to customize the React components by overriding them.
In this context, an override is a new component that renders additional data or adds new functionality.
Each override should also render the original component to ensure the integrity of the authentication UI.

## Before you start

:::warning
This feature is only applicable to React apps that use the prebuilt UI.
:::

## Steps

### 1. Figure out which component to override

Discover the name of the component that you need to override by using the React Developer Tools extension.
Look for the names defined in component override configuration and/or components ending in `_Override` in the component tree.

<img alt="Checking which component from the prebuilt UI is overridden using React Developer Tools extension" src="/docs-assets/img/thirdpartyemailpassword/override/find-component.png" />


### 2. Add your override

Inside the `SuperTokensWrapper`, update the recipe specific override context with your next component.
Make sure that it your override renders the SuperTokens components inside it.

<CodeGroup group="react-router">
<Tab title="With React Router" value="yes">
```tsx check=false reason="component excerpt imports an application-local image asset"
import React from "react";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { AuthRecipeComponentsOverrideContextProvider } from "supertokens-auth-react/ui";
import { EmailPasswordComponentsOverrideProvider } from "supertokens-auth-react/recipe/emailpassword";
import { ThirdpartyComponentsOverrideProvider } from "supertokens-auth-react/recipe/thirdparty";

import octocat from "./octocat.png";

function App() {
  return (
    <SuperTokensWrapper>
      <AuthRecipeComponentsOverrideContextProvider
        components={{
          AuthPageHeader_Override: ({ DefaultComponent, ...props }) => {
            return (
              <div>
                <img src="octocat.jpg" />
                <DefaultComponent {...props} />
              </div>
            );
          },
        }}
      >
        <EmailPasswordComponentsOverrideProvider
          components={{
            EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => {
              // your customisations here for the email password sign up form...
              return <DefaultComponent {...props} />;
            },
          }}
        >
          <ThirdpartyComponentsOverrideProvider
            components={{
              ThirdPartySignInAndUpProvidersForm_Override: ({ DefaultComponent, ...props }) => {
                // optionally override the third party providers list..
                return <DefaultComponent {...props} />;
              },
            }}
          >
            {/* Rest of the JSX */}
          </ThirdpartyComponentsOverrideProvider>
        </EmailPasswordComponentsOverrideProvider>
      </AuthRecipeComponentsOverrideContextProvider>
    </SuperTokensWrapper>
  );
}
export default App;
```
</Tab>
<Tab title="Without React Router" value="no">
```tsx check=false reason="component excerpt imports an application-local image asset"
import React from "react";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { getRoutingComponent, canHandleRoute } from "supertokens-auth-react/ui";
import { AuthRecipeComponentsOverrideContextProvider } from "supertokens-auth-react/ui";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
import { EmailPasswordComponentsOverrideProvider } from "supertokens-auth-react/recipe/emailpassword";
import { ThirdpartyComponentsOverrideProvider } from "supertokens-auth-react/recipe/thirdparty";

import octocat from "./octocat.png";

function App() {
  if (canHandleRoute([EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI])) {
    return (
      <AuthRecipeComponentsOverrideContextProvider
        components={{
          AuthPageHeader_Override: ({ DefaultComponent, ...props }) => {
            return (
              <div>
                <img src="octocat.jpg" />
                <DefaultComponent {...props} />
              </div>
            );
          },
        }}
      >
        <EmailPasswordComponentsOverrideProvider
          components={{
            EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => {
              // your customisations here for the email password sign up form...
              return <DefaultComponent {...props} />;
            },
          }}
        >
          <ThirdpartyComponentsOverrideProvider
            components={{
              ThirdPartySignInAndUpProvidersForm_Override: ({ DefaultComponent, ...props }) => {
                // optionally override the third party providers list..
                return <DefaultComponent {...props} />;
              },
            }}
          >
            {getRoutingComponent([EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI])}
          </ThirdpartyComponentsOverrideProvider>
        </EmailPasswordComponentsOverrideProvider>
      </AuthRecipeComponentsOverrideContextProvider>
    );
  }
  return <SuperTokensWrapper>{/* Rest of the JSX */}</SuperTokensWrapper>;
}
export default App;
```
</Tab>
</CodeGroup>

<img alt="Prebuilt sign in UI with custom image" src="/docs-assets/img/thirdpartyemailpassword/react-override-octocat.png" />

:::note[Please make sure that you specify the configuration in a `.tsx` or ` .jsx` file type.]
:::