TUTORIAL – Add authentication and gate content with Auth0

[Joyce]

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

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

• 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

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

2- Your Auth0 token

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

Auth0 setup – Step 1

Step 2 – Define User Redirections

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

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

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:

1- Name your WeWeb user group

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.

Go to the page settings > “Private access”

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

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

Auth0 setup – Step 4

That’s it! You’re all set

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

[RCS]

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?

[DrHariri]

Hello Joyce,
Thank you for the tutorial. I followed this setup but I am running into issues trying to get Auth0 to work with Weweb on the login form as when I try to login, I am sent back to the login page with a “code”, however, I am unable to test the full workflow within Weweb itself (especially signin) to be able to hook the workflow elements together and check if there is actual data being stored within the auth0 added variables.

I am finding myself have to rely on my own variables to do checks and this is not that straightforward.

Could you please provide some guidance around possibly testing the login flow within the Weweb editor?

Thanks!

[DrHariri]

@Joyce After a few tests, it seems that data, for some reason, is not being stored in the Auth0 added variables. I assume this was the intended scenario but not sure how to get my login page to store the data correctly in the relevant Auth0 fields.

Thanks!

[DrHariri]

Another update:
I was able to get the Auth0 plugin to work using the “Popup Login Action”. However, the Redirect to Login is what I am trying to get to work since popups are not reliable and I don’t want to rely on them.

[thisismetrying]

Did you make “Login with Redirect” work?

When I use login with redirect, it just opens popup like Login with popup…