Hi
THANKS A LOT, Elijah - with your help I finally got my problem solved.
Maybe some other Bubblers out there are working on a similar problem (custom login via API), so I will describe my solution a little more in detail.
DISCLAIMER: I have some experience in software development and I am familiar with framworks like Django, but I am a Bubble newbie - so everything I am writing here might be far away from perfect. I am just documenting a successful experiment with Bubble
I am using a Postgres DB collecting IoT data and PostgREST (www.postgrest.org - a very cool piece of open-source software which exposes a REST-API) as a backend system .
Bubble should serve as a front-end to present data and charts to the end-user.
Step 1
I wrote a Postgres stored procedure “rtauth” which takes username and password as input parameters and returns login true/false and a JWT token in case of success.
curl “https://myservernet/rpc/rtauth” -X POST -H “Content-Type: application/json” -d ‘{ “username”: “donaldduck”, “password”: “topsecret” }’
response from the API in case of success:
{“login”:true,“jwt”:“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoidG9kb191c2VyIn0.bsfiSdmAwRvrHG2QcBFPzFr4-11c7fX-iU7IVJcQcK8”}
curl “https://myservernet/rpc/rtauth” -X POST -H “Content-Type: application/json” -d ‘{ “username”: “thedonald”, “password”: “topsecret” }’
response from the API in case of failure:
{“login”:false,“jwt”:“-”}
**Step 2 **
Design a simple login panel with input fields for username and password and a Log-in button.
Step 3
Create a Bubble API Connector to talk to your backend.
You can use your docs or services like https://reqbin.com/ to find out the correct JSON object data structure of the values returned by the API call.
Fill out the Body field and use <> to mark the dynamic values.
It is important to untick the “Private” boxes - otherwise you are not able to hand over parameters from the login form.
Reinitialize the API to see that everything works.
The API call returns:
login as boolean
jwt as text
Step 4
Create two additional field in the User Thing:
login and jwt to store the results of the API call.
Step 5
Create a thing which links the API.
Step 6
Set up a workflow which handles the Login-Button click event.
Add a plugin action first.
Hand over the username and the password to the API.
Write the results of the API call to the User thing.
Give feedback if login failed
Jump to the first page of your app, if login was sucessful
ANY COMMENT ON THAT APPROCH IS VERY WELCOME !!!
MY NEXT BIG QUESTIONS:
- Is that a proper way to handle API bases auth ?
- How does that work when many users are using the app ?
- Any security related concerns?
Best regards
Wolfgang