Wized
Xano

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

See web appClone

How to Clone?

‍

Both versions use the same Webflow project but rely on different Xano snippets and wized projects: one with 2FA (Twilio Verify) and one without 2FA.
Follow the steps below depending on the option you choose.

‍

🔐 With 2FA

  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
  4. Follow this guide to set up Twilio verify for 2FA

‍

🔓 Without 2FA

  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.
  • For this project, Twilio is used as the 2FA provider. You can change it for any other provider just take into account all the Xano setup is done so that it works with it.