---
updatedAt: 2026-08-25T18:45:32.000Z
agentTools:
  projectIndex: https://docs.wristband.dev/llms.txt
---

# Live Hosted Demo

Discover how Wristband auth looks to end users and powers tenant management.

## Multi-tenant Auth Demo

<HTMLBlock>{`
<div class="button-container">
  
    <a href="https://www.perkparty.club" target="_blank" class="button" style="text-decoration: none;">
        <div class="button-content">
            <img src="https://assets.wristband.dev/demo/perk_party/perk_party_email_branding_logo_v1.png" alt="Perk Party Logo" class="logo">
            <h3 style="margin: 4px 0 8px;">Perk Party</h3>
            <p>This is a hosted demo app using Wristband's multi-tenant auth.</p>
            <div class="try-it-now">
                <span>Try It Now</span>
                <span class="arrow">➡️</span>
            </div>
        </div>
    </a>
    
</div>

<style>
    .button-container {
        display: grid;
        gap: 16px;
        margin-top: 32px;
    }

    .button-container {
        grid-template-columns: 1fr;
    }
  
    .button-container a,
    .button-container a:visited {
        text-decoration: none;
        color: inherit;
    }

   /* @media (min-width: 1200px) {
        .button-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }*/

    .button {
        text-decoration: none;
        border: 1px solid #b0b0b0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        max-width: 300px;
        margin: 0 auto;
    }

    .button:hover {
        border: 1px solid #ee60c6;
        box-shadow:0px 8px 16px rgba(0, 0, 0, 0.35), 0px 4px 8px rgba(238, 96, 198, 0.3);
        cursor: pointer !important;
        filter: brightness(90%) !important;
    }

    .button-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 8px 8px 16px;
        height: 100%;
        width: 100%;
    }

    .emoji {
        font-size: 1.4em;
    }
  
    .logo {
        width: 48px;
        height: auto;
        margin-bottom: 8px;
    }
  
    .try-it-now {
      color: #ee60c6;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 1em;
      margin-top: 16px;
      margin-right: 16px;
      align-self: flex-end;
    }

    .arrow {
        margin-left: 8px;
        font-size: 1.2em;
    }

    h3 {
        font-size: 1.2em;
        margin: 4px 0;
        font-weight: bold;
    }

    p {
        font-size: 0.9em;
    }
</style>
`}</HTMLBlock>

<br />

### What is it?

Meet Perk Party, our fictional B2B employee benefits app showcasing tenant isolation and custom branding.

### What is being shown?

This app showcases Wristband's multi-tenant auth experience for end users. Test multi-tenant signup, login, and invite flows while configuring settings powered by Wristband APIs.

### How was it integrated with Wristband's platform?

It handles auth via the <Anchor target="_blank" href="https://github.com/wristband-dev/nextjs-auth">NextJS SDK</Anchor> and API communication using standard fetch/axios calls.

### How do I interact with it?

This app shows a B2B auth experience in action. It connects to Wristband APIs via our <Anchor target="_blank" href="https://github.com/wristband-dev/nextjs-auth">NextJS SDK</Anchor> as a backend integration example.

1. Visit the<Anchor target="_blank" href="https://perkparty.club"> Perk Party website</Anchor>, click "Try Sign Up Flow," and follow the instructions to sign up.

   <Image src="https://files.readme.io/6a6ea5eb21bd08e6daeeee707cdfa896df653480008901e6d9f47fb719930ae6-Screenshot_2024-10-31_at_12.23.15_PM.png" alt="Perk Party Website: Sign Up Button" align="center" width="600px" caption="Figure 1: Start the signup flow from the Perk Party home page." />

2. Once signed up, explore your new tenant settings via the Admin menu in the top navigation bar, or try out the mock perks on the home screen.

   <Image src="https://files.readme.io/02c31f77533fc8251aa7570ed3bdcc9f7f0a146a5c11d5d385111aa75e0c7a7d-Screenshot_2024-10-31_at_12.36.33_PM.png" alt="Perk Party Dashboard: Home Screen" align="center" width="600px" caption="Figure 2: Explore your tenant's admin settings after signup." />

3. Interact with forms powered by Wristband's APIs. Every form features a button linking directly to the relevant API documentation. Use them to:

   * Invite new users to your Perk Party tenant with an assigned role.
   * View all active users in your tenant.
   * View all pending invitations to your tenant.
   * Resend or cancel any pending invitations to your tenant.
   * Configure an External Identity Provider with Okta Enterprise SSO.

   <Image src="https://files.readme.io/d7d7277a7a637cf2323b95d8da9f08b94b320909635d41bde2ebacde7ab92ca7-Screenshot_2024-10-31_at_11.55.12_AM.png" alt="Perk Party Dashboard: Tenant Admin Page" align="center" caption="Figure 3: Manage tenant users, invitations, and identity providers from the Admin page." />

4. Update your profile settings for the currently logged-in user by clicking Settings in the top navigation bar. Similar to the Tenant Admin page, these forms use Wristband APIs to manage user data. You can perform the following actions:

   * Update the user's full name profile field.
   * Change the user's password.
   * Send a change email request (initiate the Change Email Workflow).
   * Resend or cancel any pending change email request.

   <Image src="https://files.readme.io/73cc2c5dffb4aacb7027764a934f7e59e87d2a2a9a024d82081991f6f9c26a60-Screenshot_2024-10-31_at_5.15.04_PM.png" alt="Perk Party Dashboard: User Profile Management Page" align="center" caption="Figure 4: Update the signed-in user's profile, password, and email from the Settings page." />

<HTMLBlock>{`
<style>
.UpdatedAt {
  display: none;
}
</style>
`}</HTMLBlock>