Implementing a Shiny Google Login: A Step-by-Step Guide for R Users

In this article, we’ll explore how to implement a shiny google login for your shiny app. We’ll cover the necessary steps, including setting up your Google project, configuring the client ID and secret, and using the googleAuthR package to authenticate users.

Setting Up Your Google Project

To use the googleAuthR package, you need to create a Google Cloud Platform (GCP) project. Here’s how to do it:

Go to the Google Cloud Console.
Click on “Select a project” and then “New Project”.
Enter a project name and click on “Create”.

Once you’ve created your project, you need to enable the Google Sign-In API and create credentials for your project.

Go to the Google Cloud Console.
Click on “Select a project” and then select your project.
Click on “Navigation menu” ( three horizontal lines in the top left corner) and click on “APIs & Services”.
Search for “Google Sign-In API” and click on it.
Click on the “Enable” button.

Creating Credentials for Your Project

Go to the Google Cloud Console.
Click on “Select a project” and then select your project.
Click on “Navigation menu” ( three horizontal lines in the top left corner) and click on “APIs & Services”.
Search for “OAuth 2.0 clients” and click on it.
Click on the “Create credentials” button.

Configuring the Client ID and Secret

When you create credentials, Google will ask you to choose what type of application you’re using (web, mobile app, etc.). For a shiny app, we’ll use the “Other”.

Choose “Other”.
Enter a authorized JavaScript origin (e.g., http://localhost:1221).
Click on the “Create” button.

This will generate a client ID and secret for your project. You’ll need these values later in our code example.

Setting Up Shiny App

To set up your shiny app, you need to install the necessary packages:

install.packages("shiny")
install.packages("googleAuthR")

Here’s an example of a basic shiny app that uses googleAuthR for authentication:

library(shiny)
library(googleAuthR)

# Set up Google project credentials
options(shiny.port = 1221)
options(googleAuthR.webapp.client_id = "someclientid.apps.googleusercontent.com")
options(googleAuthR.webapp.client_secret = "someclientsecret")

# Define UI for app
ui <- fluidPage(
  titlePanel("Sample Google Sign-In"),
  sidebarLayout(
    sidebarPanel(
      googleSignInUI("demo")
    ),
    
    mainPanel(
      with(tags, dl(dt("Name"), dd(textOutput("g_name")),
                     dt("Email"), dd(textOutput("g_email")),
                     dt("Image"), dd(uiOutput("g_image")) ))
    )
  )
)

# Define server function
server <- function(input, output, session) {
  # Use googleAuthR to authenticate user
  sign_ins <- shiny::callModule(googleSignIn, "demo")
  
  # Render UI based on authentication status
  if (sign_ins()$is_authenticated == TRUE) {
    output$g_name <- renderText({sign_ins()$name})
    output$g_email <- renderText({ sign_ins()$email })
    output$g_image <- renderUI({ img(src=sign_ins()$image) })
  } else {
    # Render login UI if user is not authenticated
    output$g_name <- renderNull()
    output$g_email <- renderNull()
    output$g_image <- renderNull()
  }
}

# Run the application 
shinyApp(ui = ui, server = server)

Configuration

However, this code will only work with your Google project credentials. Here are some configuration options you might need to consider:

Authorized JavaScript origins: This should be set to http://localhost:yourPort in order for the app to function.
Authorized redirect URIs: The client ID has an authorized redirect URI which needs to match this value.
Google Sign-In API Scopes: These scopes are required to get your user’s information. We’re using “https://www.googleapis.com/auth/userinfo.email" and “https://www.googleapis.com/auth/userinfo.profile".

Conclusion

Using googleAuthR in a shiny app is relatively straightforward, but it requires some setup to work correctly. By following the steps outlined above, you should be able to authenticate users with Google Sign-In and display their information in your shiny app.

If you’re having trouble setting up your project or authentication process, make sure to check out these resources.

Finally, we recommend checking out the official Shiny Google Auth documentation for more information on this topic.

Resources

Last modified on 2024-06-20

Shiny Google Login: A Step-by-Step Guide