Build a Basic Login and Signup Flow Using Xano & Wized
HTML-код
- Опубликовано: 19 янв 2024
- Enhance your Webflow project with secure authentication using Wized and Xano. This tutorial guides you through setting up a straightforward login and signup process, featuring email and password verification. This is the easiest way to start adding users to your web app.
BEGINNER COURSE: Learn the fundamentals of building Web Apps without code. Brought to you by @Wized and @Finsweet .
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Xano: finsweet.info/xano
Wized: www.wized.com/
Clone free Wized projects: www.wized.com/showcase
Receive support from Wized Intelligence Center: help.wized.com/
Get the full list of all Finsweet products: www.finsweet.com/subscribe
-----------------------------------------------
// ABOUT US
Wized - build complex web applications in @Webflow with No-Code. Wized enables you to use Webflow as the front-end for your web app and natively integrate your website with popular databases or with any database that has a REST API. Wized empowers you to build custom login functionality, Stripe payment flows, complex user interactions, and lots more! 💪
-----------------------------------------------
// SOCIAL
Twitter: / getwized
Webflow: webflow.com/team/Finsweet/
Subscribe to RUclips: ruclips.net/user/Wized?sub_c...
-----------------------------------------------
// TAGS
#wized #xano #developer #nocodedevelopment #nocode
-----------------------------------------------
Thanks for your support! 🤟
Please do a video for sending emails when signing up and resetting passwords
Thanks you, I love this videos
thank you
Another serious question... in "My Apps", why do you select "Rest" instead of "Xano", if we're using Xano in this example?
The preset option for Xano has been removed for Embed 2.0. You can choose the Rest option for any application, provided it has Rest endpoints
Is the method of checking whether users have the token to access the dashboard secure or can users bypass this to get unathorized access to the dashboard?
Great video! One small question: The email field for the credentials is case sensitive. Ideally, of course, we don't want this. Can we also solve this via Wized? If not, how else?
You can do it in multiple ways. In Wized, you can convert the input value to lowercase like this:
i.my_input.toLowerCase() within the request field.
You can also add input validation to the html input, by adding the pattern attribute in Webflow.
developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
You can ask chatGPT to help you with the regular expression for your pattern attribute.
Serious question, why is better to use wized + xano and no the webflow default login-signup?
That's a great question!
Webflow's login is great if you just want to protect a page with static or CMS data.
Wized and Xano bring advanced features to the table, allowing you to respond to user actions, pull in data from external sources, and refresh content live, all without the need for a page reload.
You also have the flexibility to integrate logins via Google, Facebook, GitHub, and more.
Plus, these tools empower you to craft user-specific functionalities and develop sophisticated web apps.
Think analytics dashboards, interactive learning modules with quizzes, or even a booking platform akin to Airbnb.
Hope this helps!
I'm trying to go through the Maya project with the new embed 2.0. I'm using this video for the auth, which works. However, I can't get the display error message function to work.
I thought it should be something like: Apply to [auth_error] + Setting: Set visibility + Visible if : return r.Login_user.data.code; + Set text type plain text + value: return r.Login_user.data.message;
Am I missing something? And will || and && and such still work?
I'm not a 100% certain what the issue might be, but I suspect the following.
Your error message's display property is set to none in Webflow, and you used the set visibility action in Wized.
To fix this, just set display to block in Webflow, and let Wized handle the visibility. Here's more info:
docs.wized.com/actions/element-actions/set-visibility/#how-set-visibility-works
@@Wized Ah you're right! Thanks
Why, when I'm setting an action, can't I set up the action to submit? This option simply does not appear in the "setting" select options. I only have "On click," "On change," and others, but not submit. I'm stuck with the "password can't be submitted" error.
You're using the wrong embed version.
When you're creating a new project, select "Next version". :)
@@Wized thanks, I'll try in the next project. I could solve this by triggering the action in the submit button.
@@Wized I'm running into the same issure. The form does nothing when I click the button on the Wized canvas, and if I click it in the staging site, it'll pop up with that above message. If I go into Data Store and run the Create User request there, it works. For some reason submitting just doesn't. I'm using the next version.