@entityauth/nextjs

Next.js integration for Entity Auth React components and helpers.

Installation

npm install @entityauth/nextjs
# or
pnpm add @entityauth/nextjs
# or
yarn add @entityauth/nextjs

Components

UserProfile

Main user profile component with tabs for account, organizations, invitations, preferences, and security.

import { UserProfile } from "@entityauth/nextjs";

<UserProfile
  open={isOpen}
  onOpenChange={setIsOpen}
  modeIndicator="personal" // or "team"
  peopleMode="friends" // or "org"
  onSignOut={handleSignOut}
/>

PeoplePanel

Standalone component for managing invitations, friend requests, and user search. Can be embedded in custom layouts.

import { PeoplePanel } from "@entityauth/nextjs";

<PeoplePanel
  me={{
    id: userId,
    email: userEmail,
    username: username,
  }}
  mode="friends" // or "org"
/>

Props

• me: Current user object with id, email, and username
• mode: "org" | "friends" - Controls which features are shown
  • "org": Organization invitations only
  • "friends": Friend requests and connections only

Features

Find People Tab:

• Real-time search with debouncing (250ms)
• Filters by email or username
• Shows "already invited" / "already friends" hints
• Supports both organization and personal friend search

Sent Tab:

• Lists sent invitations/requests
• Actions: Resend, Revoke/Cancel
• Grouped by status (pending, accepted, declined)

Received Tab:

• Lists received invitations/requests
• Actions: Accept, Decline
• Badge count for unread invites
• Shows inviter information and organization details

Friends Tab (when mode includes "friends"):

• Lists confirmed friends
• Actions: Remove friend, Create shared resources
• Quick actions to create channels, notes, tasks, or feeds with friends

Theming

The component uses Tailwind CSS classes and can be customized via your Tailwind config. It follows shadcn/ui design patterns and uses CSS variables for colors:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  /* ... other variables */
}

Events

The component dispatches custom events for host apps to listen to:

createSharedResourceWithFriend Dispatched when user clicks action buttons in Friends tab to create shared resources.

window.addEventListener("createSharedResourceWithFriend", (event) => {
  const { friendId, resourceType } = event.detail;
  // resourceType: "channel" | "note" | "task" | "feed"
  // Navigate to creation flow with friend pre-selected
});

UserProfileButton

Button component that opens the UserProfile sheet/dialog.

import { UserProfileButton } from "@entityauth/nextjs";

<UserProfileButton
  email={userEmail}
  username={username}
  imageUrl={avatarUrl}
  onOpenProfile={() => setIsOpen(true)}
/>

Hooks

useIsMobile

Detects if the current viewport is mobile-sized.

import { useIsMobile } from "@entityauth/nextjs";

const isMobile = useIsMobile();

Middleware

Export middleware for Next.js App Router:

// middleware.ts
export { middleware } from "@entityauth/nextjs/middleware";

Requirements

• Next.js 13.4+
• React 18+
• @entityauth/react >= 0.0.11
• @entityauth/auth-client >= 0.1.55

License

MIT