Custom Authentication From

Garnet has 3 way to invite a vendor: either you invite the vendor manually, or via an application form, or via a custom form (you are on the right page).

Learn how to invite vendors

If you want to build your own login UI instead of using the Garnet login iframe, you can use simple HTML forms to authenticate users.

TIP

The code examples below are minimal working examples. You will need to add your own CSS styling to make them production-ready.

To adapt the form to your marketplace:

1. Replace your-store by your Shopify store id.
2. If you are using a custom domain, replace your-store.garnet.center with your custom domain in all forms below.
3. Edit the email notifications to point to your custom pages.

Example of a custom designed onboarding

Example of a custom login form using HTML and CSS:

Login form

<form method="POST" action="https://your-store.garnet.center/auth/public/login" target="_blank">
  <label for="email">Email:</label>
  <input type="email" name="email" required />
  <label for="password">Password:</label>
  <input type="password" name="password" required />
  <input type="hidden" name="redirect" value="/" />
  <button>Submit</button>
</form>

Password recovery

Password recovery is a two-step process:

Step 1: Request password reset code

This form sends a reset code to the user's email address.

<form
  method="POST"
  action="https://your-store.garnet.center/auth/public/change-password/request"
  target="_blank"
>
  <label for="email">Email:</label>
  <input type="email" name="email" required />
  <button>Send reset code</button>
</form>

Step 2: Set new password

After receiving the code via email, the user can set a new password.

<form
  method="POST"
  action="https://your-store.garnet.center/auth/public/change-password/update"
  target="_blank"
>
  <label for="email">Email:</label>
  <input type="email" name="email" required />
  <label for="code">Code (from email):</label>
  <input type="text" name="code" required />
  <label for="password">New password:</label>
  <input type="password" name="password" minlength="8" required />
  <input type="hidden" name="redirect" value="/" />
  <button>Update password</button>
</form>

Vendor registration

Allow new vendors to register directly on your marketplace. This requires:

1. Enable Custom onboarding form in Admin Panel > Applications

The email and vendor name must not already exist on the marketplace.

<form method="POST" action="https://your-store.garnet.center/api3/public/vendor" id="registrationForm">
  <fieldset>
    <legend>Account</legend>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="password">Password (min 10 chars):</label>
    <input type="password" id="password" name="password" minlength="10" required />

    <label for="vendor">Vendor Name:</label>
    <input type="text" id="vendor" name="vendor" required />
  </fieldset>

  <!-- Add profile fields using bracket notation -->
  <fieldset>
    <legend>Vendor Profile</legend>

    <label for="company-name">Company Name:</label>
    <input type="text" id="company-name" name="profile[company-name]" />

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="profile[phone]" />

    <label for="description">Description:</label>
    <textarea id="description" name="profile[description]" rows="3"></textarea>

    <label for="instagram">Instagram:</label>
    <input type="text" id="instagram" name="profile[instagram]" placeholder="@username" />
  </fieldset>

  <!-- Bot protection: honeypot field (must stay empty) -->
  <input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off" />

  <!-- Bot protection: CSRF token -->
  <input type="hidden" name="csrfToken" id="csrfToken" />

  <button type="submit">Register</button>
</form>

<script>
  // Fetch a CSRF token when the page loads
  fetch('https://your-store.garnet.center/api3/public/csrf-token', {
    headers: { 'x-store': 'your-store' },
  })
    .then((res) => res.json())
    .then((data) => {
      document.getElementById('csrfToken').value = data.token;
    });
</script>

The Vendor Profile fieldset is optional. Profile fields are stored in the vendor's metaobject. The field names must match your vendor profile metafield keys using the profile[] bracket notation (e.g., profile[facebook], profile[company-name]).

If you are using advanced metafields (like image upload), you will need to write additional logic to convert the user image into a valid value for Shopify metafields.

Bot protection

The registration form includes built-in bot protection: a CSRF token with a time check ensures the form was loaded before submission, and a hidden honeypot field catches automated bots. No external service or configuration is needed.