Skip to content
Varity Docs

Quick Start

Varity Team Core Contributors Updated March 2026 v2.0.0-beta (beta)

Get your first Varity app running in 5 minutes.

Prerequisites

Section titled “Prerequisites”
  • Node.js 18 or later
  • npm, pnpm, or yarn
  • A React/Next.js project (or use our starter template)

Installation

Section titled “Installation”

  1. Install the Varity packages

    Terminal window
    npm install @varity-labs/sdk @varity-labs/ui-kit @varity-labs/types

  2. Install the CLI

    Terminal window
    pip install varitykit

  3. Verify installation

    Terminal window
    varitykit doctor

    You should see all checks passing.

Add Authentication

Section titled “Add Authentication”

The fastest way to add authentication is with PrivyStack:

app/layout.tsx
import { PrivyStack } from '@varity-labs/ui-kit';


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/*
          Uses shared dev credentials by default.
          Add your own credentials for production.
        */}
        <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
          {children}
        </PrivyStack>
      </body>
    </html>
  );
}

Add a Login Button

Section titled “Add a Login Button”
components/LoginButton.tsx
import { PrivyLoginButton, usePrivy } from '@varity-labs/ui-kit';


export function LoginButton() {
  // Get authentication state
  const { user, authenticated, logout } = usePrivy();


  // Show user info and logout button when authenticated
  if (authenticated) {
    return (
      <div>
        <p>Welcome, {user?.email?.address || 'User'}!</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }


  // Show login button when not authenticated
  // Opens modal with email, Google, Twitter, Discord, GitHub options
  return <PrivyLoginButton />;
}

Your users can now log in with:

  • Email (magic link, no password required)
  • Google, Twitter, Discord, GitHub

Deploy Your App

Section titled “Deploy Your App”

  1. Build your app

    Terminal window
    npm run build

  2. Deploy

    Terminal window
    varitykit app deploy

  3. View your live app

    Your app is now live at the URL shown in the terminal.

What Just Happened?

Section titled “What Just Happened?”

When you deployed, Varity:

  1. Built your app into static files
  2. Deployed to secure, globally distributed hosting
  3. Registered your app for discoverability
  4. Enabled free operations so users never pay usage fees

All of this happens in about 60 seconds.

Next Steps

Section titled “Next Steps”

Now that your app is running, you can:

Full Example

Section titled “Full Example”

Here is a complete example with authentication, protected routes, and user profile:

app/page.tsx
'use client';


import {
  PrivyStack,
  PrivyLoginButton,
  PrivyProtectedRoute,
  PrivyUserProfile,
  usePrivy,
} from '@varity-labs/ui-kit';


function Dashboard() {
  const { user } = usePrivy();


  return (
    <div>
      <h1>Welcome to Your Dashboard</h1>
      <PrivyUserProfile />
      <p>Email: {user?.email?.address}</p>
    </div>
  );
}


function Home() {
  return (
    <div>
      <h1>My Varity App</h1>
      <PrivyLoginButton />


      <PrivyProtectedRoute>
        <Dashboard />
      </PrivyProtectedRoute>
    </div>
  );
}


export default function App() {
  return (
    // Uses shared dev credentials by default (no appId needed for development)
    <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
      <Home />
    </PrivyStack>
  );
}

This gives you:

  • Login/logout functionality
  • Protected routes that require authentication
  • User profile display
  • Session management

All without writing any authentication logic yourself.