Demo Dashboard Guide

This guide maps the demo dashboard features to SDK calls and example UI patterns so you can implement the same flows in your product.

Authentication (Login / Register)

Use the SDK to register and login users.

import { EntityAuthClient, init as initEA, SDK } from '@entityauth/auth-client';

initEA({
  workspaceTenantId: process.env.NEXT_PUBLIC_ENTITY_AUTH_WORKSPACE_TENANT_ID!,
  baseURL: process.env.NEXT_PUBLIC_ENTITY_AUTH_URL,
});

const ea = new EntityAuthClient();

await SDK.register({ email, password });
await SDK.login({ email, password });

Profile Management (Username)

Users can set a unique username and see updates in real‑time.

// Username flows are managed via generic entities in the new model
// Example: update user entity properties with entities.update

UI pattern:

• Input field bound to username
• Debounced checkUsername() on change
• Submit to setUsername() and display result

Organizations (Create, Switch)

Create an organization and switch between them.

// Create org via generic entities
const me = await SDK.me();
await SDK.createEntity({
  workspaceTenantId: me.workspaceTenantId!,
  kind: 'org',
  properties: { name: 'Acme', slug: 'acme', ownerId: me.id },
});
// Switch org is now modeled via session/tenant context, not a legacy method

UI pattern:

• List orgs via ea.getUserOrganizations() (canonical OrganizationSummary[])
• Button to create org (name + slug)
• Dropdown to switch active org

Sessions (List, Current, Revoke)

List sessions and allow the user to revoke sessions.

// Sessions are managed via auth endpoints; generic model does not expose legacy session list/revoke here

UI pattern:

• Table of sessions (device, createdAt, lastActive)
• Badge on the current session
• Action to revoke others

Protected Routes

Use a simple guard to render authenticated content.

function Protected({ children }: { children: React.ReactNode }) {
  const [token, setToken] = useState(ea.getAccessToken());
  useEffect(() => ea.onTokenChange(setToken), []);
  if (!token) return <div>Please log in</div>;
  return <>{children}</>;
}

Putting it Together (React/Next.js)

See the Framework Integration guide for ready‑to‑use hooks and providers, including useSessions() and useOrganizations() examples.

Troubleshooting

• If session revocation doesn’t reflect, ensure you reload the list after actions.
• If org switching appears no‑op, confirm the user has access to the target org and re‑fetch orgs after switching.
• For cross‑origin web apps, set EA_CROSS_ORIGIN_COOKIES=true on the server.