firebase / firebase/firebase-js-sdk
` isHostLanguageValid()` in auth's recaptcha loader incorrectly determines long language codes to be invalid
- Dominant language
- TypeScript
- Stars
- 5.1k
- Forks
- 1k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 37
Description
### Operating System
Windows 11
### Browser Version
Chrome/126.0.6478.127
### Firebase SDK Version
10.12.3
### Firebase SDK Product:
Auth
### Describe your project's tooling
NextJS 15 RC
React Compiler
### Describe the problem
My browser's language is `en-GB-oxendict` (got by doing `navigator.languages[0]`).
When trying to use `auth.useDeviceLanguage()`, which sets the above value to `auth.languageCode`, the recaptcha loader will fail an assertion as described [here](https://github.com/firebase/firebase-js-sdk/blob/52f8deb1dc07cd6acc323f36d8be158e927d17c6/packages/auth/src/platform_browser/recaptcha/recaptcha_loader.ts#L59), & as implemented [here](https://github.com/firebase/firebase-js-sdk/blob/52f8deb1dc07cd6acc323f36d8be158e927d17c6/packages/auth/src/platform_browser/recaptcha/recaptcha_loader.ts#L127), throwing a `FirebaseError: Firebase: Error (auth/argument-error)`.
A bit perculiar that language codes are expected to be below 6 characters. Either that, or `auth.useDeviceLanguage()` should handle it.
### Steps and code to reproduce issue
```ts
import { getAuth } from 'firebase/auth';
import { app } from './app';
export const auth = getAuth(app);
// either, on a environment with a long language string:
// auth.useDeviceLanguage();
// or, set it directly here:
auth.languageCode = 'en-GB-oxendict';
const el = document.createElement('div');
document.body.appendChild(el);
const verifier = new RecaptchaVerifier(auth, el, {
size: 'invisible',
});
void verifier.render().then(console.log);
// uncaught promise rejection:
// FirebaseError: Firebase: Error (auth/argument-error).
// at createErrorInternal (index-54738136.js:455:37)
// at _assert (index-54738136.js:461:11)
// at ReCaptchaLoaderImpl.load (index-54738136.js:8134:5)
// at RecaptchaVerifier.init (index-54738136.js:8382:50)
// at async RecaptchaVerifier.makeRenderPromise (index-54738136.js:8367:5)
```
Contributor guide
Research direction
Start with packages/auth/src/platform_browser/recaptcha/recaptcha_loader.ts, especially the assertion and ReCaptchaLoaderImpl.load implementation linked in the report. Reproduce the failure with auth.languageCode set to en-GB-oxendict and RecaptchaVerifier.render(). Done means this valid long language code no longer causes auth/argument-error during recaptcha loading.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- authentication
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100