@kerne/react 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +83 -0
- package/dist/index.cjs +791 -106
- package/dist/index.d.cts +503 -23
- package/dist/index.d.ts +503 -23
- package/dist/index.js +757 -103
- package/package.json +19 -12
package/LICENSE
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @kerne/react
|
|
2
|
+
|
|
3
|
+
Hooks and guard components for integrating Kerne authentication and entitlements into a React app. Never holds a secret key - only your public `appId`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @kerne/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { KerneProvider } from '@kerne/react';
|
|
15
|
+
|
|
16
|
+
function App() {
|
|
17
|
+
return (
|
|
18
|
+
<KerneProvider appId={process.env.NEXT_PUBLIC_KERNE_APP_ID!}>
|
|
19
|
+
<YourApp />
|
|
20
|
+
</KerneProvider>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Authentication
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { useAuth } from '@kerne/react';
|
|
29
|
+
|
|
30
|
+
function LoginForm() {
|
|
31
|
+
const { login, isLoading } = useAuth();
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<button onClick={() => login({ email, password })}>
|
|
35
|
+
{isLoading ? 'Loading...' : 'Log in'}
|
|
36
|
+
</button>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Gating a feature
|
|
42
|
+
|
|
43
|
+
`Allows` (and the underlying `useAllows` hook) check the logged-in user automatically - no scope to pass, the SDK already knows who's authenticated.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { Allows } from '@kerne/react';
|
|
47
|
+
|
|
48
|
+
function ExportButton() {
|
|
49
|
+
return (
|
|
50
|
+
<Allows key="export_pdf" fallback={<UpgradePrompt />}>
|
|
51
|
+
<button onClick={exportPdf}>Export as PDF</button>
|
|
52
|
+
</Allows>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
For the full detail behind a check (limit/used/remaining, not just a boolean), use `useCheck` instead of `useAllows`.
|
|
58
|
+
|
|
59
|
+
## Checkout & billing portal
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
import { useCheckout, usePortal } from '@kerne/react';
|
|
63
|
+
|
|
64
|
+
const { openCheckout } = useCheckout();
|
|
65
|
+
const { openPortal } = usePortal();
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Core Hooks
|
|
69
|
+
|
|
70
|
+
- `useAuth`: login, signup, logout, password reset, email verification.
|
|
71
|
+
- `useUser`: the current authenticated user's profile.
|
|
72
|
+
- `useAllows` / `useCheck`: feature access, boolean or full detail.
|
|
73
|
+
- `useUsage`, `useEntitlements`: usage and full entitlement lists for the current user.
|
|
74
|
+
- `useSubscription`, `usePlans`: the current subscription and the tenant's public plan catalog.
|
|
75
|
+
- `useCheckout`, `usePortal`: hosted checkout and billing-portal sessions.
|
|
76
|
+
|
|
77
|
+
## Documentation
|
|
78
|
+
|
|
79
|
+
For full React SDK documentation and guides, visit [docs.kerne.io](https://docs.kerne.io/sdks/client/react).
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
MIT
|