Customer authentication

Build passwordless login forms, control content visibility, and sign customers out. First, complete the installation.

Passwordless login

Use one form and one submit button for the full passwordless flow. The first submit sends the OTP email. The second submit verifies the OTP and signs the customer in.

<form data-tiquo-form="passwordless-login">
  <div data-tiquo-passwordless="step-1">
    <input data-tiquo-member="email" type="email" name="email" placeholder="Email" required />
  </div>

  <div data-tiquo-passwordless="step-2">
    <input data-tiquo-member="token" type="text" name="token" inputmode="numeric" placeholder="Code" required />
  </div>

  <p data-tiquo-message></p>
  <button
    data-tiquo-passwordless-button="Sign in"
    data-tiquo-passwordless-send-loading="Sending..."
    data-tiquo-passwordless-verify-loading="Signing in..."
  >
    Send code
  </button>
</form>

When the form is submitted for the first time, Tiquo sends a one-time code to the email address. When the code field is filled and submitted, the customer is signed in.

The Hosted Package hides step-2 until the OTP has been sent, then hides step-1 if you use the optional data-tiquo-passwordless="step-1" wrapper. Inputs inside a hidden step are disabled automatically so browser form validation does not block submission.

Passwordless login and signup forms are automatically hidden after the customer is signed in. They become visible again after logout.

The email field must use data-tiquo-member="email" and the OTP field must use data-tiquo-member="token". In Webflow, make sure the hidden OTP field is not configured as an email input. Use a text input with numeric input mode for the OTP code.

Webflow setup checklist

• Put both steps inside the same Webflow form.
• Use one submit button for both steps.
• Add data-tiquo-form="passwordless-login" to the form.
• Wrap the email input in an element with data-tiquo-passwordless="step-1".
• Wrap the OTP input in an element with data-tiquo-passwordless="step-2".
• Set the email input to type="email", name="email", and data-tiquo-member="email".
• Set the OTP input to type="text", name="token", and data-tiquo-member="token".
• Do not use type="email" or name="email" on the OTP input.
• Add data-tiquo-passwordless-button="Sign in" to the submit button if you want the button text to change after the OTP is sent.
• Add data-tiquo-passwordless-send-loading="Sending..." to show loading text while the OTP email is being sent.
• Add data-tiquo-passwordless-verify-loading="Signing in..." to show loading text while the OTP code is being verified.
• Use data-tiquo-passwordless-loading="Loading..." if both steps should use the same loading text.
• Use ?v=1.1.18 or newer in the Hosted Package script URL so Tiquo intercepts submit buttons, Enter key submits, and form submits before Webflow can show its default success message.

If Webflow switches to its default Thank you! Your submission has been received! success state, the form submit is being handled by Webflow instead of only by Tiquo. Use ?v=1.1.18 or newer and keep data-tiquo-form="passwordless-login" on the actual Webflow form element.

If Webflow shows An invalid form control with name='email' is not focusable, the hidden OTP field is usually misconfigured as an email field or the hidden step contains a required control that is not disabled. Use the script URL with ?v=1.1.18 or newer so hidden-step inputs are disabled automatically.

Show or hide content by auth state

<div data-tiquo-show="logged-in">
  Visible to signed-in customers.
</div>

<div data-tiquo-show="logged-out">
  Visible to visitors who are not signed in.
</div>

You can set these elements to display: none in Webflow to prevent a visible flash before the Hosted Package finishes checking the session. Tiquo will show the matching element again when it should be visible. If the element needs a specific display type, add data-tiquo-display="flex", data-tiquo-display="grid", or another CSS display value. Use ?v=1.1.18 or newer for this behaviour.

Log out button

Add data-tiquo-logout to a button or link to sign the customer out.

<button
  data-tiquo-logout
  data-tiquo-logout-loading="Logging out..."
>
  Log out
</button>

Optional attributes:

• data-tiquo-logout-loading="Logging out..." changes the button text while logout is running.
• data-tiquo-logout-redirect="/login" redirects after logout completes.

Use data-tiquo-show="logged-in" on the button or its wrapper if it should only be visible to signed-in customers.