Language selection

[tanosugi]

I made features as we talked in #96
some are overwrapping with #85

1. Total 30 languages are covered with json file for each language with AI translation. Reviewd ja.json by myself because it is my mother language.
2. Made script /lib/locale/update-enjson.sh to extract English sentences from auth-localization.ts
3. Made translation work flow in package.json scripts part (translate by json-autotranslate with free DeepL API key)
4. Added locale arg to AuthUiProvider and AuthCard.
5. Added useBrowserLang arg to AuthCard. With this arg, language is chosen based on user's browser setting and sentence come from json files.

[tanosugi]

Please review and merge.

[daveycodez]

Looks cool. Need to consider if it should be bundled with the package though or just downloaded from docs manually. Some users might not want the increased bundle size.

The json-autotranslate stuff looks really useful.

Anyway as far as merging goes I’m working a big PR (2.0) with a lot of changes and organization plugin that I need to finish and merge first before I can merge this. Also need to get some feedback from some other devs on how they want this integrated.

I can almost predict that some users won’t like the bundle size being increased by unused locales, so maybe it needs to be a different package. Then you could just pass it as locales={authUILocales[lang]}

[daveycodez]

@MatteoGauthier was curious if you have any feedback for this

[tanosugi]

I understand.
I made additional commit, to separate to @daveyplate/better-auth-ui/locales and I hope we can avoid bundle size.
You can use both for AuthUiProvider and Auth Card as follows.
I will be waiting additional feed backs.

import { authUILocales, useBrowserLocale } from "@daveyplate/better-auth-ui/locales"
<AuthCard
    pathname={pathname}
    localization={{
        // if you want to use a specific language.
        // you can refer to ../languages.md
        ...authUILocales.zh,

        // if you want to use the browser language
        ...useBrowserLocale(),

        // if you want to use a specify word, sentence, you can do as follows
        // you can refer to https://github.com/daveyplate/better-auth-ui/blob/main/src/lib/auth-localization.ts
        passwordInvalid: "Password must contain XXXX"

    }}
/>

[daveycodez]

I know some people will want to customize their localization strings, so my plan is to provide an easy option for automatically translating all their custom text seamlessly.

For example, let's say someone changes the default localization strings (renames Organization to Team, Sign In to Login, custom instructions for various settings, etc.) then they will need new translations for all of that as well, and won't want to use the default translations.

My end goal is to have a plug and play solution to translate everything dynamically on the fly, and also providing these as defaults for devs who don't care about customizing the strings. Just so you know what I'm thinking here.

Anyway I'm still grinding through a pretty big PR with Organization, Stripe, Polar, etc for 2.0 that also has some deprecations and a few breaking changes, so I might not have time to fully review this until I'm done. In the meantime I'd suggest just making your own class to import your JSON translations on the fly and providing it to the localization prop until I can finish these patches.

[tanosugi]

Following are my idea. I can mannage by A Custom Translation or i18n which I use for other translation.

A. Custom Translation
I agree some users need this feature. They need to have own json files in their project folders,
Users can do by following steps.

1. download default jsons such as from following link.
   https://downgit.github.io/#/home?url=https:%2F%2Fgithub.com%2Ftanosugi%2Fbetter-auth-ui%2Ftree%2Flanguage-selection%2Fsrc%2Flocales%2Fjsons

2. mannually update English json file to {"signIn": "Log In", "organization": "Team"}, delete other words which you can accept default translation.

3. update jsons of other locales with following links (--overwrite --delete-unused-strings are important flag)

pnpx json-autotranslate --input src/locales/jsons --source-language en \
--service deepl-free --directory-structure ngx-translate --config $DEEPL_API_KEY \
--type key-based --overwrite --delete-unused-strings

4. copy folloing code and save to own folder, apply to AuthCard
   https://github.com/tanosugi/better-auth-ui/blob/language-selection/src/locales/auth-ui-locales.ts

B. Default Translation

also providing these as defaults for devs who don't care about customizing the strings.

I think this is necessary as some competitors (supabase, clerk, auth0) do as same.
I made this pull request for this purpose and understand you timeline so I will wait you will complete curent big PR which I also am looking forward.