How to use Auth0 with Programmable Video Conferences to add SSO and user auth to an embeddable video conference

Kevin Garabedian | Stack Engineer

May 17, 2022

The Product Marketing team asked me to create a proof of concept to show off the versatility and extensibility of SignalWire’s new Programmable Video Conferences product.

They sent me a doc with potential API integrations to attempt, and immediately, the idea of using Auth0’s APIs to add user auth and login gates to the embedded video conferences jumped out.

Auth0 + Programmable Video Conferences

Auth0 is a developer tools company that specializes in authentication APIs. Instead of rebuilding the same basic single-sign on (SSO) or new user registration process that nearly every app developer ends up building, you use Auth0’s APIs to handle it and spend more time on the unique aspects of your app.

Let’s get started!

This is how the initial app will be structured.

Out-of-the-box, Auth0 acts as a wrapper around the app itself, gating the functional components you want to require authentication to access. For our purposes, we needed to a RoomCard component from Programmable Video Conferences that display a live preview of the video conference on the front-end prior to joining.

So we need to use the isAuthenticated property, and test it within the RoomCard component, and dynamically draw elements and links/buttons to allow for signing in.

Let’s go over how Public and Private routes work.

PublicRoute – this functional component would be included like example below in your layout. This is telling the application to look at that path, and when called display that component.

<PublicRoute exact path='/in-call' component={JoinRoom} />

Here is the inner workings of the PublicRoute component:

Similarly, the PrivateRoute is defined as:

PrivateRoute – this functional component would be included like example below in your layout.

This is telling the application to look at that path, and when called display that component. The PrivateRoute also includes logic to make sure you are logged in, and will direct you to a challenge if you are not logged in.

Example usage:

<PrivateRoute exact path='/profile' component={Profile} />

Below is the actual inner workings of the PrivateRoute component. You can see like Public it prepares a route for the component, but if *isAuthenticated* is false, it will direct to the Login component:

This is where it got a little interesting. Because React is basically a single page application, the navigation is done by manipulation of history object.

By adding a wrapper for security, we inadvertently introduced two history objects being managed independently! This was not delivering the desired effect on navigation: it was impacting logins and challenge callbacks, so we needed to address it.

To fix it, we made our own wrapper around the Auth0 component and injected the common history by using ‘useHistory’ from react-router-dom. You can also see below, we setup a callback ‘onRedirectCallback’, after completing Auth0 challenge the callback is called. Here, we push to history the URL where we initially wanted the flow to go. This allows users to go directly to content after logging in and keeps navigation smoother.

Integrating Auth0 with SignalWire's Programmable Video Conferences

Programable Video Conferences are exactly what the name suggests: pre-built WebRTC video conferences that you can program as much or as little as your heart desires.

So, you can build out your own interface by creating all the components yourself, or you can simply use the embeddable widget and a snippet of embed code and drop it in your application.

Here is an example of the embeddable snippet.

For those that know react, you may see the next challenge: This snippet will not play nicely with JSX. JSX or JavaScript XML. My first idea: try to embed the script in a div, but in JSX, that did not work. The second: encapsulate it but pasting it in a separate file and including it in an IFRAME. This worked but created new problems.

If someone has direct access, and knows the path, it would be trivial to bypass the authentication gate we’d added in the first place.

Third times the charm!

In the third approach, I injected the script into in IFRAME from JSX in a functional component. Bingo: we got the encapsulation of the IFRAME, with the security of AUTH0 in the React App. I also packaged it so you can reuse the snippet code, and simply inject in the token for room, and include the username. This will be especially useful if and when we want to gate multiple rooms with authentication.

You can find this code on Code Sandbox. If you have any questions, comments, concerns, or any feedback you'd like to share, come join us on Slack, and we'll get them sorted.

In the next post in this series, we’ll walk through adding a pay-gate to a Programmable Video Conference with Stripe.