Auth0 & Airtable Integration - Customer Portal Demo
✨ Click here to try out the live 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.
/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
You will need
Setting up Airtable
Open this link, then click
If you haven't already, login to Airtable
If prompted, choose which workspace you'd like to copy the base to, then click
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
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
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
Click the blue
Link button to link your Airtable account to Autocode.
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
Fill out the
Auth0 Client ID and
Airtable Base ID that you copied down earlier in this tutorial. Then click
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
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
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.