Which UI do you use?

Custom UI

Pre built UI

Inserting Users into Supabase when they sign up

In our example app there are two ways for signing up a user. Email-Password and Social Login based authentication. We will need to override both these APIs such that when a user signs up, their email mapped to their userId is stored in Supabase.

Step 1: Overriding the Email-Password signup function

import EmailPassword from "supertokens-node/recipe/emailpassword";
import SessionNode from "supertokens-node/recipe/session";
import { TypeInput, AppInfo } from "supertokens-node/types";

// take a look at the Creating Supabase Client section to see how to define getSupabase
let getSupabase: any;

let appInfo: AppInfo = {
    appName: "TODO: add your app name",
    apiDomain: "TODO: add your website domain",
    websiteDomain: "TODO: add your website domain"
}

let backendConfig = (): TypeInput => {
    return {
        framework: "express",
        supertokens: {
            connectionURI: "https://try.supertokens.com",
        },
        appInfo,
        recipeList: [
            EmailPassword.init({
                override: {
                    apis: (originalImplementation) => {
                        return {
                            ...originalImplementation,
                            // the SignUpPOST function handles sign up via Email-Password
                            signUpPOST: async function (input) {
                                let response = await originalImplementation.signUpPOST!(input);

                                if (response.status === "OK" && response.user.loginMethods.length === 1 && input.session === undefined) {

                                    // retrieve the accessTokenPayload from the user's session
                                    const accessTokenPayload = response.session.getAccessTokenPayload();

                                    // create a supabase client with the supabase_token from the accessTokenPayload
                                    const supabase = getSupabase(accessTokenPayload.supabase_token);

                                    // store the user's email mapped to their userId in Supabase
                                    const { error } = await supabase
                                        .from("users")
                                        .insert({ email: response.user.emails[0], user_id: response.user.id });

                                    if (error !== null) {

                                        throw error;
                                    }
                                }

                                return response;
                            },
                        };
                    },
                },
            }),
            SessionNode.init({/*...*/}),
        ],
        isInServerlessEnv: true,
    };
};

We will be changing the the Email-Password signup flow by overriding the signUpPost api. When a user signs up we will retrieve the supabase_token from the user's accessTokenPayload(this was added in the previous step where we changed the createNewSession function) and use it to query Supabase to insert the new user's information.

Step 2: Overriding the Social Provider login function:

// config/backendConfig.ts

import ThirdParty from "supertokens-node/recipe/thirdparty";
import SessionNode from "supertokens-node/recipe/session";
import { TypeInput, AppInfo } from "supertokens-node/types";

// take a look at the Creating Supabase Client section to see how to define getSupabase
let getSupabase: any;

let appInfo: AppInfo = {
    appName: "TODO: add your app name",
    apiDomain: "TODO: add your website domain",
    websiteDomain: "TODO: add your website domain"
}

let backendConfig = (): TypeInput => {
    return {
        framework: "express",
        supertokens: {
            connectionURI: "https://try.supertokens.com",
        },
        appInfo,
        recipeList: [
            ThirdParty.init({
                signInAndUpFeature: {
                    providers: [/*...*/],
                },
                override: {
                    apis: (originalImplementation) => {
                        return {
                            ...originalImplementation,
                            // the signInUpPost function handles sign up/in via Social login
                            signInUpPOST: async function (input) {
                                // call the sign up/in api for social login
                                let response = await originalImplementation.signInUpPOST!(input);

                                // check that there is no issue with sign up and that a new user is created
                                if (response.status === "OK" && response.createdNewRecipeUser && response.user.loginMethods.length === 1 && input.session === undefined) {

                                    // retrieve the accessTokenPayload from the user's session
                                    const accessTokenPayload = response.session.getAccessTokenPayload();

                                    // create a supabase client with the supabase_token from the accessTokenPayload
                                    const supabase = getSupabase(accessTokenPayload.supabase_token);

                                    // store the user's email mapped to their userId in Supabase
                                    const { error } = await supabase
                                        .from("users")
                                        .insert({ email: response.user.emails[0], user_id: response.user.id });

                                    if (error !== null) {

                                        throw error;
                                    }
                                }

                                return response;
                            }
                        };
                    },
                },
            }),
            SessionNode.init({/*...*/}),
        ],
        isInServerlessEnv: true,
    };
};

We will be changing the Social Login flow by overriding the signInUpPost api. We will first check that the user logging in is a new user. If they are a new user we will retrieve the supabase_token from their accessTokenPayload and use it to map their email to userId in Supabase.