@ascendkit/nextjs 0.3.3 → 0.3.5
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/README.md +153 -0
- package/dist/shared/types.d.ts +2 -0
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/shared/version.d.ts +1 -1
- package/dist/shared/version.js +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# @ascendkit/nextjs
|
|
2
|
+
|
|
3
|
+
Authentication, email templates, surveys, and user journeys for Next.js and React apps.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ascendkit/nextjs
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires `next >= 14` and `react >= 18` as peer dependencies. Set up environment variables with the CLI:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install -g @ascendkit/cli
|
|
15
|
+
ascendkit init
|
|
16
|
+
ascendkit set-env pk_dev_your_public_key
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Auth setup (4 steps)
|
|
20
|
+
|
|
21
|
+
### 1. Create the auth runtime
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
// lib/auth.ts
|
|
25
|
+
import { createAscendKitAuthRuntime } from "@ascendkit/nextjs/server";
|
|
26
|
+
|
|
27
|
+
export const authRuntime = createAscendKitAuthRuntime();
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Reads `ASCENDKIT_ENV_KEY`, `ASCENDKIT_SECRET_KEY`, and `ASCENDKIT_API_URL` from your environment automatically.
|
|
31
|
+
|
|
32
|
+
### 2. Add the API route
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
// app/api/auth/[...all]/route.ts
|
|
36
|
+
import { authRuntime } from "@/lib/auth";
|
|
37
|
+
import { createAuthRouteHandlers } from "@ascendkit/nextjs/server";
|
|
38
|
+
|
|
39
|
+
export const { GET, POST } = createAuthRouteHandlers(authRuntime);
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 3. Add the provider
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
// app/layout.tsx
|
|
46
|
+
import { AscendKitProvider } from "@ascendkit/nextjs";
|
|
47
|
+
|
|
48
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
49
|
+
return (
|
|
50
|
+
<html lang="en">
|
|
51
|
+
<body>
|
|
52
|
+
<AscendKitProvider>{children}</AscendKitProvider>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 4. Add auth pages
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
// app/login/page.tsx
|
|
63
|
+
import { Login } from "@ascendkit/nextjs";
|
|
64
|
+
|
|
65
|
+
export default function LoginPage() {
|
|
66
|
+
return <Login onSuccess={() => window.location.href = "/dashboard"} />;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
// app/signup/page.tsx
|
|
72
|
+
import { SignUp } from "@ascendkit/nextjs";
|
|
73
|
+
|
|
74
|
+
export default function SignUpPage() {
|
|
75
|
+
return <SignUp onSuccess={() => window.location.href = "/dashboard"} />;
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Social login buttons appear automatically when providers are enabled via the CLI or portal.
|
|
80
|
+
|
|
81
|
+
## Components
|
|
82
|
+
|
|
83
|
+
All components render inside `<AscendKitProvider>`.
|
|
84
|
+
|
|
85
|
+
| Component | Description |
|
|
86
|
+
|-----------|-------------|
|
|
87
|
+
| `<Login />` | Sign-in form (email/password + social) |
|
|
88
|
+
| `<SignUp />` | Sign-up form (email/password + social) |
|
|
89
|
+
| `<AscendKitAuthCard />` | All-in-one auth card (`view="SIGN_IN"`, `"SIGN_UP"`, `"FORGOT_PASSWORD"`) |
|
|
90
|
+
| `<AscendKitUserButton />` | User avatar with sign-out dropdown |
|
|
91
|
+
| `<SignInButton />` | Opens auth modal or redirects (`mode="modal"` or `"redirect"`) |
|
|
92
|
+
| `<SignUpButton />` | Opens auth modal or redirects |
|
|
93
|
+
| `<SocialButton provider="google" />` | Individual social login button |
|
|
94
|
+
| `<SignedIn>` | Renders children only when authenticated |
|
|
95
|
+
| `<SignedOut>` | Renders children only when not authenticated |
|
|
96
|
+
| `<AuthLoading>` | Renders children while auth state is loading |
|
|
97
|
+
|
|
98
|
+
## Hooks
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { useAscendKit } from "@ascendkit/nextjs";
|
|
102
|
+
|
|
103
|
+
const { user, isLoaded, isAuthenticated, signOut } = useAscendKit();
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import { useAuthModal } from "@ascendkit/nextjs";
|
|
108
|
+
|
|
109
|
+
const { isOpen, view, open, close } = useAuthModal();
|
|
110
|
+
open("sign-in"); // or "sign-up"
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
import { useAnalytics } from "@ascendkit/nextjs";
|
|
115
|
+
|
|
116
|
+
const { track, flush } = useAnalytics();
|
|
117
|
+
track("checkout.completed", { total: 99.99 });
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Server-side analytics
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
import { Analytics } from "@ascendkit/nextjs/server";
|
|
124
|
+
|
|
125
|
+
const analytics = new Analytics();
|
|
126
|
+
analytics.track("usr_456", "checkout.completed", { total: 99.99 });
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Environment variables
|
|
130
|
+
|
|
131
|
+
| Variable | Side | Description |
|
|
132
|
+
|----------|------|-------------|
|
|
133
|
+
| `ASCENDKIT_ENV_KEY` | Server | Project public key |
|
|
134
|
+
| `NEXT_PUBLIC_ASCENDKIT_ENV_KEY` | Client | Same key, exposed to browser |
|
|
135
|
+
| `ASCENDKIT_SECRET_KEY` | Server | Secret key (analytics, admin) |
|
|
136
|
+
| `ASCENDKIT_API_URL` | Server | Backend URL (default: `https://api.ascendkit.dev`) |
|
|
137
|
+
| `NEXT_PUBLIC_ASCENDKIT_API_URL` | Client | Same URL, exposed to browser |
|
|
138
|
+
| `APP_URL` | Server | Public app URL for auth callbacks |
|
|
139
|
+
|
|
140
|
+
## Other React frameworks
|
|
141
|
+
|
|
142
|
+
The React hooks and components work in any React 18+ framework (Vite, Remix, Astro). The server-side auth runtime (`createAscendKitAuthRuntime`, `createAuthRouteHandlers`) requires Next.js.
|
|
143
|
+
|
|
144
|
+
## Docs
|
|
145
|
+
|
|
146
|
+
- [Full documentation](https://ascendkit.dev/docs)
|
|
147
|
+
- [Next.js integration guide](https://ascendkit.dev/docs/integration)
|
|
148
|
+
- [Python SDK](https://ascendkit.dev/docs/python)
|
|
149
|
+
- [LLM-friendly docs](https://ascendkit.dev/docs/llms.txt)
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT
|
package/dist/shared/types.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yEAAyE;IACzE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE;QACR,iBAAiB,EAAE,OAAO,CAAC;QAC3B,aAAa,EAAE,OAAO,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAC;KAC9B,CAAC,CAAC;IACH,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACrD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yEAAyE;IACzE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE;QACR,iBAAiB,EAAE,OAAO,CAAC;QAC3B,aAAa,EAAE,OAAO,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAC;KAC9B,CAAC,CAAC;IACH,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACrD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB"}
|
package/dist/shared/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "0.3.
|
|
1
|
+
export declare const SDK_VERSION = "0.3.5";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
package/dist/shared/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const SDK_VERSION = "0.3.
|
|
1
|
+
export const SDK_VERSION = "0.3.5";
|