How-to Authenticate Users with Auth0 for Secure Dolby.io Video Calls

Dolby.io Video Calls enable developers to integrate high-quality video and audio communication into their web and mobile applications. However, to ensure that only authorized users have access to these features, user authentication is a crucial step. Auth0 is a popular authentication platform that simplifies the process of implementing secure user authentication in web and mobile applications. This can help prevent unauthorized users from joining your meetings and protect sensitive information that may be discussed during the call.

In this blog post, we will explore how to get started with creating a basic Dolby.io video call with user authentication using Auth0 to securely log in. This starter project provides the foundation to invite only the intended users to your call. You can add additional features as you build out your own solutions for events, collaboration, education, live streaming, and much more.

To see what you’ll build by following the steps in this blog, scroll down to the Demo part at the end. You can access the source code of the completed project on GitHub.

1 – Getting Started with Dolby.io Video Calls

By following the instructions in the Web SDK Getting Started Guide, you can quickly set up and run a basic video call. The guide simplifies the project by utilizing static HTML and importing the SDK from a CDN. This approach enables you to focus on grasping the underlying concepts before advancing to more complex frameworks and build tools in your own projects. 

Start by cloning the source-code, open it in your editor and navigate to video-calls/final directory.

git clone https://github.com/dolbyio-samples/comms-sdk-web-getting-started.git
cd comms-sdk-web-getting-started/video-calls/final 

We will make some changes in the index.html file and add an Express server to serve our HTML page, along with any assets that it requires (JavaScript, util files, etc). to integrate Auth0. 

2 – Specifying  Dolby.io and Auth0 Credentials

Before changing the project we will need application keys to use Dolby.io Communications and Auth0 Web SDKs. Under your video-calls/final  directory create auth_config.json  file as shown below. 

{
    "DOMAIN": "Copy the domain name from Auth0 Dashboard",
    "CLIENT_ID": "Copy the clientId name from Auth0 Dashboard",
    "APP_KEY" : "Copy the App key in Dolby.io Communications & Media APIs",
    "APP_SECRET" : "Copy the App secret in Dolby.io Communications & Media APIs"
}

a) For Dolby.io

• Sign up for a free Dolby.io account.
• After you login, go to Communications & Media tab and create an app. Copy the App key and App secret and fill the  auth_config.json  with related information.

b) For Auth0

• Go to Auth0 and click Sign Up.
• Use Google, GitHub or Microsoft Account to login or create a new account with your email.
• When you signed up for Auth0, create a new Single Page Web application either using Getting Started or Applications tabs.

•  You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard. Copy the Domain  & Client ID information to fill the related information in auth_config.json. 

•  Configure Callback URLs: A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
  —  In this guide we’ll use localhost to serve out application from port 3000, you should set the Allowed Callback URL to http://localhost:3000 if you prefer not to specify a conference alias (the name given to a created meeting/conference) to identify the meeting, it will be automatically set to web-sdk-starter. If there’s a conference alias you would like to give as a query parameter in the URL, add http://localhost:3000/?alias=* to the Callback URLs.
     
• Configure Logout URLs: A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
    – In this guide we’ll use localhost to serve out application from port 3000, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000.

• Configure Allowed Web Origins: You need to add the URL for your app to the Allowed Web Origins field in your Application Settings. If you don’t register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.
  — In this guide we’ll use localhost to serve out application from port 3000, you should set the Allowed Web Origins to http://localhost:3000.

3 – Creating the Server

a) Installing the Dependencies

We will create a basic web server using ExpressJS. This will be used to serve our HTML page, along with any assets that it requires (JavaScript, helper files, etc).To initialize a new NPM project and get us ready to install dependencies, run this in your terminal under /video-calls/final:

npm init -y

Then, install nodemon so that our server can be restarted on any code changes:

npm install -D nodemon

Open the package.json file and modify it to look like the following:

{
    "name": "getting-started-guide",
    "version": "1.0.0",
    "description": "Sample application for Dolby.io Getting Started Video Calls using the Auth0 SPA SDK for User Authentication",
    "main": "server.js",
    "scripts": {
        "start": "node bin/www",
        "dev": "nodemon bin/www"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "devDependencies": {
        "nodemon": "^2.0.19"
    },
    "dependencies": {
        "express": "^4.18.2",
        "helmet": "^3.23.3",
        "morgan": "^1.10.0"
    }
}

For the other dependencies:

• Helmet is particularly useful because Express applications do not come with security HTTP headers out of the box. It helps to protect Node. js Express apps from common security threats such as Cross-Site Scripting (XSS) and click-jacking attacks.
• Morgan is an HTTP request logger middleware for Node.js. So it provides valuable information such as the requested URL, HTTP method, response status, response time, and more.

Finally install the other dependencies that are necessary to get the server up and running: 

npm install 

We’ll use the either of the commands below to run our app after we complete it:

• npm start will run the application as normal using node
• npm run dev will run the application using nodemon, watching for changes as we modify files

b) Creating server.js

Next, create a new file in the root of the project alongside index.html, auth_config.json, and package.json, called server.js. This will be our backend server and will be used to serve the SPA pages.

Populate server.js with the following code:

const express = require("express");
const { join } = require("path");
const morgan = require("morgan");
const helmet = require("helmet");
const app = express();
 
app.use(morgan("dev"));
app.use(helmet());
app.use(express.static(join(__dirname, "/")));
 
app.get("/auth_config.json", (req, res) => {
    res.sendFile(join(__dirname, "auth_config.json"));
});
 
app.get("/*", (_, res) => {
    res.sendFile(join(__dirname, "index.html"));
});
 
process.on("SIGINT", function() {
    process.exit();
});
 
module.exports = app;

And, create a new folder named bin  under  video-calls/final/  directory. Under bin  create a new javascript file called www and populate it with the following code to set up a Node.js server to listen for incoming requests on a specific port or 3000 if not specified:

const app = require('../server');
const port = process.env.PORT || 3000;
 
app.listen(port, () => console.log(`Server running on port ${port}`));

4 – Initializing the Auth0 and Dolby.io SDKs

a) Initialize the Auth0 SDK and Add the Authentication Logic

The SDK must be properly initialized with the information of the Auth0 application created above. To start, create the video-calls/final/app.js file and add a variable to hold the Auth0 client object:

let auth0Client = null;

This must be initialized using the values from the auth_config.json file. This can be done by calling the endpoint on the server that was created in the previous section. To do this, create a new function called fetchAuthConfig further down the app.js file, which can be used to download this information:

const fetchAuthConfig = () => fetch("/auth_config.json");

Next, create another new function called configureClient. This will use fetchAuthConfig to download the configuration file and initialize the auth0Client variable:

const configureClient = async () => {
    const response = await fetchAuthConfig();
    const config = await response.json();
 
    auth0 = await createAuth0Client({
        domain: config.DOMAIN,
        client_id: config.CLIENT_ID
    });
};

Add the code below  which is checking for the presence of query parameters “code” and “state” in the current URL. If they are present, the code uses the auth0 library to handle a redirect callback for an authentication process. After successfully handling the callback, the code removes the querystring parameters from the URL using window.history.replaceState():

const processLoginState = async () => {
    // Check code and state parameters
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {
        // Process the login state
        await auth0.handleRedirectCallback();
        // Use replaceState to redirect the user away and remove the querystring parameters
        window.history.replaceState({}, document.title, window.location.pathname);
    }
};

We want to ensure that only authenticated users can access certain pages while anyone can access the public page. This can be done by checking whether the user is logged in using the auth0Client.isAuthenticated() method and enabling/disabling certain buttons accordingly. The code below adds an updateUI() function to handle these changes and uses the logged in user’s name to open session with:

const updateUI = async (initializeToken,openSession) => {
    const isAuthenticated = await auth0.isAuthenticated();
    document.getElementById("btn-logout").disabled = !isAuthenticated;
    document.getElementById("btn-login").disabled = isAuthenticated;
    /**
     *  Logic to show/hide gated content after authentication
        Only initialize and start the conference if the user is authenticated
     */
 
    if (isAuthenticated) {
        document.getElementById("gated-content").classList.remove("hidden");
         // Establish Real-time Communications by first initializing the Dolby.io Web SDK with credentials
        await initializeToken();
        // Get logged user's nickname from Auth0 to start a conference with participant name
        const userInfo =  JSON.stringify(await auth0.getUser());
        const name = JSON.parse(userInfo).nickname;
        // Start a new session with logged user's name and connect to the Dolby.io platform establishing a client-server link
        await openSession(name);
         
    } else {
        document.getElementById("gated-content").classList.add("hidden");
    }
};

Lastly we need to add login and logout buttons and redirect them to the same page after each login and logout. Add the code below to your app.js :

const login = async () => {
    await auth0.loginWithRedirect({
        redirect_uri: window.location.href
    });
};
 
const logout = () => {
    auth0.logout({
        returnTo: window.location.href
    });
};

b) Initialize the Dolby.io SDK

Next step is getting the access token to initialize the Dolby.io Communications Web SDK. When you open the sample application in the Web SDK Getting Started Guide, it will prompt you for a Dolby.io Client Access Token. You can find a token by clicking API keys listed next to your application on the Dolby.io Dashboard. Instead of manually adding the token each time, we will modify the sample app to generate an access token automatically after the user successfully logs in. To do this, create a new folder called util  under video-calls/final/. Navigate to video-calls/final/util folder and create a new file video-calls/final/dolbyio-auth-helper.js.Add the code below to your dolbyio-auth-helper.js :

const dolbyio = {};
/**
 * Return an access token for initializing the Dolby.io Communications
 * Web SDK. The function uses the fetchAuthConfig() function to fetch
 * APP_KEY and APP_SECRET from the auth_config.json,
 * and uses them to construct an authorization header.
 *
 * @param {*}
 * @returns token (string)
 *
 * This function will provide a token that required for authenticating
 * with the Dolby.io API and enabling the SDK's features.
 */
dolbyio.getAccessToken = async () => {
  const configResponse = await fetchAuthConfig();
  const config = await configResponse.json();
  const APP_KEY = config.APP_KEY;
  const APP_SECRET = config.APP_SECRET;
  const authHeader =
    "Basic " + btoa(encodeURI(APP_KEY) + ":" + encodeURI(APP_SECRET));
 
  const tokenURL = "https://session.voxeet.com/v1/oauth2/token";
  const tokenParams = {
    method: "POST",
    headers: {
      Authorization: authHeader,
      "Content-Type": "application/json", // add this line to specify the request's content type
    },
    body: JSON.stringify({
      // stringify the object to convert it to a JSON string
      grant_type: "client_credentials",
    }),
  };
 
  const response = await fetch(tokenURL, tokenParams);
  const jsonResponse = await response.json(); // resolve the response promise to access the JSON data
 
  // Return the access_token to the application
  return jsonResponse.access_token;
};

5 – Modifying index.html to put all the pieces together

Finally, we need to modify in the index.html file according to the changes or additions we made with the other files thus far. To see what changed from the index.html in getting started guide, checkout the diff.

First, change the code in the index.html  with the new content below starting from line 16. This part is hiding the video call elements if the user’s not logged in yet.

  <script type="text/javascript" src="../util/dolbyio-auth-helper.js"></script>
        <!-- Auth0 Single Page Application SDK -->
        <script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script>
        <script src="./app.js"></script>
    </head>
<body>

    <div class="container bg-dark text-white gx-4 px-4 py-4 mt-3 rounded">
        <img src="https://go.dolby.io/hubfs/raw_assets/public/Dolby_April2021/images/dolby-io-logo.svg" />
        <h1>Getting Started with Auth0 User Authentication </h1>
    </div>
    <div>
        <style>
            .hidden {
                display: none;
            }
    
            label {
                margin-bottom: 10px;
                display: block;
            }
        </style>
        <br>
        <button id="btn-login" class="btn btn-dark" disabled="true">Log in</button>
        <button id="btn-logout" class="btn btn-dark" disabled="true">Log out</button>
    </div>
    <!-- Video Call Elements Hidden Until the Users Logs in -->
    <div class="hidden" id="gated-content">
        <p>
            You're seeing this content because you're currently
            <strong>logged in</strong>.
        </p>

        <div class="container px-4 mt-4">
            <div class="row justify-content-around mt-3">
                <div class="col-4 shadow p-3 mb-5 bg-body rounded">
                    <h2>Self-View</h2>
                    <style>
                        #self-view video {                    /* Flip the display of the local user in self view */
                        -webkit-transform: rotateY(180deg);   /* Safari, Chrome */
                        -moz-transform: rotateY(180deg);      /* Firefox */
                        transform: rotateY(180deg);           /* Microsoft, etc. */
                        }
                    </style>
                    <div id="self-view"> <!-- Container for the local participant media stream -->
                        <p id="self-view-username"></p>
                        <i class="display-1 bi bi-person-video position-relative"></i>
                    </div>

                    <button type="button" class="btn btn-dark" id="btn-join">Join</button>
                    <button type="button" class="btn btn-dark" id="btn-leave">Leave</button>
                </div>

                <div class="col-4 shadow p-3 mb-5 bg-body rounded">
                    <h2>Remote-View</h2>
                    <div id="remote-view"> <!-- Container for the remote participant media stream -->
                        <p id="remote-view-username"></p>
                        <i class="display-1 bi bi-person-video position-relative"></i>
                    </div>

                    <button type="button" class="btn btn-dark" id="btn-invite"><i class="bi bi-clipboard2-plus-fill"></i> Invite</button>
                </div>
            </div>
        </div>

        <div class="container px-4 py-4 mt-3">
            <p id="message"></p>
            <p><a href="https://docs.dolby.io/communications-apis/docs/getting-started-with-the-javascript-sdk">Explore More Tutorials</a></p>
        </div>
    </div>
 

After adding the login/logout buttons and hidden elements without authentication, we need wait for the generated token in util/ dolbyio-auth-helper.js to initialize the Dolby.io SDK. Go to line 95 and change the initializeToken function as shown below:

  /** 
         * Start by initializing the Web SDK with an access token.  This starter project
         * utilizes a helper function to provide the token with an API call.
         */
        const initializeToken = async () => {
            console.group("Step 1: Initialize the SDK");
            const token = await dolbyio.getAccessToken();
            VoxeetSDK.initializeToken(token, () => { console.log("Get a New Access Token"); });
            shareMessage("Step 1: Web SDK initialized.");
            console.groupEnd();
            return token;
        } 

Finally, we need to change the main function, replace the entire main function with the code below:

  const main = async () => {
             // When the web page has finished loading, configure Auth0 client, check the user's login state, and update the UI accordingly.
            window.onload = async () => {
                await configureClient();
                await processLoginState();
                // Function below will use initializeToken and openSession functions as callbacks in it after authentication.
                await updateUI(initializeToken, openSession);

            };
            // When user clicks the Log in button, redirect user to Auth0 to access the conference only after authentication
            document.getElementById("btn-login").onclick = async () => {
                await login();
            };
            // When user clicks the Log out button, log out and clean Auth0 browser cookies
            document.getElementById("btn-logout").onclick = async () => {
            await logout();
            };
            // Configure the conference alias from query parameter values
            const queryParams = new URLSearchParams(window.location.search);
            const alias = queryParams.get("alias") || "web-sdk-starter";

            // When user clicks the Join button, start and join a conference for the given alias
            document.getElementById("btn-join").onclick = async () => {
                await createAndJoinConference(alias);
            };

            // Define custom behavior for activity that occurs during a video call
            handleConferenceFlow();

            // When user clicks the Invite button, generate a url to join the same conference
            document.getElementById("btn-invite").onclick = () => {
                console.group("Step 5: Invite a remote participant")
                let url = `http://localhost:3000/?alias=${alias}`;
                console.log(`Invite a guest with URL: ${url}`);
                shareMessage(`Share the URL copied to your browser clipboard: ${url}`);
                navigator.clipboard.writeText(url);
                console.groupEnd();
            }

            // When user clicks the Leave button, end the conference
            document.getElementById("btn-leave").onclick = async () => {
                await leaveConference();
                console.log("Getting Started Guide complete, congratulations!");
            };
        };


That’s it! Now we are ready to test the app.

6 – Testing the app we built

To test your app, you need to have index.html , auth_config.json , app.js , server.js , package.json , bin/www , util/ dolbyio-auth-helper.js  under your video-calls/final  directory. This is how your app file tree should look like:

video-calls
    ├── final
    │   ├── app.js
    │   ├── auth_config.json
    │   ├── node_modules
    │   ├── bin
    │   |   └── www
    │   ├── index.html
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── server.js
    │   └── util
    │       └── dolbyio-auth-helper.js
        └── index.html

Since you installed dependencies earlier you should also have  package-lock.json file and node_modules folder. If not, run:

npm install

You will be running the app from your localhost at port 3000. You can use one of the run methods below:

This will run the application using nodemon, watching for changes as we modify files.

npm run dev

This will run the application as normal using node.

npm start

Demo 

To test the application go to Auth0 Dashboard, User Management and create new users. You can also invite users to sign up to your application, check out Send Email Invitations for Application Signup. We will use the login information of the created Auth0 application’s users, when we’re running the app. 

You should see your application running successfully and only letting authenticated users to access the video call with their Auth0 user names, after following the previous steps. 

7- Conclusion  

User authentication is a critical aspect of building secure web applications, and it’s important to allow only intended users to join a Dolby.io video call. In this blog post, we learned how to integrate Auth0 Single Page Login to let only authenticated users to our simple Dolby.io video call. For a full explanation of the source code, check out the Getting Started Guide for explanations of how video calls work. To learn how to set different permissions for different participants take a look at Enhanced Conference Access Control document.  See the completed project on GitHub.