20 replies

How to persist next-intl locale during social-provider sign-up?

I can’t figure out how to reliably save the user’s locale during social-provider sign-up (Google, GitHub, etc.).
My app uses next-intl, so the locale is always a path param (/en/…, /cs/…).
With email+password I simply send locale in the body, but OAuth redirects lose this value.
Current attempt
Client (Next.js 15 + better-auth 1.3.2):

onClick={async () => {
 await authClient.signIn.social({
  provider: link.id,
  newUserCallbackURL: `/dashboard?locale=${locale}`,
 });
}}

onClick={async () => {
 await authClient.signIn.social({
  provider: link.id,
  newUserCallbackURL: `/dashboard?locale=${locale}`,
 });
}}

Server after hook:

if (ctx.path.startsWith("/sign-in/social")) {
 const locale =
 (ctx.query?.state as string)
 ?.split("&")
 .find((p) => p.startsWith("locale="))
 ?.split("=")[1] || "en";
 console.log(locale);
 const newSession = ctx.context.session;
 console.log(newSession);
 if (newSession) {
   await userRepository.updateUserLocale(newSession.user.id, locale);
  }
}

if (ctx.path.startsWith("/sign-in/social")) {
 const locale =
 (ctx.query?.state as string)
 ?.split("&")
 .find((p) => p.startsWith("locale="))
 ?.split("=")[1] || "en";
 console.log(locale);
 const newSession = ctx.context.session;
 console.log(newSession);
 if (newSession) {
   await userRepository.updateUserLocale(newSession.user.id, locale);
  }
}

What I’m missing
-How should I forward the locale so the callback handler can read it?
-Which exact path (/callback/:provider?) and which field (query.state, query.locale, body?) should I check?
-Is there a built-in way to pass arbitrary data (like locale) through the OAuth flow, or must I use cookies / custom state?
Happy to refactor the code—just need the canonical pattern.
Thanks!

Solution

Solution:

      if (ctx.path.startsWith("/callback/")) { //Here just use a /callback/ to catch all OAuth routes
        const newSession = ctx.context.newSession ?? ctx.context.session;
        if (newSession) {
          try {
            const locale = ctx.getCookie("NEXT_LOCALE") || "en";
            await userRepository.updateUserLocale(newSession.user.id, locale);
            console.log(
              `OAuth user ${newSession.user.id} created with locale: ${locale}`
            );
          } catch (error) {
            console.error("Failed to set OAuth user locale:", error);
          }
        }
      }

      if (ctx.path.startsWith("/callback/")) { //Here just use a /callback/ to catch all OAuth routes
        const newSession = ctx.context.newSession ?? ctx.context.session;
        if (newSession) {
          try {
            const locale = ctx.getCookie("NEXT_LOCALE") || "en";
            await userRepository.updateUserLocale(newSession.user.id, locale);
            console.log(
              `OAuth user ${newSession.user.id} created with locale: ${locale}`
            );
          } catch (error) {
            console.error("Failed to set OAuth user locale:", error);
          }
        }
      }

Jump to solution

How to persist next-intl locale during social-provider sign-up?

onClick={async () => {
 await authClient.signIn.social({
  provider: link.id,
  newUserCallbackURL: `/dashboard?locale=${locale}`,
 });
}}

onClick={async () => {
 await authClient.signIn.social({
  provider: link.id,
  newUserCallbackURL: `/dashboard?locale=${locale}`,
 });
}}

Server after hook:

if (ctx.path.startsWith("/sign-in/social")) {
 const locale =
 (ctx.query?.state as string)
 ?.split("&")
 .find((p) => p.startsWith("locale="))
 ?.split("=")[1] || "en";
 console.log(locale);
 const newSession = ctx.context.session;
 console.log(newSession);
 if (newSession) {
   await userRepository.updateUserLocale(newSession.user.id, locale);
  }
}

if (ctx.path.startsWith("/sign-in/social")) {
 const locale =
 (ctx.query?.state as string)
 ?.split("&")
 .find((p) => p.startsWith("locale="))
 ?.split("=")[1] || "en";
 console.log(locale);
 const newSession = ctx.context.session;
 console.log(newSession);
 if (newSession) {
   await userRepository.updateUserLocale(newSession.user.id, locale);
  }
}

Solution

Solution:

      if (ctx.path.startsWith("/callback/")) { //Here just use a /callback/ to catch all OAuth routes
        const newSession = ctx.context.newSession ?? ctx.context.session;
        if (newSession) {
          try {
            const locale = ctx.getCookie("NEXT_LOCALE") || "en";
            await userRepository.updateUserLocale(newSession.user.id, locale);
            console.log(
              `OAuth user ${newSession.user.id} created with locale: ${locale}`
            );
          } catch (error) {
            console.error("Failed to set OAuth user locale:", error);
          }
        }
      }

      if (ctx.path.startsWith("/callback/")) { //Here just use a /callback/ to catch all OAuth routes
        const newSession = ctx.context.newSession ?? ctx.context.session;
        if (newSession) {
          try {
            const locale = ctx.getCookie("NEXT_LOCALE") || "en";
            await userRepository.updateUserLocale(newSession.user.id, locale);
            console.log(
              `OAuth user ${newSession.user.id} created with locale: ${locale}`
            );
          } catch (error) {
            console.error("Failed to set OAuth user locale:", error);
          }
        }
      }

Jump to solution

How to persist next-intl locale during social-provider sign-up?

How to persist next-intl locale during social-provider sign-up?

Similar Threads

Similar Threads

Similar Threads