Entity Auth

React SDK (@entityauth/react)

Provider and hooks for Entity Auth in React apps

Install

pnpm add @entityauth/react @entityauth/auth-client

Initialize the SDK once at app startup

Call init from @entityauth/auth-client early (e.g. in your root file) so the SDK knows your workspace and API base URL.

// app/init-entity-auth.ts (or similar)
import { init as initEA } from '@entityauth/auth-client';

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

Usage

Wrap your app with the provider and use the hooks anywhere in your component tree.

// app/layout.tsx (Next.js App Router) or App root in CRA/Vite
import './init-entity-auth';
import { EntityAuthProvider } from '@entityauth/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <EntityAuthProvider>{children}</EntityAuthProvider>
      </body>
    </html>
  );
}

Access auth state and user

import { useEntityAuth, useMe } from '@entityauth/react';

export function Example() {
  const { isAuthenticated, loading, login, logout } = useEntityAuth();
  const { me } = useMe<{ id: string; email: string | null }>();

  if (loading) return <div>Loading…</div>;
  return (
    <div>
      <div>Signed in: {String(isAuthenticated)}</div>
      <pre>{JSON.stringify(me, null, 2)}</pre>
      <button onClick={() => login({ email: 'a@b.com', password: 'secret' })}>Login</button>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
}

User profile helpers

import { useUserProfile } from '@entityauth/react/useUserProfile';

export function Profile() {
  const { me, oauthCredentials, hasPasswordCredential, isLoading } = useUserProfile();
  if (isLoading) return <div>Loading…</div>;
  return (
    <pre>{JSON.stringify({ me, oauthCredentials, hasPasswordCredential }, null, 2)}</pre>
  );
}

API

  • EntityAuthProvider
  • useEntityAuth(){ ea, accessToken, loading, isAuthenticated, login, logout }
  • useMe<T>(){ me: T | null, loading }
  • useUserProfile(){ me, oauthCredentials, hasPasswordCredential, isLoading }

Notes

  • Peer deps: react >= 18.
  • Framework-agnostic: works with CRA, Vite, Remix, Next.js.
  • For SSR frameworks (e.g., Next.js), call init on the client side and use the provider in client components.
  • The package requires @entityauth/auth-client to be initialized once.

See also