Remember to check out the documentation for restdb.io Pages and for restdb.io Querying. You can also view the master template source code.

{{#inherit "layout"}}

{{#block "head"}}
    <title>restdb.io Auth0 demo</title>
    <!-- Auth0 lock script -->
    <script src="https://websitedemo-4db9.restdb.io/rest/_jsapi.js"></script>
    <script src="//cdn.auth0.com/js/lock/10.24.3/lock.min.js"></script>
    <script src="{{root}}auth0-variables.js"></script>
    <script src="{{root}}auth0app.js"></script>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
{{/block}}


{{#block "content"}}
    <div class="container">
        <h1>restdb.io authentication demo with Auth0</h1>
        <p class="lead">Welcome <span class="nickname"></span></p>
        <img width="100px" alt="avatar" class="avatar" style="display:none;">
        <hr>
        <pre><code class="language-javascript"><span id="apidata"></span></code></pre>
        
        <button type="submit" class="btn btn-default btn-login">Sign In</button>
        <button type="submit" class="btn btn-default btn-logout" style="display:none;">Sign Out</button>
        <button type="submit" class="btn btn-default btn-api" disabled>Sign in to click me</button>
    </div>
    <div class="container">
        <hr>
        <h1>Source code step by step</h1>
        <h2>Include JavaScript</h2>
        This example uses the following JavaScripts.
        <pre><code class="language-html">&lt;script src="//cdn.auth0.com/js/lock/10.24.3/lock.min.js"&gt;&lt;/script&gt;
&lt;script src="{{root}}auth0-variables.js"&gt;&lt;/script&gt;
&lt;script src="{{root}}auth0app.js"&gt;&lt;/script&gt;</code></pre>
        <h2>Set up credentials (auth0-variables.js)</h2>
        Add your Auto0 security credentials from Auth0 Client set up.
        <pre><code class="language-javascript">var AUTH0_CLIENT_ID='xxx'; 
var AUTH0_DOMAIN='xxx';
var AUTH0_CALLBACK_URL=location.href;</code></pre>
        
        <h2>Invoke the Auth0 dialog to authenticate the user (auth0app.js)</h2>
       Invoke the Auth0 lock dialog and store the security token in browser local storage.
        <pre><code class="language-javascript">var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, {
    auth: {
      params: { scope: 'openid email' } //Details: https://auth0.com/docs/scopes
    },
    rememberLastLogin: true
  });

  $('.btn-login').click(function(e) {
    e.preventDefault();
    lock.show();
  });

  lock.on("authenticated", function(authResult) {
    lock.getProfile(authResult.idToken, function(error, profile) {
        if (error) {
            alert("Unable to authenticate!");
            return;
        }
        localStorage.setItem('id_token', authResult.idToken);
        // Display user information
        show_profile_info(profile);
        // enable api button
        $('.btn-api').removeAttr("disabled").text("Press me, I'm authenticated!");
    });
  });</code></pre>
        
        <h2>Access the database using fetch and the JWT token from Auth0</h2>
        When we invoke the call to our database, we set the Authorization header to contain the id_token we received from Auth0. The token must be prefixed with "Bearer ".
        <pre><code class="language-javascript">// We use the token from Auth0 to authenticate API calls against restdb.io databases
// by setting the Authorization header using the Bearer token scheme.

  $('.btn-api').click(function(e) {
    fetch("https://websitedemo-4db9.restdb.io/rest/items?max=4",{
    headers:{
        'Authorization':'Bearer ' + localStorage.getItem("id_token")
        }
    }).then(response=>{
        return response.json();
    }).then(body=>{
         $('#apidata').text(JSON.stringify(body, null, '  '));
    });
    e.preventDefault();
  });</code></pre>
        
        <h2>Profile data</h2>
        We retrieve the user profile by calling the Auth0 API.
        <pre><code class="language-javascript">var show_profile_info = function(profile) {
     $('.nickname').text(profile.nickname);
     $('.btn-login').hide();
     $('.avatar').attr('src', profile.picture).show();
     $('.btn-logout').show();
};
  
var retrieve_profile = function() {
    var id_token = localStorage.getItem('id_token');
    if (id_token) {
      lock.getProfile(id_token, function (err, profile) {
        if (err) {
          return alert('There was an error getting the profile: ' + err.message);
        }
        // Display user information
        show_profile_info(profile);
        // enable api button
        $('.btn-api').removeAttr("disabled");
      });
    }
};</code></pre>
    </div>
    
{{/block}}


{{/inherit}}