Flask-Babel not working on the login page

Question

I have a Flask/Dash app that uses the Flask-Babel module. The translation works like a charm after logging in and browsing through pages. However, I cannot make it work for the login page which will always be displayed in English. The messages.po and messages.mo both contain the translation strings I prepared for the login page, so the compilation part seems to work fine.

Here's a snippet from my app.py (with a hard-coded choice of Spanish):

import dash
from dash.dependencies import Input, Output
from flask import Flask, request
from flask_babel import Babel
# some more imports...

# (...)

def main():

    update_dataframes()

    app = dash.Dash(
        "MyApp",
        url_base_pathname='/summary',
        static_folder="static",
        sharing=True,
        csrf_protect=False
    )

    # Hook Flask-Babel to the app
    babel = Babel(app.server)

    @babel.localeselector
    def get_locale():
        # return request.accept_languages.best_match(context.config['LANGUAGES'].keys())
        return 'es'

    # App layout
    app.layout = build_app_layout(context)

    # Setup callbacks
    setup_callbacks(app)
    setup_login(app, app.server, context.config)

    # Start Dash/Flask app
    app.server.run(
        port=context.config['DEPLOY']['SERVER_PORT'],
        debug=context.config['DEPLOY']['SERVER_DEBUG'],
        threaded=context.config['DEPLOY']['SERVER_THREADED']
    )

    # Interval tread to update all dataframes
    ThreadPoolExecutor(max_workers=1).submit(update_dataframes_thread)

if __name__ == '__main__':
    main()

Below, a part of the setup_login(...) method called above. I'd like to notice that app.server is passed to it from the code above, after Flask-Babel has been hooked to the app (don't really know if that matters much):

from dash_flask_login import FlaskLoginAuth
from flask_login import LoginManager, UserMixin, login_user, logout_user
# (...)

login_app = Dash(
    name='login-app',
    url_base_pathname='/login',
    server=app.server
)

What I tried: hooking the Flask-Babel again for the login_app Dash() instance, but that didn't work (anyways it's still the same app.server).

I've come across this SO question with a similar problem, but it seems to be specific to Flask-Security module (not my case).

What am I missing to make the login page translated?

Answer 1

Although I haven't found a direct reason why a combination of Dash and Flask-Login don't work with Flask-Babel on the login page, I solved the problem with a workaround - I'm dynamically updating generated HTML component through Dash's callback decorator just after loading the page. The function simply substitutes the original English some_string with gettext(some_string) tag which is detected properly in the callbacks. This way the page loads in English and immediately gets translated, as the callbacks come to action. Minimal example:

app.layout = html.Div(
        [
            html.H1('Hello World!', id='h1'),
            html.Div(html.A('login', href='/login')
        ]
    )


# Display the message translated to another language
@app.callback(
    Output('h1', 'children'),
    [Input('url', 'search')]
)
def translate_message(children):
    return gettext('Hello World!')