Integrating Auth0 with Screenly

The beauty of standards is that they span vendors. Auth0 is a big champion of open standards, including OAuth 2.0. In this tutorial, we will leverage OAuth 2.0 Client Credentials to access sensitive dashboards securely by leveraging Screenly’s Edge Apps.

The relevance of these open standards becomes particularly evident when we consider the omnipresence of digital signage in our daily lives.

Screens, Screens, Screens

They’re everywhere. Advertisement, self-checkout counters, and dashboards on your office walls. The use cases are endless. In industry terms, these screens are known as Digital Signage. Screenly is a leading provider of secure digital signage, trusted by the likes of banks and Fortune 500 companies.

Screenly was recently asked to implement a Power BI dashboard in a secure fashion. They had very strict requirements about how the authentication flow could happen and how the sensitive information could be stored. Fortunately, this company embraces open standards and relies heavily on OAuth 2.0 for internal authentication. More precisely, they had adopted the OAuth 2.0 Client Credential flow as their standard to use whenever possible for services to be integrated. Recognizing these stringent security needs and their client's preference for robust authentication protocols, Screenly used Edge Apps, a developer framework that allows developers to deploy applications in a secure fashion. As we discussed possible solutions with the client’s security team, Screenly realized that they could solve all of their security concerns by making the OAuth 2.0 Client Credential feature a first-class citizen in the Edge App runtime environment. So they did. The result was the Power BI Edge App, which can be found on their Playground on GitHub. Now, PowerBI is just one of many assets that need to be protected. There are a large number of assets that customers may want to show on their screens, such as internal dashboards, that are protected by some sort of authentication.

Connect Screenly with Auth0

In this tutorial, we will mimic what Screenly did for their customers but for your internal assets. For the sake of argument, let’s assume it is an internal dashboard that you want to display on your office walls but have been unable to do so due to security concerns.

In this guide, we'll utilize an Edge App to execute an OAuth 2.0 Client Credential Flow, enabling automation of the login process for apps supported by Auth0.

Big-picture, the way the Client Credential flow works is as follows:

The client initiates the authentication process by sending a POST request to the authentication end-point, with, among other things, the Client ID and Client Secret. Assuming the request was successful, the authentication server will return a Bearer Token (that usually expires soon thereafter) The client can now authenticate to the dashboard using the Bearer Token to access the resource.

To mimic this flow, we will be building on top of the Auth0 Getting Started Guide.

1. Establish an Auth0 account and configure it using the Getting Started Guide.
2. Clone and set up a sample app using Auth0's Flask Example for a comprehensive demonstration.

Once you have your Flask application running, you need to ensure your application is network-accessible (i.e., not restricted to localhost). If not, the Screenly Player will not be able to communicate with the resource.

In order to authenticate to the Flask App, we now need to generate our credentials as per this guide. Once done, you need to take note of the following:

• Authentication URL
• Client ID
• Client Secret
• Audience

Equipped with this information, we'll craft an Edge App to facilitate automatic logins into your Auth0-protected resource.

Crafting the Edge App

Before diving in, ensure: * You have an active Screenly account. * You possess a Screenly Player, preferably a Screenly Player Max.

Install the Screenly CLI. For macOS users with Homebrew:

$ brew tap screenly/screenly-cli
$ brew install screenly-cli

After installing the CLI, run screenly login to access your account.

Next, initiate the creation of your Edge App by generating the screenly.yml file in a new directory. This file should contain the settings you provided, which will allow you to define the various necessary configurations:

---
app_id:
entrypoint: http://my.app.com
settings:
  oauth2_client_secret:
    type: secret
    title: Oauth 2 Client Secret
    optional: true
    help_text: Auth0 Client Secret
  oauth2_client_id:
    type: string
    title: Oauth 2 Client ID
    optional: true
    help_text: Auth0 Client ID
  oauth2_audience:
    type: string
    title: Oauth 2 Audience
    optional: true
    help_text: Auth0 Audience
  oauth2_scope:
    type: string
    title: Oauth 2 Scope
    optional: true
    help_text: Auth0 Scope
  oauth2_endpoint:
    type: string
    title: Oauth 2 Entrypoint
    optional: true
    help_text: Auth0 Entrypoint

Modify the entrypoint to correspond to the sample app you established earlier.

Following this, embed the application into the system using the specified command. Then, after updating the app_id in screenly.yml, you'll push the file and adjust the settings accordingly.

Complete the process by promoting the Edge App as an asset, which, once done, will be visible in your web interface as Auth0 Example (stable). Schedule and display this asset on your Screenly device as you would with any other content.

Once you've run that final command, you should see an asset named Auth0 Example (stable) appearing in your web interface. Just schedule this asset as you would with any other image or video, and it should show up on your Screenly device.

That’s a wrap!

That’s it! While the above simply used a basic Flask application, it could equally well have been a fully-fledged dashboard that supports the authentication flow adopted by the Flask application.