TUTORIAL – Add authentication and gate content with Auth0

To start setting-up Auth0 plugin in WeWeb, there are two pre-requisites:

  • :white_check_mark: you already have an account with Auth0, it’s free for up to 7,000 active users

  • :white_check_mark: you are logged into your Auth0 account

Once that’s done, you can follow these 4 steps to start using Auth0 functionalities in WeWeb:

  1. Connect your Auth0 account
  2. Define on what page logged in and logged out users land
  3. Define user groups to gate content
  4. Change page settings to gate content

Step 1 – Connect your Auth0 account

To connect your Auth0 account to WeWeb, you’ll need to copy/paste 2 pieces of information from Auth0 in WeWeb:

1- Your Auth0 domain

:point_right: In Auth0, go to “Applications” > “APIs” and copy the URL for your API audience and paste it in WeWeb.

2- Your Auth0 token

:point_right: Back on the “APIs” screen in Auth0, click on “Auth0 Management API” > “API explorer” and copy/paste your token in WeWeb.

Step 2 – Define User Redirections

:point_right: Select what pages you want users to see when:

  • they are logged out – for example a login page
  • they are signed in – for example a profile page

Step 3 – Define User Groups

:point_right: To define user groups in WeWeb, you first need to create user roles in Auth0 > “User Management” > “Roles” > “Create Role”

:point_right: Then, you can assign roles to users in “User Management” > “Users” > “Assign Roles”

Once you have user roles in Auth0, you can define user groups in WeWeb in two steps:

:point_right: 1- Name your WeWeb user group

:point_right: 2- Select Auth0 user role(s) that will be added to your WeWeb user group

Step 4 – Manage Access To Pages Based on Login Status and User Roles

By default, when you add a new empty page in your WeWeb app, everybody can access it, even users who have not signed in.

You can limit access to your WeWeb app at page level.

:point_right: Go to the page settings > “Private access”

:point_right: Select if you need users to be authenticated to access the page

:point_right: Select which authenticated user group(s) can access the page

That’s it! You’re all set :slight_smile:

If you have a question or comment, don’t hesitate to share it below :point_down:

1 Like

Hey Joyce,

Thanks for the tutorials. I like your example of making a table of data in airtable strictly for upvotes. I’m repurposing the idea as a “favorited collections” to personalize a feed for users.

I’m a little lost though if a user “downvotes” or “unfavorites a collection” in my app, how to then remove that record from the upvote table in airtable. I was thinking we need to search the record ID that matches the user + upvoted/favorited collection and delete it. Am I understanding that right?