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

[sxxov]

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, & as implemented here, 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

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)

[dlarocque]

Thanks for reporting this issue, and for providing a great description!