SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

SuperTokens.com

Hey!
Im having an issue using Supertokens with my current i18n setup. The i18n setup is pretty normal, just next-i18next (https://github.com/i18next/next-i18next) and two locales, using sub-path routing (https://nextjs.org/docs/advanced-features/i18n-routing#sub-path-routing). When I use the default locale route (ie: http://localhost:3000/auth) everything works fine, but when I use any other locale (ie: http://localhost:3000/pt/auth) the auth form doesn't render, and no errors are shown. The auth route is the default `auth/[[...path]].tsx` using `SuperTokensComponentNoSSR`. I'm wondering if `getRoutingComponent` can't handle the sub-path routing strategy, or if anyone has any ideia on whats going on.

hey <@162779589414748160> 

The getRoutingComponent function only returns the component when you are visiting the `/auth` route. At the moment, it doesn't take into account sub routes unfortunately.

You can however, override the windowHandler in the supertokens.init on the frontend and hack your way around this. There should be a function in the windowHandler which is used to get the current path, and you can return the current path as `/auth` in case you are on `/auth/<some lang>`.

thanks <@498057949541826571> I'll give it a try and report back

I was able to hack `windowHandler` and use a combination of query params and local storage to track the user's locale. The component now renders for any locale, and login works. The problem is that this basically disables i18n in the  `/auth` route because that route needs to be in the default locale (so it doesn't have a prefix), which is not ideal

```ts
windowHandler: (oI) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href) => {
            console.log("href", href);
            console.log("Router.locale", Router.locale);
            const origin = oI.location.getOrigin();
            if (href === "/pt") {
              console.log(
                "href is /pt, redirecting to /pt and updating locale to pt"
              );
              Router.push(href, undefined, { locale: "pt" });
              return;
            }
            if (href === "/") {
              // This is hit after successful login
              console.log(
                "href is /, checking if we need to redirect to another locale"
              );
              const lang = oI.localStorage.getItemSync("prevlang");
              console.log("lang from localstorage", lang);
              if (!lang) {
                console.log("no lang in localstorage, doing nothing");
                Router.push("/");
                return;
              }
              console.log("redirecting to lang", href + lang);
              Router.push(href + lang);
              return;
            }
            console.log("other path");
            const newurl = new URL(origin + href);
            newurl.searchParams.append("prevlang", Router.locale);
            console.log("saving prevlang", Router.locale);
            oI.localStorage.setItemSync("prevlang", Router.locale);
            console.log("newurl", newurl.toString());
            console.log("redirecting to EN");
            Router.push(newurl, undefined, { locale: "en" });
          },
        },
      };
    },
```

I’m not sure I completely understand, but my idea was that if the actual path is /auth/pt, you would return /auth from this function so supertokens renders the UI, whilst the translation lib still gets /auth/pt, making the right translation happen.