Custom authentication

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.

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
2. Configure your Cloudflare Turnstile site key and secret key
3. Replace YOUR_SITE_KEY with your Turnstile site key

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

<form
    method="POST"
    action="https://your-store.garnet.center/api3/public/vendor"
>
    <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="website">Website:</label>
        <input type="url" id="website" name="profile[website]" placeholder="https://">

        <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>

    <input type="hidden" name="turnstileToken" id="turnstileToken">
    <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY" data-callback="onTurnstileSuccess"></div>

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

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
    function onTurnstileSuccess(token) {
        document.getElementById('turnstileToken').value = 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.

Why Turnstile?

Cloudflare Turnstile is a free, privacy-friendly CAPTCHA alternative that protects your registration form from bots and spam without frustrating real users. It runs invisibly in most cases and only presents a challenge when suspicious activity is detected.