oauth-providers.Rmd

---
title: "Oauth Providers"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{oauth-providers}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

You might have already browsed the [guide on social sign in](social.html). They are in fact convenience wrapper to the more general "Oauth providers" class. It works in a very similar fashion and can even prove more convenient.

## R Package

First, instantiate the authentication from `FirebaseOauthProviders`, then define the provider you want to use with `set_provider`, finally `launch` whenever you want.

Below we have the authentication launch at the click of a button. We provide Microsoft by simply setting `microsoft.com` as provider. All that is needed to change to say Yahoo! is to change the provider to `yahoo.com` for instance.

```r
library(shiny)
library(firebase)

ui <- fluidPage(
  useFirebase(),
  actionButton("signin", "Sign in with Microsoft", icon = icon("microsoft")),
  plotOutput("plot")
)

server <- function(input, output, session){
  f <- FirebaseOauthProviders$
    new()$
    set_provider("microsoft.com")

  observeEvent(input$signin, {
    f$launch()
  })

  output$plot <- renderPlot({
    f$req_sign_in()
    plot(cars)
  })
  
}

shinyApp(ui, server)
```

## Console Setup

The R-side of things is rather easy so here we briefly explain how to integrate those oauth providers with the Firebase console.

### Yahoo

For Yahoo it is fairly straightforward. Open you console under "Sign-in method" tab and enable Yahoo! as show below. 

![](firebase_yahoo.png)

To get the necessary app ID and app secret visit [this link](https://developer.yahoo.com/apps/create/) and create an app 

<div class="alert alert-warning">
<h4>Important</h4>
<p style="color:white;">Make sure you enter the "Redirect URI(s)" given to you by Firebase which resembles `https://my-application.firebaseapp.com/__/auth/handler` and tick the `OpenID Connect Permissions` at the bottom.</p>
</div>

On the resulting screen copy the app ID and secret to your Firebase console.

### Microsoft

Authenticating via Microsoft is handled by Microsoft Azure, create a free account if you do not have one the:

1. Visit [the portal](https://portal.azure.com/)
2. Search and select "Azure Active Directory"
3. In the left sidebar under "Manage" select "App registrations"
4. Then click <i class="fa fa-plus"></i> New registrations
5. Under "Redirect URI" select "Web" and place the redirect URL given by Firebase
6. Once created, on the "overview" screen copy the "Application (client) ID" to Firebase
7. The visit "Certificates & secrets" in the sidebar
8. Create a "New client secret" and copy it to Firebase

Once this done give Microsoft 2 minutes to sync before trying the authentication.