One login per sub domain

We will demonstrate the changes required for this with an example:

• Customer 1: Let's say that the name of the customer is abc. In this case, we want them to login via abc.example.com/auth and get redirected to use abc.example.com after login.
• Customer 2: Let's say that the name of the customer is xyz. In this case, we want them to login via xyz.example.com/auth and get redirected to use xyz.example.com after login.

An example implementation can be found here.

Let's take a look at some of the implementation details of our demo app.

Frontend setup:

• Change the init function params

ReactJS

SuperTokens.init({
    appInfo: {
        appName: "YOUR APP NAME",
        apiDomain: "YOUR API DOMAIN",
        websiteDomain: window.location.hostname,
    },
    recipeList: [
        EmailPassword.init(),
        Session.init({
            sessionScope: ".example.com"
        })

    })]
});

We set a different websiteDomain values per customer. We are also allowing a session to work on any subdomain of example.com.

• Now let's take a look at the App component in our demo implementation:

ReactJS

function App() {
   useEffect(() => {
        // If the user `abc` navigates to `xyz.example.com`, redirect them back to
        // their correct subdomain i.e `abc.example.com`
        redirectIfOnWrongSubdomain();
    }, []); 
    return (...)
}

When the component mounts, we verify that the user is on correct subdomain, using the useEffect hook. If not, we redirect them to their correct domain using redirectIfOnWrongSubdomain (defined in utils.js).

You can find the implementation details for these functions in the example repo.

Backend setup:

• Change the init function params in accordance with the frontend.

NodeJS

supertokens.init({
    appInfo: {
        appName: "YOUR APP NAME",
        apiDomain: "YOUR API DOMAIN",
        websiteDomain: "example.com"

    },
    recipeList: [
        EmailPassword.init({
            resetPasswordUsingTokenFeature: {
                getResetPasswordURL: (user) => {
                    let {id, email} = user;

                    // getUserDomain is your implementation
                    let userDomain = await getUserDomain(email);

                    return `https://${userDomain}.example.com/reset-password`;
                }
            },

            emailVerificationFeature: {
                getEmailVerificationURL: (user) => {
                    let {id, email} = user;

                    // getUserDomain is your implementation
                    let userDomain = await getUserDomain(email);

                    return `https://${userDomain}.example.com/verify-email`;
                }
            },
        }),
        Session.init()
    ]
});