Unmask a password

[prubin]

When using passwordInput in a Shiny app, is there any way to allow the user to unmask their entry? If not, is there any alternative to passwordInput that would?

[michaelbgarcia]

You can use a custom Javascript function along with {shinyjs} to do this. Here is an example where the JS code toggles the "type" attribute of the input element from "password" to "text":

library(shiny)
library(shinyjs)
#> 
#> Attaching package: 'shinyjs'
#> The following object is masked from 'package:shiny':
#> 
#>     runExample
#> The following objects are masked from 'package:methods':
#> 
#>     removeClass, show

# Create JS function
jsCode <- r"(
shinyjs.togglePass = function(){
const type = document.querySelector("#password").getAttribute("type") === "password" ? "text" : "password";
document.querySelector("#password").setAttribute("type", type);}
)"

ui <- fluidPage(
  useShinyjs(),  # Include shinyjs
  extendShinyjs(text = jsCode, functions = c("togglePass")), # Allow usage of JS function
  checkboxInput("toggle", "Show Password"),
  passwordInput("password", "Password")
)

server <- function(input, output) {
  observe({
    js$togglePass(input$toggle)
  }) %>%
    bindEvent(input$toggle, ignoreInit = TRUE)
}

shinyApp(ui, server)

Shiny applications not supported in static R Markdown documents

^{Created on 2024-01-04 with reprex v2.0.2}

[prubin]

Thanks! This is very helpful. One minor note for anyone else using this: unless you have magrittr (or a library that loads magrittr) loaded, you'll want to change %>% to |>.