Skip to main content

3. Adding auth APIs

We will add all the backend APIs for auth on /api/auth. This can be changed by setting the apiBasePath property in the appInfo object in the appInfo.js file. For the rest of this page, we will assume you are using /api/auth.

1) Create the pages/api/auth/[[...path]].tsx page#

  • Be sure to create the auth folder in the pages/api/ folder.
  • [[...path]].tsx will use the middleware exposed by supertokens-node which exposes all the APIs like sign in, sign up etc..
  • An example of this can be found here.

2) Expose the SuperTokens APIs#

pages/api/auth/[[...path]].ts
import { superTokensNextWrapper } from 'supertokens-node/nextjs'import { middleware } from 'supertokens-node/framework/express'import { NextApiRequest, NextApiResponse } from 'next'import { Request, Response } from 'express';import supertokens from 'supertokens-node'import { backendConfig } from '../../../config/backendConfig'import NextCors from "nextjs-cors";
supertokens.init(backendConfig())
export default async function superTokens(  req: NextApiRequest & Request,  res: NextApiResponse & Response) {
  // NOTE: We need CORS only if we are querying the APIs from a different origin  await NextCors(req, res, {    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],    origin: "<YOUR_WEBSITE_DOMAIN>",    credentials: true,    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],  });
  await superTokensNextWrapper(    async (next) => {      await middleware()(req, res, next)    },    req,    res  )  if (!res.writableEnded) {    res.status(404).send('Not found')  }}

3) Use the login widget#

If you are now able to sign in or sign up, this means the backend setup is done correctly! If not, please feel free to ask questions on Discord

What type of UI do you want to use?
Custom UI
Pre built UI