Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Auth0 Lock -->
<script src="//cdn.auth0.com/js/lock-8.2.min.js"></script>

<p>This is a demo client accompanying an article: <a href="https://medium.com/@theopak/27ba5171916" rel="nofollow">https://medium.com/@theopak/27ba5171916</a>. Thanks for taking a look!</p>

<p>Demo account: example@example.com, pass: demo</p>

<hr/>

<input id="btn-signin" class="btn-signin" type="submit" value="Sign In" />
<input id="btn-trigger" class="btn-trigger" type="submit" value="Trigger Secure API Call" />

<ul>
  <li>
    <strong>profile.user_id:</strong>
    <span id="profile-userid">(undefined)</span>
  </li>
  <li>
    <strong>profile.name:</strong>
    <span id="profile-name">(undefined)</span>
  </li>
  <li>
    <strong>id_token (JWT):</strong>
    <span id="idtoken">(undefined)</span>
  </li>
  <li>
    <strong>API responses:</strong>
    <ul id="api-data">
      <li><em>Use the "trigger" button to attempt an API call. The API is configured to require JWT auth.</em></li>
    </ul>
  </li>
</ul>

              
            
!

CSS

              
                body {
  padding: 1em;
  color: #333;
  background: #fafafa;
}

body > ul {
  list-style: none;
  padding: 0;
}

body > ul > li {
  white-space: pre-line;
}

body ul ul {
  padding-left: 2em;
}
              
            
!

JS

              
                // When we obtain a JWT, we'll store it here so that we can use it
// for requests. You can replace this with cookies or browser
// localStorage, if you'd like.
var id_token_storage = 'initial_value'


// Instantiate the Lock widget using my Auth0 "App ClientID" and
// "App Domain". These public values come from the Auth0 dashboard.
var myClientId = 'POBEqlLC6cvXqab6qvdBJzHiLYQ3pCot'
var myDomain = 'theopak.auth0.com'
var lock = new Auth0Lock(myClientId, myDomain)


// A successul sign-in using `Auth0Lock.show()` will result in a
// redirect to this page with a URL hash. If `Auth0Lock.parseHash()`
// returns an object then it means sign-in was successful.
// This function saves the `id_token` (JWT) to a global ariable, 
// but you can also use cookies or browser localStorage.
var hash = lock.parseHash()
if (hash) {
  if (hash.error) {
    console.log('There was an error logging in', hash.error)
  } else {
    lock.getProfile(hash.id_token, function(err, profile) {
      if (err) {
        console.error('Cannot get profile fof this id_token :(', err)
        return
      }

      id_token_storage = hash.id_token
      document.getElementById('profile-userid').textContent = profile.user_id
      document.getElementById('profile-name').textContent = profile.name
      document.getElementById('idtoken').textContent = hash.id_token
    })
  }
}


// ACTION: Show the Auth0Lock widget when you click the 'Sign In' button.
document.getElementById('btn-signin').addEventListener('click', function () {
  var options = {
    authParams: { scope: 'openid' }
  }
  lock.show(options)
})


// ACTION: Trigger an API call that uses the JWT as an "Authorization 
// Bearer Token" (if the JWT exists). You can read the source code 
// for the demo server here: https://tonicdev.com/theopak/jwt-auth-demo-server
document.getElementById('btn-trigger').addEventListener('click', function () {
  var url = 'https://tonicdev.io/theopak/jwt-auth-demo/branches/master/api/secure-endpoint'
  fetch(url, {
    headers: { 'Authorization': 'Bearer ' + id_token_storage },
    method: 'GET',
    cache: false
  }).then(function (response, err) {
    
    // Receive API response
    console.log(response, err)
    var res = err || response
    
    // Render response onto the page
    var element = document.createElement('li')
    var currentTime = new Date().toLocaleTimeString()
    element.textContent = currentTime + ' — ' 
    element.textContent += res.status + ' ' + res.statusText + ' — '
    element.textContent += 'body: ' + res.body
    document.getElementById('api-data').appendChild(element)
  })
})

              
            
!
999px

Console