Backend of the app authentication with shinyMobile

Question

I am trying to use the shinyMobile package to implement a login page before the actual app. However, I am not sure how to use updateF7Login, f7Login and f7LoginServer to check if the user gave the right user name and password. In my example I am assuming only one user in my database, which is stored in the object correct.login. I tried to use observeEvent() with no success.

library(shiny)
library(shinyMobile)


shinyApp(
  ui = f7Page(
    f7Login(id = "loginPage", title = "Welcome"),
    f7SingleLayout(
      navbar = f7Navbar(
        title = "TITLE",
        hairline = FALSE,
        shadow = TRUE
      )%>% f7Align("center"),
      # main content
      f7BlockTitle(
        title = HTML(paste("Welcome", textOutput("user"))),
        size = "large"
      ) %>% f7Align("center")
    )
  ),
  server = function(input, output, session) {
   
    loginData <- moduleServer(f7LoginServer, id = "loginPage")
    
    print(loginData)
    
    correct.login <- c("user"="user1", "password"="thepass")
    
    # TODO?
    
  }
)

Any ideas to make this work?

Sam Rogers · Answer 1 · 2021-08-18T06:33:31.853

First of all, I think you want to be really careful with authentication/authorisation. Depending on what your app does, and how sensitive the information is that you are protecting, you really shouldn't be rolling your own auth schemes, which unfortunately looks like what shinyMobile is encouraging here. You should look to implement well tested protocols and packages for this, unless the information you are protecting is not at all private or valuable (in which case, why is there a need to protect it?). Think about who would be concerned to the point of legal action if the information protected by their credentials, and/or their credentials themselves were exposed inadvertently. As an example, it took me about 20 seconds to hide the login page from your reprex above, and display the content underneath without any credentials input.

There are several options for adding custom authentication to Shiny apps, such as Auth0, shinyproxy or firebase.

With that caveat, and to answer the question you asked, in order to implement the required auth that you need, you will need to call out to a database somewhere, and verify that the (hash of the) provided password matches what is stored for that user. It's possible you may be able to link into some of the above mentioned packages/systems for storing credentials like this. The specifics of how to do this depends on the database you are using to store the credentials, and the level of security required. If the information this auth is protecting is relatively trivial and/or a proof-of-concept style app, then this should be fairly straight-forward, but if there's any sensitive information stored, as I said before: be very careful.

If you give some more information about what exactly you are planning/trying to do, it could help with providing some more recommendations about how to approach this.

score 0 · Answer 2 · answered May 31 '22 at 22:02

You could do something like this, however I will not guarantee the security of this solution, i.e. for stuff that really needs to be secure, you probably want to go with someting like described in the previous answer ...

library(shiny)
library(shinyMobile)
library(shinyalert)

loginserver <- function (input, output, session, user, password) 
{
  ns <- session$ns
  modId <- strsplit(ns(""), "-")[[1]][1]
  shiny::observeEvent(input$login, {
    if (input$login_user == user &
        input$login_password == password) {
      updateF7Login(id = modId, user = input$login_user, 
                    password = input$login_password)
    } else {
      shinyalert::shinyalert("Not correct password or username", type = "error")
    }
  })
}

shinyApp(
  ui = f7Page(
    shinyalert::useShinyalert(),
    f7Login(id = "loginPage", title = "Welcome"),
    f7SingleLayout(
      navbar = f7Navbar(
        title = "TITLE",
        hairline = FALSE,
        shadow = TRUE
      )%>% f7Align("center"),
      # main content
      f7BlockTitle(
        title = HTML(paste("Welcome", textOutput("user"))),
        size = "large"
      ) %>% f7Align("center")
    )
  ),
  server = function(input, output, session) {
    
    correct.login <- list("user"="user1", "password"="thepass")
    callModule(loginserver, id = "loginPage", user = correct.login$user, password = correct.login$password)
    
  }
)

Backend of the app authentication with shinyMobile

2 Answers2