<!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>Get Started • 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="Get Started">
<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>Get Started</h1>
            
      
      <small class="dont-index">Source: <a href="https://github.com/JohnCoene/firebase/blob/HEAD/vignettes/get-started.Rmd" class="external-link"><code>vignettes/get-started.Rmd</code></a></small>
      <div class="hidden name"><code>get-started.Rmd</code></div>

    </div>

    
    
<p>The {firebase} package lets you create mechanisms to authenticate
Shiny users. It does so by wrapping the <a href="https://firebase.google.com/" class="external-link">Firebase</a> interface by Google.
This probably raises a first question, is it free? The answer to which
is, this package only features the free functionalities which should,
for now, probably fulfil most Shiny developers’ needs.</p>
<div class="alert alert-success">
<h4>
Skip ahead
</h4>
<p style="color:white;">
In this first section we create a
<a href="https://firebase.google.com" class="external-link alert-link">Google
Firebase</a> project, if you know how to do this or already have one,
skip to the <a href="#configuration">package configuration section.</a>.
</p>
</div>
<div class="section level2">
<h2 id="create-a-project">Create a Project<a class="anchor" aria-label="anchor" href="#create-a-project"></a>
</h2>
<p>First, create a Google firebase account if you do not already have
one; head to <a href="https://firebase.google.com/" class="external-link">firebase.google.com</a>, and set up
your account. Once this done you will be presented with the screen
below.</p>
<p><img src="fireblaze_home.png"></p>
<p>First step, hit that large white button reading “Create a project,”
then give your project a name.</p>
<p><img src="fireblaze_step_1.png"></p>
<p>Second step, either leave Google Analytics enabled to integrate your
project with it or disable it. If confused, disable it, this can always
be enabled later.</p>
<p><img src="fireblaze_step_2.png"></p>
<p>After that you should be done and eventually, after an intermediary
screen, be presented with the project screen (below). Click the “web”
icon (highlighted in <span class="text-danger">red</span>).</p>
<p><img src="fireblaze_project.png"></p>
<p>On the next screen name your app, then hit “Register app”. This might
be confusing, a project will share sign-in users but may be comprised of
different apps (iOS, web, etc.)</p>
<p><img src="fireblazer_project_setup1.png"></p>
<p>On the next screen simply hit “Continue to console,” you should not
be concerned with any of the code presented, {firebase} takes care of it
for you. This will lead you straight into the project you have just
created.</p>
</div>
<div class="section level2">
<h2 id="define-methods">Define Methods<a class="anchor" aria-label="anchor" href="#define-methods"></a>
</h2>
<p>Visit “Authentication” the left sidebar then click the most prominent
button that reads “Set up sign-in method.”</p>
<p><img src="fireblaze_signin_method.png"></p>
<p>This screen lets you set-up which authentication methods you want to
provide. Some only require a click, others need to be integrated with
third-party services, all of which are very straightforward. We will
begin with the easier ones: email &amp; password, and Google. This is
will let users sign in by entering their email and password or using
their Google account.</p>
<p>Click Email/password then the first enable button at the top. We will
cover the second option later on. The first will require the user to
enter their email and password, the second will users a sign-in link via
email, thereby removing the need for a password. Then enable Google
(form below).</p>
<p><img src="fireblaze_google.png"></p>
<p>Fill the form as you see fit, don’t forget to toggle “enable” unlike
I did above, and click save.</p>
<p>Finally set the redirect URLs, these are the URLs to which the user
can be redirected after authenticating, add your <code>localhost</code>
and or <code>127.0.0.1</code> so that your application can be tested
locally. You will eventually have to add the URL of your the
application(s).</p>
<p><img src="firebase_redirect.png"></p>
</div>
<div class="section level2">
<h2 id="configuration">Configuration<a class="anchor" aria-label="anchor" href="#configuration"></a>
</h2>
<p>At this point you will need the R package, install it from Github if
you haven’t already done so.</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu">remotes</span><span class="fu">::</span><span class="fu"><a href="https://remotes.r-lib.org/reference/install_github.html" class="external-link">install_github</a></span><span class="op">(</span><span class="st">"JohnCoene/firebase"</span><span class="op">)</span></span></code></pre></div>
<p>Navigate to your credentials page:</p>
<ol style="list-style-type: decimal">
<li>Click the gear icon <i class="fa fa-cog"></i> in the top left.</li>
<li>Click “project settings”</li>
<li>Scroll to the bottom of the “General” tab to find your app
credentials.</li>
</ol>
<p>In there you should find two key things <code>apiKey</code> and
<code>projectId</code>. We will need these to create config file for
{firebase}: the function below creates a <code>firebase.rds</code> file
in your working directory.</p>
<p><strong>Note:</strong> if you manually changed the
<code>project_id</code> use that in the function call below, not the one
originally created by Google. In brief, use the id that is found in the
URL of your project.</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu">firebase</span><span class="fu">::</span><span class="fu"><a href="../reference/config.html">firebase_config</a></span><span class="op">(</span>api_key <span class="op">=</span> <span class="st">"xXxxXxx"</span>, project_id <span class="op">=</span> <span class="st">"my-project-package"</span><span class="op">)</span></span></code></pre></div>
<p>This file is necessary for every project that uses {firebase}; the
package will look for it in the working directory by default. Now that
you are set up head over to the <a href="ui.html">prebuilt UI page</a>
to learn how to sign up/in users with a neat prebuilt UI.</p>
</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>
