Customized Sign In/Up Form for R Shiny using {firebase}

Question

The author of {firebase} shows how to use the pre-built UI in the package examples/docs.

I'd like to build my own sign in/up forms for an R Shiny project I'm working on. How do I link that to firebase so that I don't have to use the prebuilt sign in form?

I'm using the email auth method.

Here's my sign in/up form:

global.R

library(shiny)

ui.R

ui <- bslib::page(
  title = "Custom Sign In/Up Form",
  theme = bslib::bs_theme(version = 5),
  lang = "en",
  tags$div(
    class = "container",
    tabsetPanel(
      id = "auth_form",
      type = "hidden",
      tabPanelBody(
        value = "signin",
        tags$div(
          class = "d-flex justify-content-center align-items-center vh-100",
          tags$div(
            mod_auth_form_ui(id = "signin"),
            tags$p(
              class = "mt-2",
              "First time?",
              actionLink(inputId = "go_to_signup", label = "Sign up here")
            )
          )
        )
      ),
      tabPanelBody(
        value = "signup",
        tags$div(
          class = "d-flex justify-content-center align-items-center vh-100",
          tags$div(
            mod_auth_form_ui(id = "signup", type = "signup"),
            tags$p(
              class = "mt-2",
              "Already have an account?",
              actionLink(inputId = "go_to_signin", label = "Sign in here")
            )
          )
        )
      )
    )
  )
)

server.R

server <- \(input, output, session) {
  observeEvent(input$go_to_signup, {
    freezeReactiveValue(x = input, name = "auth_form")
    updateTabsetPanel(
      session = session,
      inputId = "auth_form",
      selected = "signup"
    )
  })
  observeEvent(input$go_to_signin, {
    freezeReactiveValue(x = input, name = "auth_form")
    updateTabsetPanel(
      session = session,
      inputId = "auth_form",
      selected = "signin"
    )
  })
}

R/mod_auth_form_ui.R

#' Auth form module UI
#'
#' @param id Module id
#' @param type Type of form to create. Either "signin" (default) or "signup".
#' @return [shiny::tags$form()]
mod_auth_form_ui <- \(id, type = "signin") {
  ns <- NS(id)
  email_input_tag_q <- textInput(
    inputId = ns("email"),
    label = "Email address",
    placeholder = "[email protected]"
  ) |>
    htmltools::tagQuery()
  email_input_tag_q$find("input")$removeAttrs("type")$addAttrs("type" = "email")
  email_input <- email_input_tag_q$allTags()
  password_input <- passwordInput(inputId = ns("password"), label = "Password")
  username_input <- textInput(
    inputId = ns("username"),
    label = "First & last name",
    placeholder = "John Doe"
  )
  submit_btn <- actionButton(
    inputId = ns("submit"),
    label = "Submit",
    class = "btn btn-primary",
    type = "submit"
  )
  tags$form(
    tags$div(class = "mb-3", email_input),
    if (type == "signup") {
      tags$div(class = "mb-3", username_input)
    },
    tags$div(class = "mb-3", password_input),
    submit_btn
  )
}

Answer 1

I ended up creating {frbs}, an R Wrapper for Firebase Authentication REST API and is framework agnostic (can be used with shiny, ambiorix etc).

Here is an example/exhibit of how to use it with shiny: frbs shiny example

Answer 2

use the firebase R packag & the Firebase JavaScript SDK in your Shiny app. The firebase R package provides functions to initialize, configure, and authenticate with firebase, while the firebase JavaScript SDK allows you to interact with the firebase auth service from your web browser.

• Load the firebase R package and the firebase JavaScript SDK in your global.R file using library(firebase) and use_firebase()

• Initialize the firebase app in your server.R file using firebase_init() and pass the path to your JSON configuration file as an argument.

• Add event listeners to your sign in/up forms in your server.R file using observeEvent() and input$submit.

• Use the firebase_auth_email() function to sign in or sign up users with their email and password, and pass the input$email and input$password as arguments.

• Use the firebase_user() function to get the current user's information, such as email, uid, display name, etc.

• Use the firebase_sign_out() function to sign out the current user.

references:

1. Calling Firebase auth UI from an R Shiny app - Stack Overflow.

2. Adding Firebase Authentication to Shiny | R-bloggers.

3. Authenticate R Shiny Application with Firebase .

4. Firebase App Script.

5. Firebase Auth Script.

6. Firebase Console.