---
title: 1. Configuration
description: Configure SuperTokens for authentication in your Next.js app with frontend and backend setup.
sidebar:
  order: 2
---

<UITypeSwitch />

<VariantContent storageKey="ui-type" value="prebuilt">

## 1. Install `supertokens` package
<CodeGroup group="package-managers">
```bash title="npm"
npm install supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors
```

```bash title="Yarn"
yarn add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors
```

```bash title="pnpm"
pnpm add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors
```

```bash title="Bun"
bun add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors
```
</CodeGroup>

## 2. Create configuration files
- Create a `config` folder in the root directory of your project
- Create an `appInfo.ts` inside the `config` folder.
- Create a `backendConfig.ts` inside the `config` folder.
- Create a `frontendConfig.ts` inside the `config` folder.


## 3. Create the `appInfo` configuration.


```tsx title="/config/appInfo.ts"
export const appInfo = {
  // learn more about this on https://supertokens.com/docs/references/backend-sdks/reference#sdk-configuration
  appName: "<YOUR_APP_NAME>",
  apiDomain: "<YOUR_API_DOMAIN>",
  websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
  apiBasePath: "/auth",
  websiteBasePath: "/auth",
};
```

</VariantContent>

<VariantContent storageKey="ui-type" value="custom">

## 1. Install `supertokens` package
<CodeGroup group="package-managers">
```bash title="npm"
npm install supertokens-node supertokens-web-js nextjs-cors
```

```bash title="Yarn"
yarn add supertokens-node supertokens-web-js nextjs-cors
```

```bash title="pnpm"
pnpm add supertokens-node supertokens-web-js nextjs-cors
```

```bash title="Bun"
bun add supertokens-node supertokens-web-js nextjs-cors
```
</CodeGroup>

## 2. Create configuration files
- Create a `config` folder in the root directory of your project
- Create an `appInfo.ts` inside the `config` folder.
- Create a `backendConfig.ts` inside the `config` folder.
- Create a `frontendConfig.ts` inside the `config` folder.


## 3. Create the `appInfo` configuration.


```tsx title="/config/appInfo.ts"
export const appInfo = {
  // learn more about this on https://supertokens.com/docs/references/backend-sdks/reference#sdk-configuration
  appName: "<YOUR_APP_NAME>",
  apiDomain: "<YOUR_API_DOMAIN>",
  websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
  apiBasePath: "/auth",
};
```

</VariantContent>


<VariantContent storageKey="ui-type" value="prebuilt">

## 4. Create a frontend config function

```tsx title="/config/frontendConfig.ts" check=false reason="Requires surrounding framework application context"
import EmailPasswordReact from "supertokens-auth-react/recipe/emailpassword";
import SessionReact from "supertokens-auth-react/recipe/session";
import { appInfo } from "./appInfo";
import Router from "next/router";

export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [EmailPasswordReact.init(), SessionReact.init()],
    windowHandler: (oI: any) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href: string) => {
            Router.push(href);
          },
        },
      };
    },
  };
};
```

</VariantContent>

<VariantContent storageKey="ui-type" value="custom">

## 4. Create a frontend config function

```tsx title="/config/frontendConfig.ts" check=false reason="Requires surrounding framework application context"
import EmailPasswordWebJs from "supertokens-web-js/recipe/emailpassword";
import SessionWebJs from "supertokens-web-js/recipe/session";
import { appInfo } from "./appInfo";

export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [EmailPasswordWebJs.init(), SessionWebJs.init()],
  };
};
```

</VariantContent>

## 5. Create a backend config function

```tsx title="/config/backendConfig.ts" check=false reason="Requires surrounding framework application context"
import SuperTokens from "supertokens-node";
import EmailPasswordNode from "supertokens-node/recipe/emailpassword";
import SessionNode from "supertokens-node/recipe/session";
import { appInfo } from "./appInfo";
import type { TypeInput } from "supertokens-node/types";

export const backendConfig = (): TypeInput => {
  return {
    framework: "express",
    supertokens: {
      connectionURI: "<CORE_API_ENDPOINT>",
      apiKey: "<YOUR_API_KEY>",
    },
    appInfo,
    recipeList: [EmailPasswordNode.init(), SessionNode.init()],
    isInServerlessEnv: true,
  };
};

let initialized = false;

export function ensureSuperTokensInit() {
  if (!initialized) {
    SuperTokens.init(backendConfig());
    initialized = true;
  }
}
```


<VariantContent storageKey="ui-type" value="prebuilt">

## 6. Call the frontend `init` functions and wrap with `<SuperTokensWrapper>` component

- Create a `/pages/_app.tsx` file. Learn more in the [Next.js Custom App documentation](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).


```tsx title="/pages/_app.tsx" check=false reason="Requires surrounding framework application context"
import "../styles/globals.css";
import type { AppProps } from "next/app";
import SuperTokensReact, { SuperTokensWrapper } from "supertokens-auth-react";

import { frontendConfig } from "../config/frontendConfig";

if (typeof window !== "undefined") {
  SuperTokensReact.init(frontendConfig());
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SuperTokensWrapper>
      <Component {...pageProps} />
    </SuperTokensWrapper>
  );
}

export default MyApp;
```

</VariantContent>

<VariantContent storageKey="ui-type" value="custom">

## 6. Call the frontend `init` functions

- Create a `/pages/_app.tsx` file. Learn more in the [Next.js Custom App documentation](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).


```tsx title="/pages/_app.ts" check=false reason="Requires surrounding framework application context"
import "../styles/globals.css";
import type { AppProps } from "next/app";
import SuperTokensWebJs from "supertokens-web-js";

import { frontendConfig } from "../config/frontendConfig";

if (typeof window !== "undefined") {
  SuperTokensWebJs.init(frontendConfig());
}

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
```

</VariantContent>