Remember to check out the documentation for restdb.io Pages and for restdb.io Querying. You can also view the master template source code.
<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=" auth0-variables.js"></script>
<script src=" auth0app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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"><script src="//cdn.auth0.com/js/lock/10.24.3/lock.min.js"></script>
<script src=" auth0-variables.js"></script>
<script src=" auth0app.js"></script></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>