Setting up Auth0

Introduction

Auth0 is an authentication and authorization platform that can be integrated with BetterForms to handle sign ups and logins to apps. Here we’ll explain what is needed to be set up on Auth0 to have it ready to be integrated with your app.

Getting started

Creating a tenant

If you already have a tenant to be used, you can skip to the next section.

After signing in to your Auth0 account, on the top left corner click on the dropdown button and select Create tenant

Choose a domain, region and environment for this tenant.

Creating Application

On the left bar, mouse over it and click the Applications option, then click on + Create Application

Choose a name to identify your app, select Regular Web Applications and click on Create.

Once it’s created, it should redirect to your app’s Quick Start tab. Go to the Settings tab of your application and fill the following fields under Application URIs.

Additional customizations

Still under the Settings tab, you can add a logo that will be used on the default pages used by Auth0 (Login, Reset Password, etc.).

A link from an asset uploaded to BF could be used here.

The following image shows other options that could be customized according to your policies.

Add your Dev and Production Domains

Allowed Callback URLs

This URL will be used by Auth0 to redirect the user back to your BF app, and the value should be as follows:

https://yourapp.domain.com/oauth/auth0/callback

If multiple domains are being used, multiple domains can be added using comma as the separator.

https://yourapp1.domain.com/oauth/auth0/callback, https://yourapp2.domain.com/oauth/auth0/callback

Creating a Database

This is where your user records will be saved to.

From the left bar choose Authentication → Database. On the page, select + Create DB Connection.

Choose a name to identify your database and a few initial setups, as needed.

If users are required to follow a specific password policy, that can be set under the tab Password Policy of your database.

Under Applications you can verify which applications are connected to that database.

Choosing different login options

Social Connections

Different external providers like Google, Facebook and Github, can be added as login options for your app. These options can be found under Authentication → Social. And new options can be added by clicking on + Create Connection.

In order to setup these external providers, make sure you have the necessary credentials for this. It will be usually a Client ID and Client Secret, or API and Secret keys.

Username and password (Auth0)

As already mentioned above, you can link apps to users database under Authentication → Database. Another option is to navigate to your application (on Auth0), and under the Connections tab you will be able to individually toggle the options you want to have enabled for that specific application. By selecting a database connection, it will allow users registered on that database to login to your application using the username and password created under Auth0.

Creating new BF Users

In case the application will allow users to register using OAuth, an onBeforeRegistrationhook needs to be added to your business file, and it’s documented here.

Using Auth0 in an iFrame

You will need to change:

Settings / Branding / Set to Classic

Mitigations - Disable Clickjacking protection

Configuring FM BetterForms

Additional Notes

Logging out of Auth0

Sometimes you may need to force an Auth0 logout. An example is if a user uses the wrong social account to login to your app but that account is not registered.

 "logout": [{
        "action": "authLogout"
    }, {
        "action": "path",
        "function": "action.options.url = `https://visionarybar.us.auth0.com/v2/logout?client_id=xxxxxxxxxxxxxxx&returnTo=https://${window.location.host}`",
        "options": {
            "sameWindow": true,
            "url": "/"
        }
    }]

The client_id comes from the Auth0 dashboard page.