App Template: Custom Login/Register/Logout/Reset Password page

[xnohat]

Hi everyone,

Budibase is excellent platform for building apps, not only for internal apps, but also for external apps

I found that many guys asked how to create custom login/register page for Budibase, so I created a template app with custom Login/Register/Logout/Reset Password pages.

Usage:

1. Import app from template I attached here
   Login Template-export-1653687114948.txt
2. Edit Restful API Queries

Change:

• BaseURL to your Budibase Domain
• appid to your App ID

I using some tricks & hacks here to inject Javascript to Budibase app pages

Love this platform 👍

[agniiva]

Shows error creating app

[DrKley]

I'm trying to get this to work but it seems like my instances API is not working, how do I make sure its working and taking requests?

[Sbleck]

I found that many guys asked how to create custom login/register page for Budibase, so I created a template app with custom Login/Register/Logout/Reset Password pages

Hello,

Usage:

1) Import app from template I attached here: Login Template-export-1653687114948.txt
2) Edit Restful API Queries

Thanks for sharing your sample, but I wanted to know where (and, how) could be possible to edit these Restful API queries, if possible.

And, if possible too, wanted to know if these Restful API queries could be put in navigation links, of course too.

Any commented advice should be greatly appreciated.

Tks in adv

[xnohat]

Hi,

You can edit Restful API queries here:

[mixmaniax]

First of all, thank you very much for this sample. I'm very new to Budibase and programming, so please excuse me if I might ask some silly questions.
I tried your custom login page and it seems to work well.
One thing I cannot figure out is way after a successfully log in default bindings for the "current user" are all empty e.g. {{ Current User.roleId }}, {{ Current User.email }} etc.
What I'd like to achieve is to show role based content (e.g. a button only visible when part of POWER role). I already was playing with conditions to show or hide content based on the role of a user this works when logging in through the BB default portal. Using conditions for the current user on a component using your custom login somehow will not populed the values for the {{ Current User.roleId }}, {{ Current User.email }} etc.

Do you have any hint or example why this won't work using your custom login page and REST API's?

Below some screenshots as a reference.

Any help is much appreciated.

Thank you.

e

[xnohat]

Hi,

For access {{ Current User.* }} binding, you need "refresh" page after login, because BB need reload entire client svelte app for reading new Cookie had set. You can modify action of button Back to Home for refresh page like code below

var tagString = `<script type="text/javascript"> 
setTimeout(function(){
		if(!window.location.href.includes("/builder/")){
			window.location.replace(window.location.href.replace(window.location.hash,''));
		}
}, 1);
</script>`; 
var range = parent.document.createRange(); 
range.selectNode(parent.document.getElementsByTagName("BODY")[0]); 
var documentFragment = range.createContextualFragment(tagString); 
parent.document.body.appendChild(documentFragment);

return '/';

[mixmaniax]

@xnohat the refresh did the trick! Thank you very much

[nunopoco]

When trying to login I get a 403 error.
It seems calling the endpoint "https://budibase.app/api/global/auth/default/login" doens't work as expected.

I tried using "https://budibase.app/api/global/auth/{subdomain}/login" and it returns a 200 code and some cookies on the header (using Postman).
Manually setting "budibase:auth" and "budibase:auth.sig" allowed me to login, but the issue is that I can only get the 2 cookies using Postman. I tried on Budibase and can only get one cookie, and the same happens using Hoppscotch.

CURL for reference:
curl --location --request POST 'https://budibase.app/api/global/auth/adapt/login' \ --header 'x-budibase-api-key: XXX' \ --header 'x-budibase-app-id: XXX' \ --header 'Content-Type: application/json' \ --data-raw '{ "username":"tester@test.com", "password":"123456789" }'

Here's my revised version based on the one from @xnohat :
login example-export-1660634547202.txt

I read somewhere that it could be because of a CORS issue, but I'm lost trying to figure it out.
Can anyone help with this?
TIA

[xnohat]

Oh, I just tested on self-hosted Budibase. For the case on Cloud Budibase may more complex cause by multiple tenant structure of budibase cloud.

[Gorselowski]

@xnohat Thanks so much for this, it's such a great solution.

Anyone, I'm stuck on such a noob issue.
How can I find the tableid and rowid on my self-hosted instance to replace the dummy parameters in the template's GET query?

For all other tables in Budibase, the UID will be displayed in a browser url bar like this, which is what is in the template placeholder:
ta_a1d8a001a91d4bec970da7b25da84f8f
ro_ta_a1d8a001a91d4bec970da7b25da84f8f_9f2325b1dbdd4bde913217555989b3f6

But because the REST datasource is trying to query the Users table, the UID for the Users table is not so readily clear.
Looking at it in the url bar gives only:
ta_users

And manually looking at a single rowid only gives something like:
ro_ta_users_us_xxxxxxxxxxxxxxxxxxxxxxxx

The GET query works fine if I link it to another database.
Something like:
ta_xxxxxxxxxxx
ro_ta_xxxxxxxxxxx_xxxxxxxxxxx

But the point of the app is to update the Users database.
Maybe I'm missing something completely obvious, but any guidance would be really useful.
Thanks.

[xnohat]

When you edit your app in builder , click to Data tab -> Users table, your address bar will look like this

https://etc.budibase.app/builder/app/app_dev_etc_51f070d370ca46909b9e31ba17a5ad0a/data/table/ta_users/

app_dev_etc_51f070d370ca46909b9e31ba17a5ad0a is your DEV app_id, PRODUCTION app_id will be app_etc_51f070d370ca46909b9e31ba17a5ad0a

table user: ta_users
this table available across your budibase apps, all your app will point to only once table user

On Portal click to User section, click to any user you need to get user id, on address bar user id is look like us_4bc0e1be9064496b81eefd5cba00cb4e

https://etc.budibase.app/builder/portal/users/users/us_4bc0e1be9064496b81eefd5cba00cb4e

[Sahinkaalalox]

Can Anyone help me with this
I've connected my postgres data in budibase. I have 1 table as userinfo with emails & passwords. Then i created a login page in design , Now how can i validate the email & password in login page. After validation only it should navigate to particular page.

[Gorselowski]

Yes, at first I thought it worked like this too.
But the REST API actually interacts with the master user list. So, the actual users of the entire Budibase builder instance.
So you cannot control users at the individual app level.

If you set the 'Authentication' automation to query the 'Users' table, then it should work.

For your post login structure, the 'conditions' panels in design should allow you to achieve anything you want.

[Sahinkaalalox]

I'll try this , thanku very much

[xnohat]

Can Anyone help me with this I've connected my postgres data in budibase. I have 1 table as userinfo with emails & passwords. Then i created a login page in design , Now how can i validate the email & password in login page. After validation only it should navigate to particular page.

I have been tried using other data source as authentication source for budibase but is hard if you using just budibase. On public page you cannot access any table without set that table or that datasource to public, this will lead to security problems

Safest way is using my custom template above

[Sahinkaalalox]

ok.thanku very much

[tglynx]

Hi,

great app! I already use it successfully in my project. I try to better understand how it works.

What ist the purpose of the 'Forgot password global link' Embed component in Step 1 of the 'Login Form' on the /login screen?

Thanks,
Michael

[seoulaja]

Hi @tglynx @xnohat

I tried the login API, in the login button I put 2 actions, which are:

1. execute query login api
2. once authenticated, then navigate to the dashboard page

I got 200 and it says ok, but it is stuck on the login page. When I try to manually go to /dashboard page (the access is basic) I always refer back to login page (which the access is public)

I have setup the bindings for email, password and also the body.

Am I missing something?

Thanks,
Seoul

[tglynx]

hi @seoulaja ,

have you checked @xnohat 's login template up in the original (first) post?
The 'Login Button' on the /login screen has 5 actions by default.
Have you tried using the login template app without modifying anything?

I added a 6th action to navigate to my app (which is a different app than the login template) after authentication has been successful.
That way you can maintain the external login pages and your app seperately!

You can just create a new app and use the login template as is for testing in your environment!

Also please state: are you using a self hosted environment or the bb cloud service?

Regards,
Michael

[seoulaja]

Hi @tglynx

Thank you for the quick response. Apparently I was looking on wrong page, which is in '/' page, because in that page there is 'login' button.

The miss step on my side actually on navigation link, previously I only put '/dashboard', so when I change it to full address it works as a charm!!

So all is well. Thanks again!

[alphaomega16]

Hello @xnohat
Thank you for sharing a great solution for all the Budibase users out there (myself included).

I am having some difficulty implementing the logout button.
Each time I attempt to add the Javascript code to the button Budibase responds with "component actions saved" and then "Error updating component prop" (see Image). From there I was required to log back in to Budibase and the action was not saved.

The Javascript:

var tagString = `<script type="text/javascript"> 
setTimeout(function(){
    document.cookie = 'budibase:auth=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}, 1000);
</script>`; 
var range = parent.document.createRange(); 
range.selectNode(parent.document.getElementsByTagName("BODY")[0]); 
var documentFragment = range.createContextualFragment(tagString); 
parent.document.body.appendChild(documentFragment);

return true;

Is there something I am doing wrong? Or is there another way to implement the logout button?

Thanks again,

[xnohat]

Hi,

Logout button now can use existed official "on click" - "logout" action of Budibase.

in case you need using code above you need update it a bit to prevent it doing log you out in /builder/

var tagString = `<script type="text/javascript"> 
setTimeout(function(){
		if(!window.location.href.includes("/builder/")){
    	document.cookie = 'budibase:auth=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
			window.location.replace(window.location.href.replace(window.location.hash,''));
		}
}, 1000);
</script>`; 
var range = parent.document.createRange(); 
range.selectNode(parent.document.getElementsByTagName("BODY")[0]); 
var documentFragment = range.createContextualFragment(tagString); 
parent.document.body.appendChild(documentFragment);

return true;

[alphaomega16]

The change worked!
I will also look into the official "on click" - "logout action.

Thank you,

[taholmes160]

Xnohat:

Howdy:

I am trying to use your template for the login screens etc.

Ive NEVER fooled with REST queries etc, so im kinda going by feel here. When I send the restful query, I get

Query Error: Thread timeout exceeded 10000ms timeout.

Im building a school management database that will need everyone; parents, students, teachers, staff, office folks, admin folks etc etc to be able to log in to access their sections

Thanks
TIM

[tglynx]

Hi @taholmes160,

according to your screenshot your API baseURL is wrong.

should be: http://192.168.2.28:10000/api/public/v1

That said, i would suggest that you witch to a DNS Name / FQDN for your installation right from the beginning when developing your app. Also consider using https (sounds like you will handle sensitive data).

Also one additional note:
budibase killed the feature to assign roles using the API for new '/users' if you are on the 'free' tier since Version 2.10.10.
so if you do not have a subscription, you will be out of luck using this template to create users with direct app access after 'registration'! Manual interaction is necessary to assign the new user a role in your app.
@xnohat any ideas in this regard?

have a nice day,
Michael

[xnohat]

Hi @taholmes160
You API URL must change by go through bbproxy container because that path only valid when access through internet, not internal access.

https://your-public-budibase-domain.com

[xnohat]

Hi @tglynx and other guys want to continue use this template for Budibase later v2.10.10

BB has been change in /users API to /users/bulk with different payload , so you need update query bb_create_users to below

Endpoint:

https://your_domain.budibase.app/api/global/users/bulk

Body:

{
  "create": {
    "users": [
      {
        "email": "{{Binding.email}}",
        "password": "{{Binding.password}}",
        "roles": {
          "{{Binding.appid}}": "BASIC"
     		},
        "forceResetPassword": false,
        "builder": {
          "global": false
        },
        "admin": {
          "global": false
        }
      }
    ],
    "groups": []
  }
}

Tested working with latest cloud Budibase. New user will assign immediately to your app.

[tglynx]

@xnohat thanks, i am running self hosted and without subscription currently. So i do not think that enpoint is present in the self hosted version, but i will give it a try. also i think the old API call also still works when having a subscription! Let me say, great template - thanks for your work!

[taholmes160]

AHHHHH ok -- well -- that shoots that idea, as the budibase host does not have external access of any sort (For reasons not related to my budibase installation) Thanks a bunch TIM

…

On Thu, Sep 21, 2023 at 11:49 AM Hong Phuc Nguyen ***@***.***> wrote: Hi @taholmes160 <https://github.com/taholmes160> You API URL must change by go through bbproxy container because that path only valid when access through internet, not internal access. https://your-public-budibase-domain.com — Reply to this email directly, view it on GitHub <#6098 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF4KRE4VM5652YT42ACN2UTX3ROYFANCNFSM5XFRHPCA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cyberz0mbie]

I’m using the self hosted option and I cannot get it to create users.

1. You didn’t mention that you need to update the bb_create_users headers x-budibase-api-key
2. Also need to update the appid and x-budibase-api-key headers under bb_request_table
3. Could these be a global header
4. How do you get the tableid and rowid for the bb_request_table
5. After changing all these it still doesn’t create a user on the user db. (I got it to work, but I don’t understand the request table that is the only one that when testing didn’t work)

[marian001]

Hi, does this work after recent updates making User table read-only and making 'Update a user' API call mostly available only with business/enterprise license? i.e. v2.11.XX

[tglynx]

Hi @marian001 ,
As per my current findings it is still possible to create users in a self hosted environment without subscription, but the assignment of a Role in an existing App is no longer possible. If it is still possible and i am missing something, it would be great to get a 'hint' :)
Also /api/global/users/bulk seems to be only available with subscription.
Michael

[tglynx]

Hi @marian001 @xnohat ,
i need to correct myself... I just tested the endpoint
https://your_domain.budibase.app/api/global/users/bulk
in my self hosted environment and it indeed works!

The problem was, that there is a small error in @xnohat s body above...

"email": "{{Binding.email}",
must be
"email": "{{Binding.email}}",

Great work @xnohat !!!

[SaschaValentin]

Thank you @xnohat for your great work.

Creating new users (even with custom roles) works wonderful with endpoint .../api/global/users/bulk. They appear in users table and when I use BB native login they can login.

But there is an issue when login over this template. It says that the user has been logged in, but that´s not true. Looking at the cookies I can see that the two cookies responsible for the auth are not set (in contrast to the normal BB login).

Is there anyone for whom this works? And if so could you imagine where my fault lies? Is there a different endpoint for login function? Or is the action for the login button wrong:

var cookie = $("Action 2.Query result.headers.set-cookie"); if(cookie){ parent.document.cookie = cookie; } return $("Action 2.Query result.data.0.status");

[tglynx]

It works for me! The login endpoint is .../api/global/auth/default/login
Please check this thread for the solution to reload the svelte app after the cookies have been set. You will find the solution to your problem further up in this thread. Search for 'reload entire client' ...

[SaschaValentin]

Thank you, Michael, for your help. There was indeed a fault in the endpoint. In browser it works great now. But I have built a PWA of the Budibase app and when this one is installed on Android or iOS you can´t login. Any idea hiw I can solve this? I guess a reason could be that the Budibase app is accessed over an iframe. Maybe I have to configure something on this?

[Kakovisk]

Good morning,

I have Budibase in the free version, On-Premise, but after updating to version 2.10.12, the user creation REST stopped working correctly, resulting in the following message: "message": "Roles/admin/builder can only be set on business/enterprise licenses - input ignored."

It creates the user but does not assign the BASIC role. Does this mean that from now on, I create users via REST but the roles have to be set on the platform? Can't I do it through REST anymore?

[maverjk]

Any news or solutions about this issue?