One login, many sub domains

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

• Login domain: auth.example.com.
• Customer 1: Let's say that the customer's company name is abc. In this case, we want them to use abc.example.com.
• Customer 2: Let's say that the customer's company name is xyz. In this case, we want them to use xyz.example.com.

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: "auth.example.com",
        websiteBasePath: "/"
    },
    recipeList: [
        EmailPassword.init(
            getRedirectionURL: async (context) => {
                if (context.action === "SUCCESS") {
                    // redirect users to their associated subdomain e.g 
                    // abc.example.com for user abc
                    // NOTE: getRedirectionURLForUser is your implementation
                    const redirectionUrl = await getRedirectionUrlForUser();
                    return redirectionUrl;
                }
            }
        ),
        Session.init({
            sessionScope: ".example.com"
        })
    ]
});

With the above, we are setting the login screen on auth.example.com. We are also allowing a session to work on any subdomain of example.com.

Inside the getRedirectionURL callback we are redirecting the user to their associated subdomain using the utility function getRedirectionUrlForUser (defined in utils.js in the example repo). This function queries the backend server (api-server.js) to get the correct subdomain for the currently authenticated user.

• 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 (
        <div className="App">
            <Router>
                <div className="fill">
                    <Switch>
                       {window.location.origin === getAuthDomain() ? (
                            getSuperTokensRoutesForReactRouterDom()
                        )   :   (
                            <Route path="/">
                                <EmailPassword.EmailPasswordAuth>
                                <Home />
                                </EmailPassword.EmailPasswordAuth>
                            </Route>
                        )}
                    </Switch>
                </div>
                <Footer />
            </Router>
        </div>
    );
}

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).

Inside the Switch we are presenting our users with login/signup when they are on auth.example.com. If not we render our protected route. In case the user is unauthenticated the auth wrapper will simply redirect them to the login/signup page.

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: "auth.example.com",
        websiteBasePath: "/"

    },
    recipeList: [
        EmailPassword.init(),
        Session.init()
    ]
});