Authentication Quick Start

Varity Team Core Contributors Updated March 2026

Add authentication to your app in under 5 minutes. No configuration required for development.

What you get

Email login — passwordless magic links
Social login — Google, Twitter, Discord, GitHub
Automatic accounts — created on first sign-in
Session management — persistent sessions, handled for you
Protected routes — restrict pages to signed-in users

Install

npm install @varity-labs/ui-kit @varity-labs/sdk

pnpm add @varity-labs/ui-kit @varity-labs/sdk

yarn add @varity-labs/ui-kit @varity-labs/sdk

Setup

Wrap your app with the auth provider

Add PrivyStack to your root layout. This provides authentication context to your entire app.

import { PrivyStack } from '@varity-labs/ui-kit';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
          {children}
        </PrivyStack>
      </body>
    </html>
  );
}

Add a login button

Use PrivyLoginButton to render a ready-made sign-in button. Use the usePrivy() hook to check auth state and sign users out.

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

export function Header() {
  const { authenticated, logout } = usePrivy();

  return (
    <header>
      {authenticated ? (
        <button onClick={logout}>Sign Out</button>
      ) : (
        <PrivyLoginButton />
      )}
    </header>
  );
}

Protect routes

Wrap any page with PrivyProtectedRoute. Unauthenticated users are automatically redirected to sign in.

import { PrivyProtectedRoute } from '@varity-labs/ui-kit';

export default function DashboardPage() {
  return (
    <PrivyProtectedRoute>
      <Dashboard />
    </PrivyProtectedRoute>
  );
}

That’s it. Users can now sign in with email or social accounts.

Access user data

Use the usePrivy() hook anywhere in your app to read the current user.

import { usePrivy } from '@varity-labs/ui-kit';

function Profile() {
  const { user, authenticated } = usePrivy();

  if (!authenticated) {
    return <p>Please sign in</p>;
  }

  return (
    <div>
      <p>Email: {user?.email?.address}</p>
      <p>Signed in via: {user?.linkedAccounts?.[0]?.type}</p>
    </div>
  );
}

User object reference

Property	Type	Description
`id`	`string`	Unique user identifier
`email`	`object`	Email address (`user.email.address`)
`linkedAccounts`	`array`	All linked login methods (email, Google, etc.)
`createdAt`	`Date`	When the account was created

Next steps

Email Login — configure magic link options
Social Login — Google, Twitter, Discord setup
Protected Routes — route protection API
Storage Guide — upload and retrieve files