Day 3: todo app with Xano
HTML-код
- Опубликовано: 18 сен 2024
- Sign up to toddle here 👉 toddle.dev/sig...
On Day 3 we are building a todo app. We are joined by Michael from Xano (@nocodebackend) who is going to help us set up the backend.
Some of the topics we will cover are
- Building a signup page
- Actions and workflows
- User signup / login
- Making authenticated API requests
- the HTML form element
00:17:38 - bind form fields to variables
00:36:34 - use a formula to dynamically customise the request
00:37:36 - trigger based on form submit
00:41:14 - present errors to the user
00:45:30 - store auth token as session cookie and go to url
00:53:07 - add toddle chrome plugin (to support cookie tracking in the editor)
00:54:36 - create a /login page
01:00:00 - use securely stored access token (authorization header)
🌎 Visit our website at toddle.dev
🐦 Follow @toddledev on Twitter / toddledev
💬 Join our Discord at / discord
What is toddle?🤷♀️
We see toddle as a no-code tool for professionals - but accessible to everyone. We have built toddle on the battle-proven concepts from the major code frameworks like Angular, Vue, and React - but packaged in a no-code setup.
This is the a good tutorial for authentication, Here are the key ideas:
17:38 - bind input form fields to variables
36:34 - use a formula to dynamically customise the request
37:36 - trigger based on form submit
41:14 - present errors to the user
45:30 - store auth token as session cookie and go to url
53:07 - add toddle chrome plugin (to support cookie tracking in the editor)
54:36 - create a /login page
1:00:00 - use securely stored access token (authorization header)
We are glad you like it!
This was an amazing tutorial, ill be watching a few times so it all sinks in. Perfect pace and thanks for explaining everything from the beginner standpoint, it really helps 🎉. Really enjoying the training series. Thank you 🔥 🚀
You are most welcome 🙏
I did not get the authentication at login immediately. I think it had something to do with the api looking for the user id instead of the email. I also set the bounce to 50, because I got a too many requests error. Finally, it's working. I am really happy now. It feels more app like.
I am looking forward to reusing the login on the other apps without having to do it all again! Great to have that to save tons of time :)
survived till the end :) and was worth it! thank you
Did I miss the part where the authentication actually authenticates the user so the homepage isn't just open to anyone? After success it routes user but if someone just inserts the homepage url (/) it can still open that page and not reroute to login.
It should not. You need the authentication to happen before you can access the site.
Great, I wish you make app for an that teachers can use to to share the students grades were they can creat account for each student
We made toddle so you can build the app ;)
Great tutorial, I managed to do it all. How can I do to update other fields of the database like the important field?
I duplicated the checkbox and made the changes in both Xano and toddle to read and edit the checkboxes. However if I update both of them at the same time it only reads one value.
For instance:
- If I check the completed value only is OK and keeps the important value unchecked.
- If I check the important value only is OK and keeps the completed unchecked.
- If I check both values, it only keeps checked the last value updated.
- If I uncheck any of the values, then it starts swapping the true and false value from one to the other.
Nice one✌️
Thanks ✌️
Great tutorial!! Noob question here... you mentioned the need for a "secure cookie" when setting up the auth formulas. Is this "set cookie" a secure cookie? Or is there another step to encrypt this information?
Yes the Set Session Cookie set s a secure http only cookie, that is not accesible by client side javascript.
Can toddle be used for making chrome extensions?
You can build the UI in toddle by embedding it as a web-component but you cannot build the extension it self.
where can I learn more about web component@@toddledev
I am stuck at 34:32 as I cannot find the database in XANO? Is this the 'user' database?
This is the API endpoints that xano automatically adds for new projects. If you are looking for help try our discord channel discord.gg/toddle
Great. How to protect and redirect home page for non logged users?
You can use the "On Error" workflow in the API to redirect to the login page.
@@toddledev it will be on client side or server side?
followed all the steps but got stuck around 57:00 because when i tried to login it kept saying "unable to locate request" even though i see the account in the xano user table and even tried changing the password in there and then pasting the newly created password in the login on toddle. but to no avail, i was unsuccessful. Not sure what's going wrong.
I just figured it out. faced the same issue. Check the API endpoint when copy pasting the endpoint path values added twice (once in url and also in path input field). i remove all paths and remove the endpoint and pasting it again in empty field. it worked.
Did @thinkwithnikhil 's solution work for you?
I keep getting stuck at the 1:03:12 mark because I can not get the session cookie to save to my browser. Any thoughts here?
I made it through but Im wondering if there are a few bugs with the session cookies. I stepped away from the computer multiple times and I couldn't ractivate the session cookies when I would come back.
Also the submit to do call at the end is a little buggy. If you check a box AND submit a new item then the list sort of bugs out and doesn't properly show your to do item. Not sure how you can address that so the to dos always load in properly.
After you setup the login page and signup page properly. Use 'Preview' mode instead of 'Test' mode to login - which will create a session cookie on your browser. Now open the editor > head to home page> set up the todos api. Reload few time to let the editor pickup the saved session cookie from your browser. (Disable any Ad blockers if enabled - ad blockers could mess up the execution)
Did you install the chrome extension?
We'll investigate.
@@toddledev any news ? Im stuck with this issue
Please NO ONE CARES ABOUT TO DO APPS ... no serious users what to see these tutorials