Skip to main content


Overview steps#

Integrating SuperTokens with a Next.js app involves:

  • Calling the frontend and backend init functions
  • Adding a website page to display the auth related widgets (on /auth by default)
  • Creating a serverless function to expose the auth related APIs which will be consumed by the frontend widgets (on /api/auth/ by default)
  • Protecting website routes: Displaying them only when a user is logged in, else redirecting them to the login page
  • Performing session verification:
    • In your APIs
    • In getServerSideProps

Each of these will be covered in the next few pages. Rest of the customizations can be done by following the "Common customizations" section.

Try an example app#

Download and run an example NextJS app quickly using the following command:

npx [email protected] --frontend=next --recipe=thirdpartyemailpassword
What type of UI do you want to use?
Custom UI
Pre built UI