Auth0 & Airtable Integration - Customer Portal Demo

About this App

This app is a demo of how to integrate Auth0 with Autocode, and how to pull data from an Autocode API in the frontend of a website.

Useful files

/functions/getAirtableData.js - our backend API which authenticates an Auth0 access token then pulls data about the user it corresponds to
/functions/getHashData.js - our backend API which pulls data (eg: name, email) about the user an Auth0 access token belongs to
/functions/getProjectMetadata.js - this endpoint exposes data such as our project's URL, Auth0 domain and Auth0 client ID to the frontend
/www/index.html - the homepage containing a login button
/www/login.html - automatically redirects the user to Auth0's login flow
/www/logout.html - automatically redirects the user to Auth0's logout flow, and clears their accessToken cookie
/www/callback.html - where the user is redirected to after logging in with Auth0 - it sets the accessToken cookie then redirects them to the portal
/www/portal.html - the example customer portal, which pulls data from our getAirtableData and getHashData APIs

Setup

You will need

A free Auth0 account
A free Airtable account

Setting up Airtable

Open this link, then click Copy base.
If you haven't already, login to Airtable
If prompted, choose which workspace you'd like to copy the base to, then click Add base.
Open up your newly copied base by clicking on its icon in Airtable's dashboard.
We'll need the base's ID in the next part of this guide, so copy it down for safe keeping. The base ID is the characters between the first two slashes in the base's URL that begin with app. In the example below, the base ID is app02LAJbvDNMAZBb.

Awesome, our Airtable instance is all setup! Let's setup Auth0 next.

Setting up Auth0

Head over to the Auth0 website. If you already have an account, login to it. If you don't, signup for one.
From the Auth0 dashboard, click the Applications button in the sidebar. Then click the smaller Applications option that appears, then the Create Application button.
Give your new application a name, set its type to Single Page Web Applications, then click Create.
Our application is ready to go! We'll need our Auth0 Client ID and Domain, so click the Settings tab and copy them somewhere safe.

Installing the App on Autocode

Now we've setup Auth0 and Airtable, we can now setup our Autocode project.

Scroll up to the top of this page and click the green Install free button.
Choose the organization you'd like to install the app into, give it a name, then click Next.
Click the blue Link button to link your Airtable account to Autocode.
Click the Link New Resource button in the window that pops up, then follow the instructions to link your account.
Once your account appears in the list of required accounts, you're good to go! Click the Continue button.
Fill out the Auth0 Domain, Auth0 Client ID and Airtable Base ID that you copied down earlier in this tutorial. Then click Install App.

Configuring Auth0

Awesome, we're nearly there! We've finished setting up Airtable and our Autocode project. The final step we need to do is to tell Auth0 where our project is hosted, so it can correctly handle logins, logouts and callbacks.

Inside the settings page of application on Auth0's dashboard, scroll down until you reach the section labelled Application URIs. We'll fill these in with our Autocode project's values. For each URL that you paste into these boxes, make sure it ends with a trailing /.
To find your Application Login URI, open the www/login.html file in the Autocode editor and copy the URL at the bottom of the page.
To find your Allowed Callback URLs, open the www/callback.html file in the Autocode editor and copy the URL at the bottom of the page.
To find your Allowed Logout URLs, open the www/logout.html file in the Autocode editor and copy the URL at the bottom of the page.
Your settings page should now look like this. Validate that all URLs end in a / (and if they don't, add one), then scroll down and click Save Changes.

Congratulations! You just finished setting up your website which integrates with Auth0 and Airtable. To test it, open the login URL you copied into Auth0 earlier and create an account. To cause orders to appear in the "Here's some custom data" section of the portal, add them to Airtable. The Auth0 Sub column in Airtable should match the Auth0 sub value shown in the portal for the logged in user - for example auth0|6310de3e290855877226e3c9.

Frequently Asked Questions

How does this app authenticate with Auth0?
- Upon clicking the login button inside index.html, you'll be redirected to login.html, which automatically redirects to Auth0's login page. Upon logging in, Auth0 will redirect you to callback.html which sets a cookie in your browser containing your authentication token. This token is then used within portal.html to pull data about the logged in user.
Can I modify this for a different use-case - such as pulling data from a source other than Airtable?
- Yes - you can pull data from any API. You'd want to modify the code inside getAirtableData.js to do this.