Password input values auto-save in browser

[Omi]

Hi, I am making a Bokeh web app in which I want to introduce a login page so that when a user inputs a username and password, the web app proceeds further.

I have been able to utilize Bokeh widgets and bokeh functions to do so however, I have not been able to find any possibility to autosave the username and password entered by the user in their browser. Every time while accessing the web app, the user has to enter the username and password in full, and the browser doesn’t prompt to save them. I have tried several browsers as well as tried saving the credentials manually for the web app in browsers but doesn’t work.

Is there any possibility that Bokeh can work with the browser’s auto-fill?

Thank you.

MRE

Following is saved as Run.py

import pandas as pd
import random

from bokeh.plotting import figure
from bokeh.palettes import Category10
from bokeh.models import (ColumnDataSource, Button, PasswordInput, TextInput,
                          Div)
from bokeh.layouts import column, row, layout
from bokeh.io import curdoc

# =============================================================================
# Function to create a dummy dataframe of given size
# =============================================================================

def dummy_df(size):
    df = pd.DataFrame(zip([random.randint(0, 100) for i in range(size)],
                          [random.randint(0, 100) for i in range(size)]),
                      columns=['x', 'y'],
                      index=pd.date_range("01-01-2023 00:00:00", periods=size,
                                          freq="10T"))
    df.index.name = 'Timestamp'
    return df

# =============================================================================
# Creating bokeh figure from dummy dataframe
# =============================================================================

# Dummy dataframe
dummy_df = dummy_df(size=432)

# Creating CDS from dummy dataframe
cds = ColumnDataSource(dummy_df) #CDS

# Bokeh palette/colors    
color=Category10[10]

# Bokeh Tools    
tools=['xpan', 'xbox_zoom', 'reset']

# Creating figure
p = figure(x_axis_type='datetime', width=1140, height=342, tools=tools,
           toolbar_location="right")
    
# Creating glyphs of all columns of CDS except Timestamp
for j,i in enumerate(cds.data.keys()):
    if i not in ["Timestamp"]:
        p.line(x="Timestamp", y=i, width=1.5, source=cds, color=color[j],
               legend_label=i)

# Legend location        
p.legend.location = "top_right"

# On-click policy for legends    
p.legend.click_policy="hide"

# =============================================================================
# Login page
# =============================================================================

# Login page title
title = Div(text='<h><i><b>Log-in Page<b><i></h>', styles={'color':'#005e94',
                                                           'font-size': '28px'})

# Login page inputs
uname_input = u_in = TextInput(value="", title="Username", width= 125) #Username input
password_input = PasswordInput(placeholder="", title='Password', width=125) #Password input

# Login button
login_button = Button(label='Log in', button_type="primary", width=260) #Log-in button

# Login page layout
login_layout = column([title, row([uname_input, password_input]), login_button])

# Page layout
page_layout = layout([login_layout])

# =============================================================================
# Login page functionality
# =============================================================================

# Dummy users' credentials
users = {"user1" : 'pass123',
         "user2" : "pass321"}

# Login button on-click function 
def login_click(users=users, show_plot=p):
    
    # Input values
    uname_input_value = str(uname_input.value) #Username input widget value
    password_input_value = str(password_input.value) #Password input widget value
    
# =============================================================================
#   Credentials authentication
# =============================================================================
    #If user exists
    if uname_input_value in users.keys(): 
        
        #If password is correct
        if password_input_value == users[uname_input_value]:
            
            # Show the plot
            page_layout.children[-1] = show_plot
            
        else:
            pass
    else:
        pass

# Login button click
login_button.on_click(login_click)

# =============================================================================
 
curdoc().add_root(page_layout)

Bokeh server

bokeh serve --show Run.py

[Bryan]

@Omi

Is there any possibility that Bokeh can work with the browser’s auto-fill?

Yes, but you would need to either implement it yourself or rely on some other third-party tool that akes care of it. Bokeh’s auth hooks are, first and foremost, a point of integration for other known, well-established auth tools. E.g., some projects have used the auth hooks to integrate OAuth support, and the OAuth libraries might handle things like preserving usernames, etc. There is nothing built directly into Bokeh itself.

[Omi]

@Bryan Thank you so much for the leads.