Wized
Xano

Auth Boilerplate for Webflow, Wized, and Xano (WWX)

See web appClone

How to Clone?

Follow all these steps to clone the web app:

  1. Clone the Webflow website
  2. Clone the Wized project, and paste the Wized embed code into the cloned Webflow website
  3. Install the Xano Snippet on a new or existing Xano Workspace

Walkthrough tutorial

If you have any questions, please reach out to Support.
There are additional steps required to set up MailerSend for transactional emails. This is covered in the cloneable's video tutorial.

‍

  1. Update the base endpoint URL for the Xano apps in Wized to the new endpoints of your own Xano account.
  2. Update the 'site_url' ENV in Xano to your own site URL.
  3. Create a free account with MailerSend. Get an API key and update it in your Xano workspace's environment variables - it is called 'mailersend_api_key'.
  4. Change the Xano environment variable 'mailersend_from_email' to the email that you want to send emails from. This email needs to be verified in MailerSend.
  5. Create a template in MailerSend for the 'Verify Your Email' email. This needs to include a link with href variable link {{magic_link}}.
    ‍    Add your template ID to the 'mailersend_dynamic_send' custom function in the 'POST /users' endpoint.
  6. Create a template in MailerSend for the 'Update Your Email' email. This needs to include three links with href variable links
    ‍{{magic_link}}
    ‍{{new_email}}‍
    ‍{{old_email}}
    ‍    Add your template ID to the 'mailersend_dynamic_send' custom function in the 'PATCH /users/{users_id} /users' endpoint.

‍

Additional information

  • Webflow is used to build the web app UI, including the interaction.
  • Wized is used to transform the UI into a functional web app component.
  • For this project, Xano is used as the backend.
  • For this project, MailerSend is used to send transactional emails to users. You can easily change the project to work with a different provider such as SendGrid or Mailgun.