About

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 your frontend routes

Try an example app

Download and run an example Next.js app quickly using the following command:

npx create-supertokens-app@latest --frontend=next --recipe=emailpassword

Follow our video guide

Integrating SuperTokens with a Next.js app involves:

• Calling the frontend and backend init functions
• Building the various auth flows as per the custom UI setup guide.
• 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 your frontend routes

Try an example app

Download and run an example Next.js app quickly using the following command:

npx create-supertokens-app@latest --frontend=next --recipe=emailpassword