Which UI do you use?

Custom UI

Pre built UI

3. Exposing Auth APIs

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

1) Create the netlify/functions/auth.js page

• Be sure to create the netlify/functions/ folder.
• An example of this can be found here.

netlify/functions/auth.ts

import supertokens from "supertokens-node";
import { middleware } from "supertokens-node/framework/awsLambda";
import middy from "@middy/core";
import cors from "@middy/http-cors";
import { getBackendConfig } from "../../config/supertokensConfig";

supertokens.init(getBackendConfig());

module.exports.handler = middy(middleware(async (event, context) => {
    if (event.httpMethod === "OPTIONS") {
        return {
            statusCode: 200,
            body: ""
        }
    }
    
    return {
        statusCode: 404,
        body: "Not Found",
    }
})).use(
    cors({
        origin: getBackendConfig().appInfo.websiteDomain,
        credentials: true,
        headers: ["Content-Type", ...supertokens.getAllCORSHeaders()].join(", "),
        methods: "OPTIONS,POST,GET,PUT,DELETE",
    })
).onError(request => {
    throw request.error;
});

important

• Notice that we called supertokens.init above. We will need to call this in all API endpoints that use any functions related to supertokens.
• CORS is only needed if you are hosting your frontend using a separate domain (if your website domain is different that your API's domain).

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