# TUTORIAL – How to Setup Xano Authentication and Gate Content in WeWeb 🔐 **URL:** \ **Category:** Tutorials\ **Tags:** gate-content, authentication, xano\ **Created:** [March 1, 2022, 4:49pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276 "2022-03-01T16:49:17Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [March 1, 2022, 4:49pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/1 "2022-03-01T16:49:17Z")
In order to setup Xano authentication in your WeWeb project, there are three pre-requisites: ✅ 1- you already have an account with Xano, it’s free for up to 10,000 records ✅ 2- you have a user table in your Xano database with at least two fields: login and password ✅ 3- you have the three authentication API endpoints in Xano Let’s walk you through step 2 and 3 before we dive into the actual WeWeb setup 🙂 ## Setup a User Table in Your Xano Database Your user table should include at least two fields: - one field where you store the **login** , for example, a string field with a name or an email field with an email address, and - one field of field type “ **password** ” where you store the encrypted password. ![table with password field in xano](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/77cba7670dee1fd6da408afd930d67b74945106f.jpeg) > ⚠ It’s important that you choose the field type “password” when creating your user table in Xano. ⚠ This will ensure that: - you can use Xano’s authentication API points, and that - the user input is encrypted when the user first creates an account with your web-app. ![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/b28d9312d484899870d783a29621c59408e348e2.gif) ⚡ Pro tip: if you’re starting from scratch in Xano, you can use the “Starter” template in their Marketplace. ![starter template in xano](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/3a70d4ec4734973c0240450f5d81d0316385e799.jpeg) ## Create Authentication API Endpoints in Xano For Xano authentication to work, you need three API endpoints: 1. signup 2. login 3. me ![three auth endpoints in xano-api view](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/bd1e99c86874c04ac77dc2ab1335e92597f44f86.jpeg) If you’re using a Xano template that includes authentication, you’ll find these endpoints in the API sub-menu. Otherwise, you’ll need to create these three endpoints yourself by going to “API” \> “Add API Endpoint” \> “Authentication” ![create-auth-endpoints-xano](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/55e0416fdab2958a0aa0f2dcf4fc8f3d6ef4c2c9.gif) ## Copy Xano Authentication Endpoints Into WeWeb In WeWeb, you’ll need to copy/paste the URL of each Xano API endpoint: ![three auth endpoints in weweb](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/19b211517d4f0c2a0038d7cd5c998c38547dc35e.png) > ⚠ Warning: the order in which endpoints are displayed in Xano may vary. Make sure to copy the correct URL in each WeWeb ⚠ ## Create Roles and Permissions ### Adding Roles to Xano API Endpoint In order to gate content in WeWeb based on user roles and permissions, you first need to create a `role` column in your Xano user base. If you have a column with user roles in your Xano user base, you will be able to add it to the output of your `me` endpoint: ![add role ro me output in xano auth](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/401d03fed7da12c6ea2b31c9605e9cb79028ad57.gif) Once you’ve added roles to the output of the `me` endpoint of your Xano auth, you can add them to WeWeb. ### Telling WeWeb Where to Find the User Role Info in Xano Here, it’s in the `role` column so that’s what we type in: ![role in user info](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/9e727ae39671e9c272f2d1beb2f099048ba476f4.png) Then, you can add user groups where user roles match the data in Xano. ### Adding User Groups in WeWeb ![define-user-groups](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/3eada74256d1189d0fa52e38b583688963094551.gif) Note that user role categories in Xano match the user roles in WeWeb: #### User roles in Xano ![user roles in xano](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/ea79895e32e0d6aff5930256b1dcd6cd9c33f7b8.jpeg) #### User roles in WeWeb ![define user groups in weweb](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/0ddbb2b6add86fd973161e5d4d3c446ee506deab.png) ## Gate Content Based on User Roles Once you’ve setup user roles in WeWeb, you can `Manage access to pages` and define rules for `Private access`: ![gate-content-with-xano-roles](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/dbcfb4476752877603ebd795a2f127cfc4fcb0b0.gif) ---
**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\ **Post date:** [November 14, 2022, 3:13pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/2 "2022-11-14T15:13:37Z")
Login part works great. I am getting an error on sign ups after following all the steps. Any guidance? ![Screen Shot 2022-11-14 at 9.12.49 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fb32c1247ca59b8f03426636dffc64d5313901bb.png) ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 15, 2022, 11:21am UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/3 "2022-11-15T11:21:43Z")
Hi @carri 👋 Can you check the message under `response`? ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/d8fc4c9ba5e307b8a953d9859419bd417c2add62.jpeg) My guess is that the password you chose doesn’t match the requirements that are setup in Xano but I could be wrong. Another way to check would be to use Xano’s run & debug function with the same email, password. ---
**Author:** ![lelemarea](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/lelemarea/32/574_2.png) [@lelemarea](https://community.weweb.io/u/lelemarea)\ **Post date:** [November 15, 2022, 1:38pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/4 "2022-11-15T13:38:04Z")
Roles and permissions…, this tutorial is not for starter pack isn’t it? ---
**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\ **Post date:** [November 15, 2022, 3:57pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/5 "2022-11-15T15:57:01Z")
I wasn’t sending the role info to Xano. It now works. ---
**Author:** ![dimbell](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dimbell](https://community.weweb.io/u/dimbell)\ **Post date:** [November 21, 2022, 12:03pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/6 "2022-11-21T12:03:37Z")
Hi @Joyce, my sign up xano form includes more than the 3 standard form fields (company field). However by default the workflow sign up xano includes only email, pass and name. Is there a way to add more fields? ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6c1617027605ed479896e7890d2828ce9320e48c.png) ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [November 22, 2022, 10:44am UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/7 "2022-11-22T10:44:25Z")
Hi @dimbell 👋 You won’t be able to do it with the Xano Auth actions because the email, password, name inputs are hardcoded but you can do it with the REST API plugin: ![CleanShot 2022-11-22 at 11.42.44@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4586aaf5c8bf0c527063d59e18df2f6b36587ee1.jpeg) In our action, we set up our signup API call (1) then we get the user’s authentication token (2) ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [February 14, 2023, 3:09am UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/8 "2023-02-14T03:09:13Z")
Hi @Joyce Could you please point me in the right direction? I’m storing roles and permissions in a separate table in Xano and using the +Addon feature to return the user roles in the output when I call the auth/me endpoint. What format do I need to reference the ‘Role key’ in step 4. of the Xano Auth configuration? I tried using dot notation but didn’t have any luck. Thanks ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2f00df42ae14cdf6d9facd8c61504a74cc1adbec.jpeg) ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [February 22, 2023, 1:42am UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/9 "2023-02-22T01:42:00Z")
Hi folks, Just looking for confirmation that the user role **MUST** be stored within the /User table, and not just passed in the auth/me response using Xano’s +Addon feature? I’m having difficulty understanding how the Private access settings will be applied as I’m just working in the editor mode at the moment. It would be ideal if the ‘User role configuration’ [Role key] could just be bound to the auth/me response in the same way the other collections are configured. Then I instinctively know that the role it will grab will be correct. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8e3cc8d1fd6ab1789e8eb6ed603b4624f49147e6.png) Before going and reconfiguring some of my database tables I hope to be able to clarify the above question. For context; - I am currently storing ‘role’ on a relational table called company\_has\_user. - A user can belong to multiple companies with different roles for each company. - When a logged in user toggles between their different company accounts, their permissions for that company should take immediate effect. - When a user logs in, they are granted the role set by the company account they were last logged in with. - If a company administrator changes the user’s role, the update occurs within the relational table and not the User table. Therefore, not overriding their permissions within a users existing or other accounts. Appreciate the confirmation, and if so, I’ll proceed with some workarounds. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [February 22, 2023, 10:04pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/10 "2023-02-22T22:04:00Z")
> [@MichaelLovell](#): > > What format do I need to reference the ‘Role key’ in step 4. of the Xano Auth configuration? I tried using dot notation but didn’t have any luck. Hey @MichaelLovell, apologies for the late reply. I was able to do it by creating an Add-on in Xano that’s a list of items (so not a single item): ![CleanShot 2023-02-22 at 22.52.46@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6b3660f21c1c0e49b529917bd7ab2f90e1f06c68.png) And telling WeWeb the role type was in a List of objects (so not a text): ![CleanShot 2023-02-22 at 22.53.23@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/58f23e938be2cb3175c7ef38b1c3e5f265122287.png) Here’s a [long-ish video](https://tella.video/user-roles-and-groups-in-xano-auth-d2j9) I recorded for you on the topic. Let me know if it helps. I’ll try to record a more structured tutorial later 🙂 ---
**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\ **Post date:** [February 22, 2023, 10:25pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/11 "2023-02-22T22:25:13Z")
@Joyce you are powering through the forum today. 🦸‍♀️ 🙌 Greatly appreciated! I will give that method a try. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [February 22, 2023, 10:30pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/12 "2023-02-22T22:30:04Z")
Haha yes! 😄 And by the way, I checked after recording the video: you do need to make sure the add-on output is named `role` and not `_role` in Xano and the `Role key` in WeWeb in step 4 of the plugin config is also `role` ---
**Author:** ![gauthier.thubert.pro](https://avatars.discourse-cdn.com/v4/letter/g/ea666f/32.png) [@gauthier.thubert.pro](https://community.weweb.io/u/gauthier.thubert.pro)\ **Post date:** [March 2, 2023, 12:36pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/13 "2023-03-02T12:36:57Z")
Hello @Joyce I am trying to set up a Gate content for a project I’m working on. I am using Xano auth and followed the above tutorial to set the user roles. I am trying to test the the Gate content in preview mode and it does not work. Is it because it’s preview and not a live app? Thx for the help ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [March 2, 2023, 3:54pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/14 "2023-03-02T15:54:49Z")
> [@gauthier.thubert.pro](#): > > Is it because it’s preview and not a live app? Yes, you’ll need to test on a published app (in staging or in production) because in the editor, we allow you to access all the pages of the project. ---
**Author:** ![gauthier.thubert.pro](https://avatars.discourse-cdn.com/v4/letter/g/ea666f/32.png) [@gauthier.thubert.pro](https://community.weweb.io/u/gauthier.thubert.pro)\ **Post date:** [March 2, 2023, 6:15pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/15 "2023-03-02T18:15:11Z")
Alright thank you for the answer! ---
**Author:** ![Uddeshya](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/uddeshya/32/2296_2.png) [@Uddeshya](https://community.weweb.io/u/Uddeshya)\ **Post date:** [March 2, 2023, 7:07pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/16 "2023-03-02T19:07:12Z")
Very Informative and briefly explained step-wise. ---
**Author:** ![Dervish99](https://avatars.discourse-cdn.com/v4/letter/d/c67d28/32.png) [@Dervish99](https://community.weweb.io/u/Dervish99)\ **Post date:** [August 30, 2023, 6:43am UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/17 "2023-08-30T06:43:59Z")
I have followed the tutorial above, I’m on the basic login page trying to setup basic login using the xano plugin, I’ve also tested the username and password in xano. And it gives the auth token. When I bind username and same password and test in weweb using xano plugin using the ‘xano login’ and workflow actions it gives 403 error. I’m using details for [jane@email.com](mailto:jane@email.com). As I’m trying to follow the level 2 tutorial. When I make the REST API request it works. It gives 403 ERROR. says invalid credentials, payload. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0b68454f3c84d944964a547df4c9db025513a1fb.jpeg) ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [September 4, 2023, 3:08pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/18 "2023-09-04T15:08:57Z")
Hi @Dervish99 👋 Let me see if I got this right: - when you test the login endpoint in Xano using [jane@email.com](mailto:jane@email.com) and a password, you get an auth token - when you test the login endpoint in WeWeb using the REST API plugin, you also get an auth token - but when you test the login action of the Xano Auth plugin in WeWeb, you get a 403 error Is that correct? First thought is maybe the Xano Auth plugin is not referencing the correct Xano instance or the correct endpoint. For example, here I am referencing my free instance and the login endpoint in the `basic-auth` path: ![CleanShot 2023-09-04 at 17.05.30@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/ccb76d34806ce2f831da7a5ac8f5f4cb2e742ec0.png) But in Xano I could be testing an endpoint in the `auth` path: ![CleanShot 2023-09-04 at 17.06.47@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/59f3b76d5737a073dd3cdb7c1326029f5d23e67b.png) That could be one explanation. Otherwise, in the screenshot you shared, towards the bottom, you see Xano’s `response` with `status: 403`. Could you unfold the `data` object and share a screenshot of the message that comes with the response? That will give us a little more information to investigate 🙂 ---
**Author:** ![heyjcm](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/heyjcm/32/13039_2.png) [@heyjcm](https://community.weweb.io/u/heyjcm)\ **Post date:** [March 28, 2025, 1:50pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/19 "2025-03-28T13:50:14Z")
> [@Joyce](#): > > Hi @dimbell 👋 > > You won’t be able to do it with the Xano Auth actions because the email, password, name inputs are hardcoded but you can do it with the REST API plugin: > > ![CleanShot 2022-11-22 at 11.42.44@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4586aaf5c8bf0c527063d59e18df2f6b36587ee1.jpeg) > > In our action, we set up our signup API call (1) then we get the user’s authentication token (2) HI, @Joyce! So does this mean that if I wanted to collect anything _ **other than** _ email, password, and name in the Signup page, that I have to NOT use Xano Auth and, instead, use the REST API plugin? If so, do you have a tutorial on that? Thanks so much! ---
**Author:** ![Himanshu](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/himanshu/32/16305_2.png) [@Himanshu](https://community.weweb.io/u/Himanshu)\ **Post date:** [March 28, 2025, 4:10pm UTC](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276/20 "2025-03-28T16:10:25Z")
@heyjcm you can collect any info you want. Just need to add the parameter in the endpoint you’re using to ![Screenshot 2025-03-28 at 9.39.57 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5d55cd0cb1587bececf8b3022103cdba2125254b.png) [Next page](https://community.weweb.io/t/tutorial-how-to-setup-xano-authentication-and-gate-content-in-weweb/276.md?page=2)