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
EntityAuthProvideruseEntityAuth()→{ 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
initon the client side and use the provider in client components. - The package requires
@entityauth/auth-clientto be initialized once.
See also
- Framework guide: /docs/frameworks
- Convex React adapter: /docs/integrations/convex-react