User Authentication Using Firebase

User Authentication using Firebase

Out of the box, showcase offers a couple of features that allow users to store things. This includes a watchlist, watch progress and preferences. This data resides in the browser of the user and is at risk of being deleted. On top of that, you can't sync your data between multiple devices.

Enter firebase. Firebase allows us to persist this data through the use of user accounts and sync it across devices. Enabling firebase-powered features such as content signing, authentication, data synchronization & hosting in showcase is easy. This small guide will walk you through the steps to take.

Note: Read all the steps before doing anything. Firebase deploy will deploy everything that is configured out of the box, and you might want to disable some things first.

Note: The user auth feature is an experimental feature and is only available if you use the experimental branch git checkout experimental/login.

Getting started

1. Go to the firebase console and if you haven't already, create an account and a new project.
2. Next up, install firebase-tools and authenticate your environment. Instructions can be found in the firebase documentation.
3. Go back to the firebase console. After creating your project you'll be presented withthree options in the main view. Select the one that reads Add Firebase to your web app. Doing so will open up a modal containing a config. You'll want to apply these options in your config.json under options.firebase:

{
    "options": {
        "firebase": {
            "apiKey": "xxx",
            "authDomain": "xxx",
            "databaseURL": "xxx",
            "projectId": "xxx",
            "storageBucket": "xxx",
            "messagingSenderId": "xxx"
        }
    }
}

Now enable the options you want to use:

{
    "options": {
        "useSigning": true,
        "useAuthentication": true,
        "authenticationRequired": false,
        "firebase": {
            "apiKey": "xxx",
            "authDomain": "xxx",
            "databaseURL": "xxx",
            "projectId": "xxx",
            "storageBucket": "xxx",
            "messagingSenderId": "xxx"
        }
    }
}

Initializing project

Firebase comes with excellent cli tools to help us get started much faster.

In the root of your showcase project, run firebase init. This will ask you some questions about the services you wish to enable. It will ask you which project to use. If you have more than one project, just select the one you just created. Following are instructions on how to go through the steps for each feature.

To enable a feature, navigate to the option with your arrow keys, and press space to check / uncheck, and hit return to confirm.

Note: You can find additional information on features and options further down the document.

Hosting

If you decide to check the hosting box as a feature to enable:

• Set dist as the public directory
• Answer Y for Configure as a single-page app
• When prompted with the question if you'd like to overwrite a file, always answer N for no (default).

Database (users & sync)

If you decide to use the database feature:

• Use all default values. database.rules.json as the file, and no override of the rules.
• Really don't override the rules, they are there to protect your users.

Info time: The rules dictate that a user can only access his or her own data, and not that of other users.

Functions (domain restrictions & signing)

If you wish to use functions to enable domain restrictions and / or signing, you'll have to set up a service account. While running through the options:

• Make sure to not overwrite any files (should be the default)
• Install the npm dependencies (Y when prompted)

Service account

Follow the instructions as documented here. Copy the generated file to functions/service-account.json in your showcase project.

Note: Only follow the steps for creating a service accound and exporting the key.

Options & features

Each feature comes with aditional options and features. The following segments will describe these.

Hosting

Hosting with firebase is very powerful, as your deploy strategy is taken care of for you.

Custom domain

To enable your custom domain, go to the firebase console, select Hosting from the main menu on the left, and then click on Link domain. Follow provided steps to set up your own domain.

Signing

To enable signing, you'll first have to log in on the jwplayer dashboard. Once there, visit your properties (this link will take you there).

Select the property for which you'd like to enable signing, and scroll down to URL Signing. Toggle the Secure Video URLs so it says On and click SAVE (top right).

Enabling in showcase

On the property page copy the value in the API Secret box. Now back to the project, open up functions/config.js and paste the API Secret for the jw_secret key:

{
    "jw_secret": "KEY_GOES_HERE"
}

Now onwards to config.json, and add the useSigning key in options as well as the functions key which points to the endpoint of your firebase setup. You can find this url in the console output after running firebase deploy.

{
    "options": {
    "useSigning": true,
        "firebase": {
            "functions": "https://xxx.cloudfunctions.net"
        }
    }
}

Note: If you're applying these settings after deploying, don't forget to run firebase deploy again.

Requiring authentication

Use this option to force a valid authentication token. This is useful if you only want to allow authenticated users access to your content.

{
    "signing_requires_auth": false
}

Authentication

Authentication in showcase comes with some options.

Domain restrictions

With this option enabled you can restrict signups to one or more domain names. Open up functions/config.js and add the following option to restrict domains:

{
    "restricted_domains": ["yourdomain.com", "someotherdomain.com"]
}

Remove this option entirely, set it to false to disable restrictions. You can also use a string if you want to restrict access to a single domain:

{
    "restricted_domains": "yourdomain.com"
}

Deploying

When done, you can (depending on what features you decided to use) deploy your showcase, use authentication and sign resources. To deploy this, run one of these commands:

• grunt build && firebase deploy
• npm run deploy