firebase / firebase/firebase-js-sdk

` isHostLanguageValid()` in auth's recaptcha loader incorrectly determines long language codes to be invalid

Open
#8,357 3 comments 0 reactions 0 assignees View on GitHub
api: auth bug reproducible stack:NextJS
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.