1. Configuration

Configure SuperTokens for authentication in your Next.js app with frontend and backend setup.

UI type

Pre-built UIDrop-in components that handle the flows for you.Custom UIBuild your own UI and call the SDK directly.

1. Install `supertokens` package

npm install supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors

yarn add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors

pnpm add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors

bun add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors

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.

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",
};

1. Install `supertokens` package

npm install supertokens-node supertokens-web-js nextjs-cors

yarn add supertokens-node supertokens-web-js nextjs-cors

pnpm add supertokens-node supertokens-web-js nextjs-cors

bun add supertokens-node supertokens-web-js nextjs-cors

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.

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",
};

4. Create a frontend config function

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);
          },
        },
      };
    },
  };
};

4. Create a frontend config function

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()],
  };
};

5. Create a backend config function

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;
  }
}

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.

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;

6. Call the frontend `init` functions

Create a /pages/_app.tsx file. Learn more in the Next.js Custom App documentation.

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;