<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oauth Providers • firebase</title>
<!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png">
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png">
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css">
<script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Oauth Providers">
<meta property="og:description" content="firebase">
<meta property="og:image" content="/logo.png">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">
    

    <div class="container template-article">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="../index.html">firebase</a>
        <span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">1.0.1.9000</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="../reference/index.html">Reference</a>
</li>
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Articles
     
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
<li>
      <a href="../articles/analytics.html">Storage</a>
    </li>
    <li>
      <a href="../articles/demo.html">Demo</a>
    </li>
    <li>
      <a href="../articles/email-link.html">Email Link</a>
    </li>
    <li>
      <a href="../articles/email-password.html">Email &amp; Password</a>
    </li>
    <li>
      <a href="../articles/flow.html">flow</a>
    </li>
    <li>
      <a href="../articles/get-started.html">Get Started</a>
    </li>
    <li>
      <a href="../articles/manage.html">Manage Users</a>
    </li>
    <li>
      <a href="../articles/oauth-providers.html">Oauth Providers</a>
    </li>
    <li>
      <a href="../articles/phone.html">phone</a>
    </li>
    <li>
      <a href="../articles/social.html">Social Sites</a>
    </li>
    <li>
      <a href="../articles/state-persistence.html">state-persistence</a>
    </li>
    <li>
      <a href="../articles/storage.html">Storage</a>
    </li>
    <li>
      <a href="../articles/ui.html">Prebuilt UI</a>
    </li>
  </ul>
</li>
<li>
  <a href="../news/index.html">Changelog</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="https://github.com/JohnCoene/firebase/" class="external-link">
    <span class="fab fa-github fa-lg"></span>
     
  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->

      

      </header><div class="row">
  <div class="col-md-9 contents">
    <div class="page-header toc-ignore">
      <h1 data-toc-skip>Oauth Providers</h1>
            
      
      <small class="dont-index">Source: <a href="https://github.com/JohnCoene/firebase/blob/HEAD/vignettes/oauth-providers.Rmd" class="external-link"><code>vignettes/oauth-providers.Rmd</code></a></small>
      <div class="hidden name"><code>oauth-providers.Rmd</code></div>

    </div>

    
    
<p>You might have already browsed the <a href="social.html">guide on
social sign in</a>. 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.</p>
<div class="section level2">
<h2 id="r-package">R Package<a class="anchor" aria-label="anchor" href="#r-package"></a>
</h2>
<p>First, instantiate the authentication from
<code>FirebaseOauthProviders</code>, then define the provider you want
to use with <code>set_provider</code>, finally <code>launch</code>
whenever you want.</p>
<p>Below we have the authentication launch at the click of a button. We
provide Microsoft by simply setting <code>microsoft.com</code> as
provider. All that is needed to change to say Yahoo! is to change the
provider to <code>yahoo.com</code> for instance.</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://shiny.rstudio.com/" class="external-link">shiny</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://firebase.john-coene.com/" class="external-link">firebase</a></span><span class="op">)</span></span>
<span></span>
<span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/fluidPage.html" class="external-link">fluidPage</a></span><span class="op">(</span></span>
<span>  <span class="fu"><a href="../reference/dependencies.html">useFirebase</a></span><span class="op">(</span><span class="op">)</span>,</span>
<span>  <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/actionButton.html" class="external-link">actionButton</a></span><span class="op">(</span><span class="st">"signin"</span>, <span class="st">"Sign in with Microsoft"</span>, icon <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/icon.html" class="external-link">icon</a></span><span class="op">(</span><span class="st">"microsoft"</span><span class="op">)</span><span class="op">)</span>,</span>
<span>  <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/plotOutput.html" class="external-link">plotOutput</a></span><span class="op">(</span><span class="st">"plot"</span><span class="op">)</span></span>
<span><span class="op">)</span></span>
<span></span>
<span><span class="va">server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span>, <span class="va">session</span><span class="op">)</span><span class="op">{</span></span>
<span>  <span class="va">f</span> <span class="op">&lt;-</span> <span class="va"><a href="../reference/FirebaseOauthProviders.html">FirebaseOauthProviders</a></span><span class="op">$</span></span>
<span>    <span class="fu">new</span><span class="op">(</span><span class="op">)</span><span class="op">$</span></span>
<span>    <span class="fu">set_provider</span><span class="op">(</span><span class="st">"microsoft.com"</span><span class="op">)</span></span>
<span></span>
<span>  <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/observeEvent.html" class="external-link">observeEvent</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">signin</span>, <span class="op">{</span></span>
<span>    <span class="va">f</span><span class="op">$</span><span class="fu">launch</span><span class="op">(</span><span class="op">)</span></span>
<span>  <span class="op">}</span><span class="op">)</span></span>
<span></span>
<span>  <span class="va">output</span><span class="op">$</span><span class="va">plot</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/renderPlot.html" class="external-link">renderPlot</a></span><span class="op">(</span><span class="op">{</span></span>
<span>    <span class="va">f</span><span class="op">$</span><span class="fu">req_sign_in</span><span class="op">(</span><span class="op">)</span></span>
<span>    <span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="va">cars</span><span class="op">)</span></span>
<span>  <span class="op">}</span><span class="op">)</span></span>
<span>  </span>
<span><span class="op">}</span></span>
<span></span>
<span><span class="fu"><a href="https://rdrr.io/pkg/shiny/man/shinyApp.html" class="external-link">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, <span class="va">server</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="console-setup">Console Setup<a class="anchor" aria-label="anchor" href="#console-setup"></a>
</h2>
<p>The R-side of things is rather easy so here we briefly explain how to
integrate those oauth providers with the Firebase console.</p>
<div class="section level3">
<h3 id="yahoo">Yahoo<a class="anchor" aria-label="anchor" href="#yahoo"></a>
</h3>
<p>For Yahoo it is fairly straightforward. Open you console under
“Sign-in method” tab and enable Yahoo! as show below.</p>
<p><img src="firebase_yahoo.png"></p>
<p>To get the necessary app ID and app secret visit <a href="https://developer.yahoo.com/apps/create/" class="external-link">this link</a> and create
an app</p>
<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
<code>https://my-application.firebaseapp.com/__/auth/handler</code> and
tick the <code>OpenID Connect Permissions</code> at the bottom.
</p>
</div>
<p>On the resulting screen copy the app ID and secret to your Firebase
console.</p>
</div>
<div class="section level3">
<h3 id="microsoft">Microsoft<a class="anchor" aria-label="anchor" href="#microsoft"></a>
</h3>
<p>Authenticating via Microsoft is handled by Microsoft Azure, create a
free account if you do not have one the:</p>
<ol style="list-style-type: decimal">
<li>Visit <a href="https://portal.azure.com/" class="external-link">the portal</a>
</li>
<li>Search and select “Azure Active Directory”</li>
<li>In the left sidebar under “Manage” select “App registrations”</li>
<li>Then click <i class="fa fa-plus"></i> New registrations</li>
<li>Under “Redirect URI” select “Web” and place the redirect URL given
by Firebase</li>
<li>Once created, on the “overview” screen copy the “Application
(client) ID” to Firebase</li>
<li>The visit “Certificates &amp; secrets” in the sidebar</li>
<li>Create a “New client secret” and copy it to Firebase</li>
</ol>
<p>Once this done give Microsoft 2 minutes to sync before trying the
authentication.</p>
</div>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">

        <nav id="toc" data-toggle="toc"><h2 data-toc-skip>Contents</h2>
    </nav>
</div>

</div>



      <footer><div class="copyright">
  <p></p>
<p>Developed by John Coene.</p>
</div>

<div class="pkgdown">
  <p></p>
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.7.</p>
</div>

      </footer>
</div>

  


  

  </body>
</html>
