View Page

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

{{#inherit "layout"}}

{{#block "head"}}
    <title> Auth0 demo</title>
    <!-- Auth0 lock script -->
    <script src=""></script>
    <script src="//"></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 "content"}}
    <div class="container">
        <h1> authentication demo with Auth0</h1>
        <p class="lead">Welcome <span class="nickname"></span></p>
        <img width="100px" alt="avatar" class="avatar" style="display:none;">
        <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 class="container">
        <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="//"&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:
    rememberLastLogin: true

  $('.btn-login').click(function(e) {

  lock.on("authenticated", function(authResult) {
    lock.getProfile(authResult.idToken, function(error, profile) {
        if (error) {
            alert("Unable to authenticate!");
        localStorage.setItem('id_token', authResult.idToken);
        // Display user information
        // enable api button
        $('.btn-api').removeAttr("disabled").text("Press me, I'm authenticated!");
        <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 databases
// by setting the Authorization header using the Bearer token scheme.

  $('.btn-api').click(function(e) {
        'Authorization':'Bearer ' + localStorage.getItem("id_token")
        return response.json();
         $('#apidata').text(JSON.stringify(body, null, '  '));
        <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) {
     $('.avatar').attr('src', profile.picture).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
        // enable api button