tailwind-stack/

TailwindAuth

Like TailwindCSS, but for auth conditionals.
className your way to user data!

React Server Componentsbetter-authSQLiteDemo Users
<Auth className="if-auth">
  Hello, <Auth className="auth-user-name" />!
</Auth>
renders
(Login to see your name)

Demo Users

Switch between users to see auth conditionals in action

Syntax Reference

<Auth className="if-auth[-role-X]" /> | <Auth className="auth-user-{field}" />
if-auth

Logged in

if-not-auth

Guest only

if-auth-role-admin

Role check

auth-user-name

User field

auth-user-prop-plan

Metadata

as="img"

Avatar

Live Examples

Switch users above to see these update in real-time

Guest Welcome

Only shown when not logged in

<Auth className="if-not-auth"><p>Welcome, stranger.</p></Auth>
renders

Welcome, stranger.

User Greeting

Nested auth components

<Auth className="if-auth">Hello, <Auth className="auth-user-name" />!</Auth>
renders

Admin Badge

Role-based visibility

<Auth className="if-auth-role-admin"><span className="badge">ADMIN</span></Auth>
renders

Premium Feature

Custom role predicates

<Auth className="if-auth-role-premium"><span>Premium Member</span></Auth>
renders

User Avatar

Render as image

<Auth className="auth-user-avatar" as="img" />
renders

User Metadata

Access nested user data

<Auth className="auth-user-prop-plan" />
renders

Component Integrations

Pass user data to children using $$user / $$session tokens

QRGenerate from User ID

Create a QR code from the authenticated user's ID

<Auth className="if-auth">
  <QR className="qr-encode-[$$user.id]" />
</Auth>
Output
Login to see QR

TextInject User Data

Access user fields via dot notation

<Auth className="if-auth">
  <span className="text-primary $$user.email" />
</Auth>
Output
Login to see className

Token Syntax

TokenResult
$$userFull user object (stringified)
$$user.nameUser's name
$$user.metadata.planNested metadata access
$$session.idSession ID

Debug View

Raw session data (use as="json")

Session Debug

{
  "user": null,
  "session": null
}

How to Use

// lib/auth-config.ts
import { setConfig } from '@tailwind-stack/auth'
setConfig({
  database: './auth.db',
  roles: {
    admin: (user) => user.metadata?.role === 'admin',
  }
})
// In your component
import { Auth } from '@tailwind-stack/auth'
<Auth className="if-auth">Welcome back!</Auth>