---
title: Function Overrides
description: Override frontend authentication functions to implement custom use cases.
sidebar:
  order: 20
---

## Overview

**Function overrides** let you customize the behavior of the functions used internally, by the SDKs.
You can change how actions like signing in, signing up, creating, or revoking sessions or signing out work.
This flexibility lets you integrate your own logic into the authentication and session management processes.

For example, if a recipe checks for an active session using the session recipe’s `doesSessionExist` function, you can override that function to work with your custom session management.
Similarly, if you already have a sign-in/sign-up flow and want to integrate with SuperTokens, overriding allows you to handle the migration process.
You can even implement your own `userId` format by mapping your `userIds` to those generated by SuperTokens.


## Before you start

This page is relevant if you are using the actual frontend SDK.
If you are calling the backend SDK endpoints directly this code does not run in your use case.


## Example

The code snippet shows the general flow of overriding a function. 
You inject your own custom logic while also calling the original implementation of the function.

:::info[The next examples include a couple of override samples.]
See all the [functions that can be overridden here](https://supertokens.com/docs/references/frontend-sdks/function-overrides)
:::

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Angular" value="angular">
:::info
See all the [functions that can be overridden here](https://supertokens.com/docs/references/frontend-sdks/function-overrides)
:::
</ContentOption>
</DependentContent>

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

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    Session.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding the function for checking
            // if a session exists
            doesSessionExist: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.doesSessionExist(input);
            },
          };
        },
      },
    }),
    EmailPassword.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign up button.
            signUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
    ThirdParty.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign in or sign up button.
            signInAndUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signInAndUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="pre-built UI globals are provided by the host framework"
// 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: [
    supertokensUISession.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding the function for checking
            // if a session exists
            doesSessionExist: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.doesSessionExist(input);
            },
          };
        },
      },
    }),
    supertokensUIEmailPassword.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign up button.
            signUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
    supertokensUIThirdParty.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign in or sign up button.
            signInAndUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signInAndUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
  ],
});
```
</Tab>
</CodeGroup>