https://supertokens.com/ logo
localisation with different routing
d

dc

04/05/2023, 6:33 PM
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.
r

rp

04/05/2023, 6:37 PM
hey @dc 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>
.
d

dc

04/05/2023, 6:38 PM
thanks @rp 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" });
          },
        },
      };
    },
^ not complete code, just a PoC
r

rp

04/05/2023, 9:49 PM
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.