Files
lobehub__lobehub/apps/auth/app/shell/createAuthI18n.ts
Innei 12fa88e49a ✨ feat(auth): split the auth surface into a prerendered micro app (#18542)
* ♻️ refactor(auth): make the auth shell safe to prerender

Three changes, all behaviour-preserving for the current client-rendered
auth SPA, that a prerendered copy of the same pages needs:

- `enableBusinessFeatures` is a build-time constant, not deployment state.
  `AuthServerConfigProvider` now reads it from `@lobechat/business-const`
  instead of the injected server config, so a render that has not received
  that config yet still resolves the right SSO provider source.
- The terms checkbox and the "last used" provider both seeded `useState`
  from `localStorage` during render. A returning user's stored value makes
  the first render depend on the browser, which cannot be prerendered; they
  now start empty and fill in from an effect.
- `LobeAnalyticsProviderWrapper` accepts the analytics config as a prop and
  guards its `window` read, so it can render outside a browser.

Also drops the `@/features/AuthShell` barrel from the `src/features/Auth`
importers: the barrel re-exports `AuthShell`, which pulls `AuthLocale` and
the full en-US dictionary into every consumer's graph.

* ✨ feat(auth): split the auth surface into a prerendered micro app

`apps/auth` renders the sign-in flow ahead of time instead of shipping an
empty `#root`. React Router framework mode with `ssr: false` + `prerender`,
so the worker carries no React at all — 7KB, it picks one prerendered
document by locale and swaps in the deployment's config.

- 18 locales x 4 routes = 72 documents, plus a SPA fallback for the routes
  that take params. One build pass per locale writes the same canonical
  paths; the non-default passes are folded into `build/client/__i18n/`.
  Passes are independent, so they run 6 at a time (3m05s -> 44s).
- Each document inlines only its own locale's dictionary; the rest load on
  demand for the language switcher, which keeps them off the first-load
  path entirely.
- `/webapi/auth/spa-config` is a new public endpoint the worker reads to
  fill `window.__SERVER_CONFIG__`. It carries only the six fields the auth
  pages actually read; a failed lookup leaves the placeholder and the page
  still renders.
- Per-route SEO: real localized titles, and `noindex, nofollow` on every
  transactional page — only /signin and /signup stay indexable, with a
  canonical URL.

The existing Next.js `/spa-auth` route is untouched, so self-hosted and
Docker deployments keep serving the client-rendered SPA. This app builds
and deploys from lobehub-cloud, which overlays `@/business/*`.

* 🐛 fix(auth): restore feature flags and track the prerender lib
2026-09-03 19:34:41 +08:00

55 lines
1.8 KiB
TypeScript

import i18next from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import { initReactI18next } from 'react-i18next';
import { DEFAULT_LANG } from '@/const/locale';
import { normalizeLocale } from '@/locales/resources';
import type { AuthResourceBundle } from './i18nScript';
import { AUTH_NAMESPACES } from './i18nScript';
import { loadAuthNamespace } from './loadAuthNamespace';
interface CreateAuthI18nOptions {
locale: string;
resources: AuthResourceBundle;
}
// The served locale is bundled into the document and initialised synchronously,
// so prerender and hydration render identical markup; anything the language
// switcher reaches afterwards arrives through the on-demand backend.
export const createAuthI18n = ({ locale, resources }: CreateAuthI18nOptions) => {
const lng = normalizeLocale(locale);
const instance = i18next
.createInstance()
.use(initReactI18next)
.use(resourcesToBackend(loadAuthNamespace));
// With `ns: []` and the served language bundled, i18next treats every
// namespace as loaded and never asks the backend — switching has to fetch.
instance.on('languageChanged', (next) => {
if (normalizeLocale(next) === lng) return;
void instance.reloadResources([normalizeLocale(next)], [...AUTH_NAMESPACES]);
});
return {
init: () =>
instance.init({
defaultNS: ['auth', 'common', 'error'],
fallbackLng: DEFAULT_LANG,
initAsync: false,
interpolation: { escapeValue: false },
keySeparator: false,
lng,
ns: [],
partialBundledLanguages: true,
react: {
bindI18nStore: 'added',
useSuspense: false,
},
resources: { [lng]: resources },
showSupportNotice: false,
}),
instance,
};
};