Calah Vargas

Calah Vargas is the Associate Manager of Product Led Growth, focusing on nonprofits, startups, and partnerships. She works on product marketing and customer marketing initiatives. Outside work, you can find her cooking, trying new restaurants, and traveling with friends and family.

Associate Manager, PLG

Get started and ship fast with Auth0 and Netlify

**TL;DR:** [New Auth0 Extension](https://www.netlify.com/integrations/auth0/) for Netlify: Available Now. We’ll go over why we partnered with Netlify and share resources to help you build and deploy an app.

## Why Should I Choose Auth0?

A secure login experience and access management are at the core of any application with users. Auth0 is a comprehensive auth solution built for developers with evolving needs. With Auth0, you can get your app to market fast by quickly turning on core features, enabling a secure experience for your users, and customizing experiences when your app’s needs change. 

## What is Netlify, and Why Did We Choose to Partner Together? 

[Netlify’s](https://www.netlify.com/) platform allows you to build highly performant and dynamic websites, e-commerce stores, and web applications. It also unites an extensive ecosystem of technologies, services, and APIs into one workflow to unlock team productivity. Integrating with a third-party platform like Auth0 allows Netlify users to deploy any modern frontend stack safely and securely. 

We both share a commitment to an excellent developer experience, so this partnership is a great fit. This extension allows you to leverage Netlify to innovate, scale, and ship while relying on Auth0 to enhance security and a great user experience. 

## Let’s Start Building with Auth0 and Netlify

Challenge: You’re looking to add authentication to your Netlify site easily.

Solution: Use this new extension to add authentication to your Netlify site and connect your Auth0 tenants to your Netlify account dashboard. 

This [guide](https://developers.netlify.com/guides/getting-started-with-the-new-auth0-extension-on-netlify/) will include instructions on how to set up the following while using the web framework Astro:

* Authentication flows for login/logout
* An Auth0-protected serverless function for serving user information

> [Let’s dive in here](https://developers.netlify.com/guides/getting-started-with-the-new-auth0-extension-on-netlify/).

Once complete, you will have built a static site and enabled the Auth0 extension. Congrats on successfully authenticating your new website! 🎉

## Have Questions?

If you want to learn more, check out the new [Netlify documentation](https://docs.netlify.com/integrations/auth0/). Share your thoughts on the guide [here](https://developers.netlify.com/guides/getting-started-with-the-new-auth0-extension-on-netlify/#guide-feedback-form).


Happy building!

_This blog may contain hyperlinks to non-Okta websites that are created and maintained by third parties who are solely responsible for the content on such websites._

New Auth0 Extension for Netlify: Available Now

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

How to use C# extension methods to simplify Auth0 configuration for ASP.NET web applications.

Using C# Extension Methods for Auth0 Authentication

99c4080f412ccf46b9b564db7f482907?s=200 avatar

99c4080f412ccf46b9b564db7f482907?s=200

I'm currently a Senior Developer Advocate at MongoDB. I'm also a Google Developer Expert for Web Technologies and spend most my time giving talks at conferences and meetups, mentoring developers and running workshops, and creating online content to help technology professionals.

Former Auth0 Employee

Ado Kukic

Learn how to use the Delegated Administration Dashboard extension to build a powerful user management workflow.

Better User Management with the Delegated Administration Dashboard

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Learn how to create workspaces, generate code, run tasks, and install extensions with Angular Console.


**TL;DR:** In this article, we’ll explore Angular Console. Angular Console is a desktop application that provides a graphical UI for the Angular CLI. It is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics. Angular Console is a great tool for Angular developers of all skill levels!

There’s often a bizarre prejudice in programming against graphical UIs in favor of the command line. Maybe it’s because of 80’s hacker movies, but it’s never made sense to me. A GUI is just a layer of abstraction. The computer gets the same commands whether you’re clicking on some buttons or furiously typing green text into a black screen.

[Angular Console](https://angularconsole.com/) is a great reason to reconsider that bias. It’s a desktop application developed by [Nrwl](https://nrwl.io/) that provides a graphical UI for the Angular CLI. Nrwl is a software development consultancy that specializes in creating high-quality enterprise software. They’re also great at giving back to the Angular Community.  Angular Console is packed with features like code generation, task running, and a simple interface for installing CLI extensions like schematics.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Do you enjoy a visual UI when building/serving <a href="https://twitter.com/angular?ref_src=twsrc%5Etfw">@Angular</a> apps? I tried the brand new Angular Console from <a href="https://twitter.com/nrwl_io?ref_src=twsrc%5Etfw">@nrwl_io</a> and it&#39;s looking good! <br><br>See it below 📽️<a href="https://t.co/GetJg4ELsw">https://t.co/GetJg4ELsw</a> <a href="https://t.co/DnahCmUJsJ">pic.twitter.com/DnahCmUJsJ</a></p>&mdash; John Papa (@John_Papa) <a href="https://twitter.com/John_Papa/status/1028319375835758593?ref_src=twsrc%5Etfw">August 11, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Who is Angular Console for?
When the team at Nrwl announced Angular Console,  a lot of people shared a similar reaction. Sure, a GUI is fine for *beginners* (probably said with a sneer), but not the *Advanced Super Users*. I’m here to tell you that Angular Console is incredibly helpful for Angular developers across the experience spectrum.

<include src="TweetQuote" quoteText="Angular Console by @nrwl_io is helpful for @angular devs of all experience levels."/>

### It’s fantastic for new Angular friends
Okay, yes, let’s get this out there: Angular Console is great for folks new to Angular. Learning Angular can be tough, even with prior programming experience. Suddenly, you’re thrown into a world of TypeScript and RxJS observables on top of all of the normal front end development concerns.  The [Angular CLI](https://angular.io/cli) is a lifesaver, but even that has a learning curve. The CLI has a specific syntax to learn, as well as all of the different commands needed to build applications. I don’t know about you, but the faster I can get up and running with a new framework, the more likely I am to stick with it.

Angular Console helps reduce the tooling friction of learning Angular to practically nothing. In just a few clicks, you can have a shiny new Angular application and open it in your favorite editor. You can then run CLI commands to generate things like components and services straight from Angular Console. You can even run and serve your app with a few clicks!

### It’s a lifesaver for experienced Angular developers
Do you remember (without looking!) the command to use the NgRx schematics to generate a new action, but to use a flat directory structure and group all actions within one folder? How about the command to add a directive to a specific module while giving it a custom prefix?

Neither do I, at least not from memory. It’s the same reason I have to look up `git rebase` syntax nearly every time: I have more important things to worry about than memorizing a zillion commands!

In psychology, this is called being a [cognitive miser](https://en.wikipedia.org/wiki/Cognitive_miser). We humans prefer simplicity over complexity when it comes to processes and problem-solving. We can improve our ability to solve problems and finish tasks by reducing unnecessary complexity.

Angular Console helps reduce your cognitive overhead by providing a simple interface for generating code that includes live updating of CLI command output.

Here’s a screenshot of that command I mentioned to add a directive with a custom prefix to a specific module:

![Generating a directive with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2dKRfnSdhAPaKy0l9OK0RN/2abf53d5d47cdfec092ecafb58961e43/ac-gen-directive-2)

Note that I didn’t have to remember the name of the project, the path to the module, or the command to use a custom prefix. Angular Console handled all of that for me while showing me what it was doing under the hood. This becomes even more useful as your applications get larger, especially when trying to keep track of multiple projects and modules.

Angular Console also lets you quickly and easily add  CLI extensions and schematics to your applications.  There’s no more looking up exactly which package you need to install. If you want to add [Angular Material](https://material.angular.io/), [Ionic](https://ionicframework.com/), [NativeScript](https://www.nativescript.org/), or many others to your application, you can simply choose from a list and click “Add.” You’ll learn more about that in just a minute.

Naturally, the [Nx schematics](https://nrwl.io/nx/what-is-nx) from Nrwl are tightly integrated into Angular Console. Nx schematics unlock all kinds of essential tools for enterprise developers, like the monorepo pattern, built-in support for testing with Jest and Cypress, and an incredible suite of scripts (like the ability to generate a dependency graph). Nx is definitely a power tool for the advanced user and Angular Console lets you wield it with ease and grace.

## A Tour through Angular Console
Now that you know *why* Angular Console is so helpful, why don’t you take it for a test drive?

### How to Install Angular Console
You’ll first need to head over to the [Angular Console site](https://angularconsole.com/#download) to download and install it. It’s available as a desktop app for Mac, Windows, and Linux (the Linux app is still experimental), as well as an [extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console). The requirements for running Angular Console are the same as running the Angular CLI, so you’ll need to [download and install Node](https://nodejs.org/en/) first.

> Note: For this tour through Angular Console, I'll be using the dekstop version. The UI for the Visual Studio Code extension is a bit different, but all of the functionality is still there.

![AngularConsole.com desktop app download options](https://images.ctfassets.net/23aumh6u8s0i/78OTGmjvEC5SEgdbLELEUz/7c691bbb3ac7e5bf1cc2fc44d94ab44a/ac-download-window)

### How to Create a Project with Angular Console
Once you’ve got Angular Console installed, open it up. You’ll see a welcome screen that lets you choose between creating a new Angular workspace or opening an existing one.

![The Angular Console welcome screen - create a project.](https://images.ctfassets.net/23aumh6u8s0i/6j8uEp5XUH3FG9N1ScIl2a/efb585eaccffb24c20409c2fda020e0e/ac-get-started-2)

Click the create button. Select the parent directory you want to use and give a name to your new workspace (you can name it whatever you’d like). Angular Console will show you the path where your new workspace will live once it’s created.

![Angular Console - Select a parent directory and give your workspace a name.](https://images.ctfassets.net/23aumh6u8s0i/2nDW40KJC9l8nRoRFPS1ob/934f7041ba2bc4dd366549ab76814c49/ac-name-new-workspace)

Click on step 3, “Choose a schematic set.” Here, Angular Console gives you the option to use either the default Angular schematics or Nrwl’s Nx schematics. As mentioned earlier, the Nx schematics create a monorepo and allow for some great other options for enterprise developers. For now, let’s keep things simple. Choose the default schematics.

![Angular Console workspace - Choose the default schematics and click Create.](https://images.ctfassets.net/23aumh6u8s0i/2aH2CDRyFYb1wS2tSasEJE/64a4b45d576664f1e3bfe944d4c162b7/ac-create-workspace-schematics-2)

There's also an optional step 4, "Set schematic options." This includes options to skip the initial dependency installation, initialization of a git repostory, and many others.

You can keep it simple right now, though. Skip all of those and just click "Create."

You’ll see a bunch of output from the command line as the Angular CLI generates the application and runs `npm install` for you. Once that’s done, Angular Console will open the workspace for you.

![Angular Console project automatically opens the workspace after setup.](https://images.ctfassets.net/23aumh6u8s0i/3OshHgPs2TNOWvk7oxLmoY/37b440545cd44c750e9d579f2550a132/ac-workspace-created-2)

If you click on the bar at the bottom (called the "action bar"), it will slide out as a bottom sheet and show you all of the command line output for running `ng new` to set up your workspace. This bar will appear any time you run a task. You can click on it to look at the output and then click the trash can icon to dismiss it.

In doing research for this article, I learned a couple of neat things about the action bar. I interviewed Nrwl engineer Dan Muller about Angular Console and it turns out this is his favorite feature in the app. Dan and his best friend [Cindy](https://twitter.com/czengg) were traveling together while they brainstormed on how to make this feature amazing. The action bar actually caches the last five tasks you ran. In addition to dismissing the output, there’s also a button that lets you re-run these tasks. Here’s an example from another project I have open:

![Angular Console application listing up to five prior tasks.](https://images.ctfassets.net/23aumh6u8s0i/4MngwN18OAMfMeQoCJJCu8/69b709c56c1111f950290efae9175c17/ac-task-sheet-2)

Dan also put a lot of love into the UI design of this feature, like how the icons change if the task failed or was successful. The Angular Material library has no built-in bottom sheet, so he created it from scratch. You can really tell that Nrwl put a lot of care and attention into Angular Console, which developers like me really appreciate.

Okay, your new workspace is ready to go! Let’s look at how to use Angular Console.

### Angular Console basics
Looking at the open project, you’ll notice a hamburger menu button in the upper left corner. That button takes you back to a list of workspaces, where you can also create or open a new workspace.

Below the main title bar, you’ll see a filter bar and a sorting button to organize projects. Of course, this brand new application only contains the main project and its `e2e` folder, so those aren’t terribly useful yet.

Below the filter and sorting bar, you’ll notice that there are a few buttons. To the right of the name of the main application, you’ll see buttons for “Serve,” “Test,” “Build,” and “Generate Component.” To the right of the end-to-end project name, you’ll see an “E2E” button. These buttons correspond to Angular CLI commands or `npm` scripts.

<include src="TweetQuote" quoteText="Angular Console can generate code, run tasks, and install extensions."/>

The left toolbar is home to all of the core functionality of Angular Console.

![The Angular Console app UI has buttons to get to a list of projects, code generation, task running, and extension installation.](https://images.ctfassets.net/23aumh6u8s0i/44AUZ7tT8SzdpR5Q33fLnf/afa7a84379ed550e9d7333233c416f3d/ac-toolbar-2)

The top list button you takes back to the list of projects in the open workspace (where you are now). The bottom gear button takes you to the settings screen. The chat bubble icon is where you can access [Nrwl Connect](https://nrwl.io/connect), which is Nrwl’s premium support service. Nrwl Connect also unlocks some additional features in Angular Console.

The other three buttons are for generating code, running tasks, and installing extensions. Let’s step through each of these.

### Generate code
You can use Angular Console to generate code in projects by clicking on the brackets icon in the left toolbar.  This screen lists all available schematics, which you can also filter by name.

![The Generate Code screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/7HQZxs1tK64c8wwquMMXbQ/7d73963ffda705e193b6f6d9b4a29d8d/ac-code-gen-2)

To try this, click on `component` under the standard `@schematics/angular` package. You’ll see a new screen with two sections: “Important fields” and “Optional fields.” You'll also see a collapsible bottom pane with a button that toggles between structured output or console output. The console output shows the `generate` command using the `--dry-run` flag and updates as you change options (so cool!). You can also hide this pane at any time with the caret button to the right.

![Generating a component with Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6S4njbgc6tA4GxcIgUaoqQ/dbf71cba5e147f07b4671e82af193ef6/ac-create-component-2)

You’ll probably stick with the “Important fields” most of the time, but the “Optional fields” are where power users of the CLI will benefit. It can be tough to remember all of those extra flags and options. Angular Console’s live updating of the dry run output is extremely useful, too. Sometimes I just use Angular Console as a staging area for the commands I want to run and then copy and paste them into my terminal.

To generate a component from this screen, fill out a name and select the main project (not the `e2e` one). You can leave everything else with the default values, but feel free to experiment to see how the console output changes. When you’re ready, click “Generate” in the upper right corner. You’ll see the command change to drop the dry run and execute in the console. If you toggle the bottom pane to “Structured Output,” you’ll see that the task completed successfully.

![Successful component generation in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/2kJczWnhQd8KYALcNd67Ua/95aaf22148d5cd6c31038a0ed4f28dcf/ac-component-successful-2)

Click the “X” in the upper left corner to return to the code generation screen. The task output is still available to you from the action bar you saw earlier.

### Run tasks
Code generation is really awesome, but it’s only one of the features of Angular Console. You can also use Angular Console to run tasks. Click on the terminal icon in the left toolbar to get started. You’ll see a list of `package.json` scripts, as well as tasks related to the main project and the `e2e` project. You can also filter by name like on the other screens.

![The task runner screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/6pHBc9DJ3m08JwVUerkgGb/fc732f0a4b75c63175c0132cb4894ef0/ac-task-runner-2)

Search for “serve” and click on the task under the main project you created. You’ll see a screen similar to the one you saw when generating code. The familiar “Important fields” and “Optional fields” will be present, as well as the output pane.  You’ll also see radio buttons for the `serve` task to either run with the default or production configuration.

![The individual task screen in Angular Console.](https://images.ctfassets.net/23aumh6u8s0i/5aKvIyOvQPn0NUwz4MlyrG/a0efce6e1b3021d6272be2ab166f74f7/ac-serve-task-2)

Just as with the code generation screen, you’ll most likely stick with the standard fields as you get started. That being said, there are a wealth of options just for the `serve` command, like the port, the host, SSL settings, and settings specific to the underlying Webpack build. When you run `ng serve` or its cousin `ng build` from the terminal, you may not realize just how much granular control you can have on the CLI build. Having a UI really helps with that.

Once you’ve got the settings how you want them, click the “Run” button in the upper right corner. You’ll see the successful Console Output, as well as some new information from the Structured Output. You can click on the provided link to view your application in the browser at `localhost:4200`. If you make changes to your code, Angular Console will also let you know when the application rebuilds.

![The task output of the serve command.](https://images.ctfassets.net/23aumh6u8s0i/78TOtC2e192hD3qdSfMOVU/d20071673753b77ceac84655d83c506d/ac-serve-output)

Click the “X” in the upper left corner to return to the task runner screen. The task is again available to you from the action bar. This time, since the server is in watch mode, you’ll see the spinning progress circle inside of a button on the left side. You can stop the `serve` task any time by clicking that button.

### Install extensions
Last but not least, Angular Console features an easy way to install other extensions and schematics packages in your workspace. Click on the puzzle piece in the left toolbar to go to the extensions screen. You’ll see a long list of available extensions from the Angular team, outside companies, and members of the community. Whether you need to add state management, a UI library, or mobile support, you can search through the list and install the package you need with ease. You can also install Nrwl’s Nx schematics to convert your default CLI workspace into an Nx workspace.

![Angular Console extensions screen.](https://images.ctfassets.net/23aumh6u8s0i/eqthXndlrMiNUwSqdXru7/4da0bf84daef618ba3fa28672aeb79fe/ac-extensions-list)

To try this out, search for “material” and click on the `@angular/material` package. You’ll see the familiar UI, but without any additional options.

![The screen to add Angular Material.](https://images.ctfassets.net/23aumh6u8s0i/1XZaZH25iEcoeNXgi53i48/7da6ad5110208ba854beb304ea43f5c0/ac-add-material-2)

Click the “Add” button in the upper right corner. You’ll see the installation output in the console, as well as “Task completed successfully” in the Structured Output.

![Angular Material was added successfully!](https://images.ctfassets.net/23aumh6u8s0i/2viRdtqnyE5QFsgnbprt11/58ff2fdc2a380c10de5963c285164dc6/ac-add-material-successful-2)

Clicking on the “X” in the upper left corner will take you back to the extension installation screen. You’ll also see your completed task added to the bottom task list. You can clear that list any time by clicking on the bar to pop out the bottom sheet and clicking the trash can button. Note that clearing out the list will also stop any running tasks like `ng serve`.

If you install extensions that include CLI schematics, such as Nx or NgRx, you'll also see new tasks available from the Task Runner screen.

## Conclusion
I hope this tour of Angular Console has given you some ideas of how it can be useful to you. If you’re new to Angular, I hope Angular Console will become a great learning tool that helps you get up and running quickly with Angular. If you’re experienced with Angular, I hope you’ll see it as a timesaver and a cheatsheet for CLI commands. If you can’t stand GUIs and want to stick to the command line, that’s okay too. Whatever you choose, happy coding everyone!

*Special thanks to [Dan Muller](https://github.com/mrmeku) from Nrwl for  talking through some of the features and engineering decisions of Angular Console with me. Dan can be reached at [dan@nrwl.io](mailto:dan@nrwl.io).*

<include src="asides/Angular" />


A Tour of Angular Console

001c9ddc5ceb9829b6aaf24f5d28502a

I am software developer with a keen interest in open-source technologies, Linux, and native development. I've worked on many different platforms Android, iOS, Win32, Linux, FreeRTOS, the Web, and others. I've gone through the whole stack and I enjoy learning and using the latest technologies. I now work as a full-stack developer at Auth0.

Senior Engineer

Sebastian Peyrott

We have released new versions of JWT.io and the JWT Debugger extension, learn what's new.



We have released another round of updates for our [JWT.io](https://jwt.io/) website and the JWT Debugger extensions ([Chrome](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/jwtio-debugger)). Among the new features are [HMAC](https://en.wikipedia.org/wiki/HMAC) secret length hints, common claim descriptions, simplified library updates for the website, a share button for the website, support for plain RSA public keys, and more token types can be passed in the URL! In this post, we will go over these new features.

<include src="TweetQuote" quoteText="A new round of updates for JWT.io and the JWT Debugger extensions have been released!"/>

---

## JWT.io and the JWT Debugger extension
[JSON Web Tokens (JWTs)](https://jwt.io/introduction/) are a convenient way to exchange claims between parties. The key features of JWTs are their simple format (Base64-encoded JSON) and the use of signatures and/or encryption. [JWT.io](https://jwt.io/) provides a convenient way to debug and inspect [JSON Web Tokens (JWTs)](https://auth0.com/e-books/jwt-handbook), along with an introduction to some of the key concepts behind them. It also provides a list of libraries and frameworks that can be used with them in many different programming languages.

The JWT Debugger extensions ([Chrome](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/jwtio-debugger)) are the [Web Extension](https://browserext.github.io/browserext/) versions of JWT.io. The debugger has the same features as the website but can be used offline. It also provides additional features like automatic inspection of web storage and cookies to easily find and edit JWTs in websites!

Now, let's go over the new features of this release!

## New Features
### HMAC Secret Length Hints
As [we have seen on our blog before](https://auth0.com/blog/brute-forcing-hs256-is-possible-the-importance-of-using-strong-keys-to-sign-jwts/), the length of the HMAC secret is one of the fundamental properties to ensure it cannot be brute forced. For this reason, we have added two hints:

- The default secret for all HMAC token examples now hints at the minimum required length.

![Default secret for HS256 example](https://images.ctfassets.net/23aumh6u8s0i/7bsOiqkha9rbIRXBIaeVhm/ffafe28856d614488a591a39dcdf4cbc/1-hmac-hint-1)

- When typing, a tooltip appears if the secret is too short to be considered safe.

<video src="https://cdn.auth0.com/blog/jwt-io-updates-2/2-hmac-hint-2.mp4" controls autoplay loop></video>

Do note, however, that length is not the only thing that is important for secrets. They must also be hard to guess, or, in other words, completely random.

### Share Button
A `share button` to easily pass tokens in URL form has been requested many times, and indeed, it was already available in the extension. Now it is also available on the website!

<video src="https://cdn.auth0.com/blog/jwt-io-updates-2/3-share-button.mp4" controls autoplay loop></video>

### Easy Library Updates
Since its inception, adding a new library to the library list at JWT.io has been a cumbersome process. Several [Pug](https://pugjs.org/) and CSS files needed to be edited. Furthermore, editing an existing library had its problems too: to change features one had to remember class names, for example. We have finally modernized the process. Now libraries are located in the `views/website/libraries` folder. There, you will find a JSON file for each language or framework. Inside the JSON file you'll see something like this:

```json
{
  "name": "Node.js",
  "uniqueClass": "node",
  "image": "/img/2.svg",
  "bgColor": "rgb(138, 194, 68)",
  "libs": [
    {
      "minimumVersion": "4.2.2",
      "support": {
        "sign": true,
        "verify": true,
        "iss": false,
        "sub": false,
        "aud": true,
        "exp": true,
        "nbf": false,
        "iat": false,
        "jti": false,
        "hs256": true,
        "hs384": true,
        "hs512": true,
        "rs256": true,
        "rs384": true,
        "rs512": true,
        "es256": true,
        "es384": true,
        "es512": true
      },
      "authorUrl": "https://github.com/auth0",
      "authorName": "Auth0",
      "gitHubRepoPath": "auth0/node-jsonwebtoken",
      "repoUrl": "https://github.com/auth0/node-jsonwebtoken",
      "installCommandHtml": "npm install jsonwebtoken"
    }
  ]
}
```

Multiple libraries go in the `libs` array. Most of the JSON file is self-explanatory, but some values are optional. For full details, check out the [README](https://github.com/jsonwebtoken/jsonwebtoken.github.io/blob/master/README.md) file.

To add a language or framework, a new JSON file must be created. The name of the file should start with a number, followed by a name, and end with `.json`. No further changes are required (other than editing the contents of the file).

It really is that simple!

### JWT.io as OpenID Connect Callback
One of the uses that JWT.io originally supported, was to be set as the callback for OpenID Connect operations (you can do this from the Auth0 Dashboard). That way, after a successful login, developers could be sent automatically to JWT.io with the returned token in the editor. This was disabled a long time ago during refactors. But now, that feature is back!

<video src="https://cdn.auth0.com/blog/jwt-io-updates-2/4-jwt-io-callback.mp4" controls autoplay loop></video>

The following URL parameters are recognized: `access_token`, `id_token`, `token`, and `value`.

<a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">Sign up for a free Auth0 account</a> to try this out!

### Common Claims Tooltips
In our previous update, we had enabled tooltips for dates in claims. This time, we have extended tooltips to also show a short description of what the claim means.

<video src="https://cdn.auth0.com/blog/jwt-io-updates-2/5-claims-tooltips.mp4" controls autoplay loop></video>

Of course, human-readable dates still work.

### Plain RSA Public Keys
Some RSA implementations work using the [old PEM-encoded RSA public key without the X.509 `SubjectPublicKeyInfo` header](https://stackoverflow.com/questions/18039401/how-can-i-transform-between-the-two-styles-of-public-key-format-one-begin-rsa) that is much more common nowadays. Unfortunately, old versions of JWT.io did not support these keys. But that's no longer the case! Plain RSA keys of yore are now supported, try it out!

<include src="TweetQuote" quoteText="The new round of features for JWT.io include: HMAC secret length hints, a share button, easy library updates, JWT.io as OIDC callback, common claim tooltips, and plain RSA pubkeys!"/>

## Other Changes
Of course, not every change in this release is related to new features. In this release, we have also:

- Merged **all PRs**.
- Added **6 new libraries** (thanks to external contributors!).
- Updates **12 libraries** (thanks again to external contributors!).
- Improved the [README file](https://github.com/jsonwebtoken/jsonwebtoken.github.io/blob/master/README.md).
- Implemented some **design changes**.
- Passed the **100 combined tests** mark!
- And fixed a good deal of bugs.

<include src="asides/Jwt" />

## What's Next
After all these changes, we will now let the codebase stabilize for a while. Of course, if you find any bugs, please report them in [the bug tracker](https://github.com/jsonwebtoken/jsonwebtoken.github.io/issues).

But that is not all! We are also thinking of more ways of improving JWT.io. Here are some of the ideas we are considering at the moment:

- Adding a button to clear the last saved token.
- Allowing the selection of different tokens passed in as URL parameters (`access_token` vs `id_token` for example).
- Support more algorithms, such as `ES512` or the [new EdDSA signatures](https://tools.ietf.org/html/rfc8037).
- Undock capability for the extensions (if possible).

What are your thoughts? Don't hesitate to tell us in the comments or by opening an enhancement request in the [bug-tracker](https://github.com/jsonwebtoken/jsonwebtoken.github.io/issues). Hack on!


Another Round of JWT.io and JWT Debugger Extension Updates



We have released a major update to our [JWT.io](https://jwt.io/) website and the [JWT Debugger](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd) extension based on it. Among the new features, there are new signing algorithms, improved public-key handling, human-readable timestamps, and even [Firefox support](https://addons.mozilla.org/en-US/firefox/addon/jwtio-debugger) for the extension! In this post, we will go over these new features.

<include src="TweetQuote" quoteText="JWT.io and the JWT Debugger extension have been updated with new features!"/>

---

## JWT.io and the JWT Debugger extension
[JSON Web Tokens (JWTs)](https://jwt.io/introduction/) are a convenient way to exchange claims between parties. The key features of JWTs are their simple format (Base64-encoded JSON) and the use of signatures and/or encryption. [JWT.io](https://jwt.io/) provides a convenient way to debug and inspect [JSON Web Tokens (JWTs)](https://auth0.com/e-books/jwt-handbook), along with an introduction to some of the key concepts behind them. It also provides a list of libraries and frameworks that can be used with them in many different programming languages.

The [JWT Debugger extension](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd) is the [Web Extension](https://browserext.github.io/browserext/) version of JWT.io. The debugger has the same features as the website but can be used offline. It also provides additional features like automatic inspection of web storage and cookies to easily find and edit JWTs in websites!

New versions of JWT.io and the JWT Debugger extension have been released. Let's go over the changes.

## New Features
### New Signing Algorithms
For a long time, JWT.io and the JWT Debugger extension only supported the two most popular algorithms: HS256 and RS256. HS256 is an HMAC-based algorithm that relies on a shared secret between parties to produce and verify signatures. On the other hand, RS256 is an RSA-based algorithm, relying on public and private key pairs to sign and verify signatures. The advantages of RS256 are clear: signatures can only be produced by the private-key holder, while verification can be performed by anyone holding the public key. However, the complexity of the implementation for RS256 can make HS256 signatures better for certain use cases (embedded, small devices, etc.).

![New algorithms](https://images.ctfassets.net/23aumh6u8s0i/1NaGCSea11eRFPXlrqP2EO/daed2abf80e328068b91d25647d6f087/1-new-algs)

The new version of JWT.io and the extensions support many more algorithms:

#### HMAC
- HS384
- HS512

These are variants of HS256. HMAC signatures rely on a hash function to produce and verify the signature. In the case of HS256, the hash function is SHA-256. For the other two, the hash functions are SHA-384 and SHA-512. For certain use cases, SHA-512 exhibits better performance than the other two. Security wise, none of these hash functions has been broken.

#### RSA
- RS384
- RS512
- PS256
- PS384

Much like the HMAC counterparts, RSA signatures also rely on a hash function to produce and verify a signature. The same thing changes between RS256, RS384, and RS512.

PS256/384 use a different type of signature (RSA-PSS) that also relies on the RSA algorithm as the baseline. In particular, it uses an encoding method that relies on a random salt value. This produces probabilistic rather than deterministic signatures. It is considered stronger than RS256/384/512 signatures as long as the random salt is truly random. In case the salt is not truly random, it provides the same level of strength as the baseline RSA algorithm

#### ECDSA
- ES256
- ES384

These algorithms rely on the elliptic-curve digital signing algorithm (ECDSA) rather than RSA. The main advantage of ECDSA is that keys can be smaller for a similar level of cryptographic strength. A 256-bit ECDSA key provides a cryptographic strength similar to a 3248-bit RSA key. This makes ECDSA keys better for certain hardware limited devices.

> If you are interested in a detailed rundown of JWT signing algorithms, don't forget to check our [JWT Handbook](https://auth0.com/e-books/jwt-handbook). Chapter 7 goes over all signing algorithms in detail.

#### "none"
JWTs also support setting the `alg` claim to `none`. This means that the JWT is not signed. Unfortunately, this has resulted in [critical vulnerabilities in JSON Web Token libraries](https://auth0.com/blog/critical-vulnerabilities-in-json-web-token-libraries/). For this reason, JWT.io and the JWT Debugger extensions now consider `alg: "none"` tokens always _invalid_.

### Automatic Public-Key Download
Another interesting feature that has been added is automatic public key downloads. Public-key algorithms, such as RSA, RSA-PSS, and ECDSA, rely on public-keys to verify signatures. Public-keys, like their name implies, can be safely shared without compromising the security of the signature. For this reason, it is not uncommon for JWT public-keys to be available either embedded in the token itself, or in a public URL.

JWT.io and the JWT Debugger extensions now attempt to get public keys in different ways according to the claims embedded in the token.

If the token contains both the `iss` and `kid` claims, JWT.io will attempt to download the token from a specially crafted URL. For example:

```javascript
header: {
  kid: 1
},
payload: {
  iss: "https://username.auth0.com/"
}
```

In this case, JWT.io and the extensions will attempt to download the key with `kid = 1` from the special URL `https://username.auth0.com/.well-known/jwks.json`. This is a [common scheme used by Auth0](https://auth0.com/docs/jwks). In other words, all Auth0 JWTs can now be verified in JWT.io and the JWT Debugger extension by simply pasting the token!

<include src="TweetQuote" quoteText="With automatic key downloads, all Auth0 JWTs can now be verified in JWT.io and the JWT Debugger extension by simply pasting the token!"/>

Of course, since the JWK and JWS standards declare other common schemes for specifying keys, these are also supported: the `jwk`, `jku`, `x5c`, and `x5u` claims. These are used to either embed a key within the token (`jwk` and `x5c`) or to declare a URL to get the keys or certificates (`jku` and `x5u`). For example:

```javascript
header: {
  kid: 1,
  jku: "https://username.auth0.com/.well-known/jwks.json"
}
```

In this case, JWT.io and the extensions will attempt to download the key with `kid = 1` from the URL `https://username.auth0.com/.well-known/jwks.json` specified in the `jku` claim.

### Human Readable Timestamps
Several JWT claims are time-based. For instance, the `iat` claim specifies the exact time the JWT was issued at, the `exp` claim specifies the expiration time for the JWT, the `nbf` sets the time when the JWT becomes valid, etc. Unfortunately, these claims are based on the [Unix epoch](https://en.wikipedia.org/wiki/Unix_time): they specify the number of seconds elapsed since January 1st, 1970. Understanding these values by simply looking at them is hard. For this reason, now JWT.io and the JWT Debugger extensions display a tooltip when the mouse hovers over a supported time claim.

![Human readable timestamps](https://images.ctfassets.net/23aumh6u8s0i/KAGGuSxmdUdMO3YeLBJfh/a21a8482154c72bf97bb527ed7b670b0/2-timestamps)

The supported claims are: `exp`, `iat`, `nbf`, `auth_time`, and `updated_at`.

### Firefox Support
Yes! It's finally here. Ever since the first release of the JWT Debugger extension for Chrome we have received requests for a Firefox version. Now it's here and supports all the features of the Chrome extension. [Get it here](https://addons.mozilla.org/en-US/firefox/addon/jwtio-debugger)!

![JWT Debugger on Firefox](https://images.ctfassets.net/23aumh6u8s0i/3oxA0AoIwuIHbRGmi2gcqh/eb843e039c0aa895d02963ecd0eabb51/3-firefox)

## Streamlined Codebase
Although the new features are the cool part of the release, we have also done a ton of internal work on both JWT.io and the extensions. In particular:

- We have closed over 40 issues and merged over 15 pull requests (some with more libraries!).
- We have synchronized the codebases of JWT.io and the JWT Debugger extensions to always get the latest features out to you, regardless of what you use more.
- We have updated all internal dependencies to the latest versions. This has fixed many bugs here and there and also improved the experience on mobile platforms.
- We have performed a major refactor to improve code quality and latencies during page load. JWT.io is now faster than ever!
- We have added more tests to our test suite. Do check that these pass before submitting new PRs!
- Build scripts are now simpler. Want to contribute? Doing so is as simple as:

Steps:

1. [Checkout from Git](https://github.com/jsonwebtoken/jsonwebtoken.github.io/).
2. `npm install`
3. `grunt`

That's it! You will now find JWT.io available on [http://localhost:8000](http://localhost:8000) and ready for your changes. The extension is also built but you'll need to load it manually in your browser, see the Chrome or Firefox docs for help with this. The resulting code can always be found in the `dist` folder. Send your PRs!

<include src="asides/Jwt" />

## What's Next
Although we have just finished with these changes, there's still more in our pipeline!

- **Key-length tips:** we will show you tooltips when your shared secrets are not long enough.
- **Share button:** the extensions already support this, now it's coming to JWT.io!
- **Library submission process:** we get tons of PRs with new libraries, we want to formalize the process and setup tools so that you can easily review any steps that are required to add your library to JWT.io

We hope you enjoy all the new features and changes at [JWT.io](https://jwt.io/) and the JWT Debugger extensions. Please report any bugs at the [GitHub repository](https://github.com/jsonwebtoken/jsonwebtoken.github.io/) and don't forget to leave us your comments or requests here or in the issue tracker at GitHub. Cheers!



JWT.io and JWT Debugger Extension Updates

8f9f6a577da77a9add9cadbb90e66b75

Matthew Machuga

Give your users a choice to link their accounts when accidentally using another provider with the same email address.

# An Easy Way for Users to Link Accounts

A few months ago, Diego Poza wrote an article on [The 3 Best Ways To Create the Single Vision of A Customer](https://auth0.com/blog/the-three-best-ways-to-create-the-single-vision-of-a-customer/).
In it he said the number one must-have is Centralized Identity Management. He 
described that in Auth0, if a user signed in with their Facebook login, then 
their Google account next, they would have two accounts. Auth0 already
provides rules for allowing these accounts to be linked back together 
automatically, but we're happy to announce a new option that gives the
user a choice as to whether they'd like to link the accounts or not.

This happens as part of our [Account Link extension](https://auth0.com/docs/extensions/account-link). It's extremely simple to
set up and can save your users a lot of hassle.

Let's walk through how this gets presented to your users to demonstrate how the
functionality is helpful. Let's say one of your users has the email address
`spencer@example.com`. They've used this email address to sign up for Facebook,
Twitter, Google Apps, and your site. If your site offers all of these social
sign in options and database users, it can be understandably hard for a user
to remember what account they used to sign up for your site. Like in our
example above, we'll assume that `spencer@example.com` signed up with their
Facebook account originally, but now that they're back on the site they can't
remember. They incorrectly guess they used Google to sign in.

With the extension enabled, instead of being taken to your site with a new
account, they are sent to a prompt from the extension, notifying them that they
appear to already have an account registered with that email address on your
site. The most prominent option is to continue linking the accounts. When
**Continue** is clicked, the user will be redirected to log in with the account
that's already detected on your site. Assuming their authentication is
successful, they'll be redirected to your site successfully as their original
account, with the new account merged in as an identity of the original. This
then, conveniently, lets them sign in with either option to the same account.

![Image of extension page](https://images.ctfassets.net/23aumh6u8s0i/6Nd5KcxDJODJ2YK6BIyTtz/1139afaea432a35a18428b1512865a50/hosted-page-example)


But let's assume the opposite for a moment: that your user has intentionally
tried to create a second account with a different provider. Not a problem! They
can simply click the small, diminished link saying, "I want to skip this and
create a new account." and they'll continue to your site logged in as a
new user under their new provider.

Providing the ability to link accounts through the Account Link extension
makes it so your user retains a choice as to whether they'd like their accounts
linked, but will encourage them to link by default since it tends to be the 
most common intent.

You can install it from the [Extensions Gallery](https://manage.auth0.com/#extensions)
and give your users a choice that will make their experience, and your management, easier.

# Aside: Securing Applications with Auth0

Are you building a [B2C](https://auth0.com/b2c-customer-identity-management), [B2B](https://auth0.com/b2b-enterprise-identity-management), or [B2E](https://auth0.com/b2e-identity-management-for-employees) tool? Auth0, can help you focus on what matters the most to you, the special features of your product. [Auth0](https://auth0.com/) can improve your product's security with state-of-the-art features like [passwordless](https://auth0.com/passwordless), [breached password surveillance](https://auth0.com/breached-passwords), and [multifactor authentication](https://auth0.com/multifactor-authentication).

[We offer a generous **free tier**](https://auth0.com/pricing) so you can get started with modern authentication.

An Easy Way for Users to Link Accounts

sandrino-di-mattia

Principal Architect

Sandrino Di Mattia

Introducing the new version of our Authorization Extension which adds support for roles and permissions



<div class="alert alert-info alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>Forrester Consulting analysis determines that using Auth0 can yield a 548% ROI and $3.7M in identity-related savings. Read the full report: <a href="https://resources.auth0.com/forrester-tei-research-case-study/">Total Economic Impact of Auth0</a>.</strong>
</div>

---
## Background

Authentication has always been the core of Auth0. But once you know who your users are, you’ll probably also need to know what they can do. Therefore, after authenticating users, you’ll need to authorize them. There are so many different ways to do this, from complex products to home-grown solutions. Using our rules engine, you could also consume this information during the login process.

## Concepts

The Authorization Extension which you can now install using the Extensions tab in the dashboard, tries to provide customers with a generic approach to managing authorization using three top-level concepts:

 - Groups
 - Roles
 - Permissions

### Groups

Groups are collections of users. They are a common way to organize users in enterprise directories like Active Directory. A company might create a group for every department, such as HR, Finance, Accounting, and IT.

Users can be added to one or more groups. But groups can also be nested, with members of one group automatically added as members of another group.

![An example of the "Finance Group"](https://images.ctfassets.net/23aumh6u8s0i/4aLHeBTDYJPNw1d4N0NZp9/2006be77627c5145502aa4e03a190fb8/group)

The main reason for having groups is that it allows us to group people who have the same profile within the company. It is easier to assign roles and permissions to groups than it is to individual people, who can can get sick, go on vacation or leave the company.

### Permissions and Roles

While groups are bound to an organization and not an application, the same is not true for roles and permissions.

If you look at an application that you are building, you’ll notice that users can do many things within your application. Everything your users can do are actions, including opening a record, updating one, deleting one, reporting, and changing settings. A permission determines whether you are allowed to execute an action or not, such as:

- `read:users`
- `run:reports`
- `update:settings`

![Permissions are granual actions that you can execute within an application](https://images.ctfassets.net/23aumh6u8s0i/5AwgqESXywzDYhMjTIE1qc/d86f2afabe3bbf22beaad7b7ed4da0c3/permissions)

These permissions only make sense within the application. A `generate:invoice` permission might make a lot of sense in your accounting application but no sense at all in your planning tool. Therefore, permissions represent actions that you can execute as a user within an application, and roles are there to group these permissions into logical collections.

A timesheet application can have a **Timesheet User** role and a **Timesheet Manager** role. A user will have certain permissions, such as `read:timesheets` `update:timesheets`, and `create:timesheets`, while a manager will have additional permissions, such as `approve:timesheet` and `reject:timesheet`.

![Roles are used to organize your permissions](https://images.ctfassets.net/23aumh6u8s0i/19bQ09h64GAFTBMd118b2Y/ce19dbfb9141a2919632edfbafdd323f/role)

These roles can be assigned to specific users or to groups; if roles are assigned to a group, every user of that group will receive those roles (and permissions).

## Consuming this information in your applications

After setting up everything in the extension, your applications will need to consume this information. The extension offers three ways to do this:

 - Adding information to the **id_token**
 - Adding information to the user’s **app_metadata**
 - Getting the information from a **policy decision point** (PDP)

In the configuration section, you can configure the behavior of the extension. Any change you make here will deploy a rule to your Auth0 account, which will add the information to the token, the app_metadata, or both.

If you’re implementing RBAC, for example, you could just check the box to store the roles in the token. But if you need to understand which permissions a user has in a specific application later, you could make the following call to get the user’s authorization data in the context of an application:

```
POST https://sandrino-dev.us.webtask.io/api/users/ad|john@fabrikam.com/policy/9CDFQBunB9ZvYRCpFWJlzpH9tUwclGIO
```

This will return the groups, roles, and permissions for a user in the context of the current application:

```json
{
  "groups": [
    "Distribution",
    "Accounting"
  ],
  "permissions": [
    "read:own-receipts",
    "update:own-receipts",
    "update:delete-receipts",
    "read:own-reports",
    "update:own-reports",
    "delete:own-reports",
    "submit:own-reports",
    "read:receipts",
    "read:reports",
    "approve:reports",
    "reject:reports"
  ],
  "roles": [
    "Expense User",
    "Expense Manager"
  ]
}
```

## Feedback?

This extension was built using React, Redux, Hapi, and Webtask. When you install it, the entire application will run in the Webtask container of your Auth0 account.

The full source code is available at https://github.com/auth0/auth0-authorization-extension. Feel free to open a GitHub issue if you have any feedback. 

## What lies ahead

Our API authorization feature has been in public preview for some time now, and it will be interesting to use the authorization extension in that context. Depending on your use case, your permissions can be represented as **scopes** in your access token.

Here are some additional resources to get you started:

- [Official documentation](https://auth0.com/docs/extensions/authorization-extension)
- [Automatically provisioning groups, roles, and permissions](https://github.com/auth0-extensions/authz-extension-automation-sample)


Announcing the Auth0 Authorization v2 Extension!

bc94ff6211e645a2bdb4fdc60e23ad85

Kassandra Perch

We've created a video showing of some of the cool features of our JWT Debugger for you to see


<include src="Vidyard" id="d8j9Txpk2R5pPLhbtGFFau" />

## Transcript

Hi, this is Kassandra with Auth0, and today we're gonna talk about the new JWT plugin that we've launched. So I've already installed it, and you can see the logo over here, and so I'm gonna click on it. And you can see the debugger. Now, there are quite a few features that are brand-new to this debugger that I want to show you. One of the first ones is this "Open JWT From." So what I'm gonna do is, it says, "Web Storage" and "Cookies," so I'm actually going to use the local storage API to save a JWT into local storage and show you how you can debug it.

Okay, now to do that, what I'm going to do is say, "localStorage.setItem()" with our token. Okay. So now I'm going to reopen the JWT debugger and go to Open JWT From. And as you can see, my token now shows up here. Now it does still say invalid signature, so I'm gonna have to change the secret to the secret I made this key with, and you can now see signature verified, just like with the JWT debugger on the webpage. You can also share JWTs with this button. You copy the URL, and it will send people to the debugger on the website.

One of the other really cool things you can do with the JWT plugin is decode and check RSA signed JWTs. And so I've pasted one in here, and as you can see, it wants my public and private key. I'm gonna put in my public key here, and I'm gonna take my private key off there. And I'm gonna put that here. And as you can see, the signature is now verified. This can come in handy in many, many situations. So basically if you're working on a site using JWTs, you can now pull those JWTs from local storage or cookies, and no matter what you used to encode them, be it a public, private key pair or an HS256 secret, you can debug them in your browser without even having to leave.

Hopefully this will inspire you to [download the debugger yourself](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd?hl=en). I'm Kassandra Perch with Auth0. Thanks for watching.


Learn more about the new JWT Debugger Chrome Extension

Do you like JWT.io? Then you'll love this extension!



Do you find yourself visiting [JWT.io](https://jwt.io) a lot to debug your tokens? Then you'll love what we have in store for you: [JWT.io as a Chrome extension](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd) with extra features!

<include src="TweetQuote" quoteText="Debug JWTs from your browser with our new extension: https://goo.gl/axNsXn"/>

-----

## A New Chrome Extension
We noticed many users rely on [JWT.io](https://jwt.io) to debug their JWTs. And with good reason! The colored visual editor is intuitive and has support for both HMAC and RSA signed JWTs. So we thought: what if we made this available offline for all users with a few extra features? So our [new Chrome extension](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd) was born.

## Features
- Visual JWT editor with coloring:
![JWT Debugger](https://images.ctfassets.net/23aumh6u8s0i/6kNIm4984TkoHc56HSWpw4/12e31ed46fb4001384321f0624273634/editor)

- Support for HS256 (HMAC + SHA256) signed JWTs:
![JWT Debugger HS256 support](https://images.ctfassets.net/23aumh6u8s0i/7HtwQ0sZRJpQzXI8GNIC77/be00c8f35eedbe242c7849cba440e5d2/hs256-2)

- Support for RS256 (RSA) signed JWTs:
![JWT Debugger RS256 support](https://images.ctfassets.net/23aumh6u8s0i/BHrWz3ctLpLumgRPozIUM/7cac276fedfd8956e02c49fc465c16ea/rs256-2)

- Load and save JWTs in cookies and web storage from the current tab:
![JWT Debugger load from cookies/web storage](https://images.ctfassets.net/23aumh6u8s0i/33ZIvbcX2GIIGo3aZbzkaC/c0ae9508862cd211898db57eb8023d0a/load-from)

- Get a shareable URL for your JWTs:
![JWT Debugger shareable URL](https://images.ctfassets.net/23aumh6u8s0i/4Gp39AxqZH41lM9XxOzkjU/af9f4bb9d589ff2100ad78a5f477421e/share-2)

[Try it out now](https://chrome.google.com/webstore/detail/jwt-debugger/ppmmlchacdbknfphdeafcbmklcghghmd) and give us your feedback! Can you think of any other features you'd love to have? Tell us below in the comments or through Chrome's Web Store.

<include src="asides/Jwt" />


Introducing our new JWT Debugger Chrome Extension

667b1c82b6cc2241ff176d50c65da603?s=200 avatar

667b1c82b6cc2241ff176d50c65da603?s=200

Guest Author

Eugene Kogan

The Auth0 Logs to Sumo Logic extension helps you deal with security incidents and performance issues

If you're a user of both Auth0 and Sumo Logic, you can use this awesome [Auth0 extension](https://github.com/auth0/auth0-logs-to-sumologic) to send your tenant logs to Sumo Logic. Having all your logs centrally located makes them more valuable and easier to correlate when dealing with something like a security incident or a performance issue. Amazingly, you can sign up for a free [Sumo Logic](https://www.sumologic.com/pricing/) account and collect up to 500MB of data per day! That is more than enough to get started.

<include src="TweetQuote" quoteText="Having all your logs centrally located makes them more valuable and easier to correlate."/>

It's super easy to install the "Auth0 Logs to Sumo Logic" extension right from your Auth0 account [Dashboard](https://manage.auth0.com/#/extensions). Simply login, click on Extensions, then find and click on the Sumo Logic icon to configure and enable the extension.

![Sumo Logic extension icon](https://images.ctfassets.net/23aumh6u8s0i/49s5Wz1y7xmfRkGjmJ2Jgc/c83d0ab7c096c57594153fceeeaf20bc/sl-ext-icon)

Once enabled, the extension configuration screen will be displayed. You'll need to decide on a few simple settings, but the defaults are all reasonable. One piece of information you will need to supply is the URL of your Sumo Logic HTTP collector endpoint. If you don't already have one, follow the [Sumo Logic instructions](https://help.sumologic.com/Send_Data/Sources/HTTP_Source) for creating an HTTP source and paste the URL it generates into the Auth0 extension configuration settings. We recommend naming the source category `auth0_logs`.

![Sumo Logic extension configuration screen](https://images.ctfassets.net/23aumh6u8s0i/WhqZ1Ie4B3RDnTtOqqnZv/414d4ec1db1eb58734ddfcd01cc41542/sl-ext-config)

Data should begin appearing in Sumo Logic a few minutes after you enable the extension. A simple search like `_sourceCategory=auth0_logs` will show you the most recent log events. Getting the top 10 users for a given time period is as easy as this query:

```
_sourceCategory=auth0_logs | json auto
| count user_name | top 10 user_name by _count
```

Want to create a chart showing the popularity of a particular client based on the number of logins per hour over a few days? Sure, you can do that in Sumo Logic with just a few commands:

```
_sourceCategory=auth0_logs salesforce | json auto | timeslice 1h
| count by _timeslice, client_name
| transpose row _timeslice column client_name
```

The resulting chart will look something like this:

![Sumo Logic trend chart sample](https://images.ctfassets.net/23aumh6u8s0i/4UE51x5WhGtPHVIQodVzW1/05bd07e9f8b9bce31297b1edfff1e88b/sl-chart-sample)

We have been using the Auth0 to Sumo Logic extension ourselves since it was first released, and it's proven to be very useful for staying on top of what's happening with our own Auth0 accounts and our internal users (employees). Sumo Logic makes it easy to see the latest failed logins, find and alert on error messages, create charts to visualize trends, or even do complex statistical analysis on your data.

To help us (and our customers) visualize these logs, we spent some time creating a couple of dashboards. The Sumo Logic for Auth0 dashboards show you the output of several saved searches all on one easy to read screen, and makes it easy to zoom in or drill down when something looks interesting.

![Sumo Logic dashboard for Auth0 logs](https://images.ctfassets.net/23aumh6u8s0i/47lOGxI5x1ad90yP32hyQA/9faac6b90588020458e9594ffa2ee991/sl-db-screenshot)

If you're a Sumo Logic customer and are interested in trying out these dashboards, just let us know via [Support Center](https://support.auth0.com) (be sure to include your Sumo Logic account name) and we will gladly share it with you. Once it's available through your account, you're free to customize it, add to it, create alerts based on the searches, or really anything else that you find useful!

Here are the saved searches we've created so far:
![Sumo Logic saved searches for Auth0 logs](https://images.ctfassets.net/23aumh6u8s0i/539k6z8N5pEhhbcXEWzFA4/8844fe55472670e0374734776c2dc252/sl-saved-searches)

We'd love to hear what you think, especially if you've got a great idea that we should incorporate back into our original version. Our goal is to eventually publish these dashboards via a real Sumo Logic app, so that it's automatically available to all users.

Have fun analyzing and visualizing those logs!

"extension"