@kendevelops/auth-flow-kit 1.2.2 → 1.2.4

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.
Files changed (6) hide show
  1. package/README.md +239 -239
  2. package/dist/index.cjs +229 -43
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +229 -43
  5. package/dist/index.js.map +1 -1
  6. package/package.json +45 -45
package/README.md CHANGED
@@ -1,239 +1,239 @@
1
- # @kendevelops/auth-flow-kit
2
-
3
- A beginner‑friendly authentication toolkit for **React** and **Next.js 13–16 (App Router)**.
4
-
5
- This is literally the **simplest and shortest setup** for your Next.js apps.
6
- You do **not** need extra wrapper files.
7
-
8
- ---
9
-
10
- It gives you:
11
-
12
- - Global auth state (Redux / Zustand‑style, but zero setup)
13
- - Prebuilt auth UI screens (Login, Signup, Reset)
14
- - A simple `useAuth()` hook you can use anywhere
15
-
16
- This library is intentionally designed to be **easy to understand**, even if you are new to authentication.
17
-
18
- ---
19
-
20
- ## 🔄 No Persistence Setup Needed
21
-
22
- auth-flow-kit keeps authentication state in memory by default, and automatically restores the session when the app reloads.
23
-
24
- **What this means in practice:**
25
-
26
- From a developer’s point of view:
27
-
28
- > “I refresh the page and I’m still logged in.”
29
-
30
- That’s it.
31
-
32
- ---
33
-
34
- ## 📦 Installation
35
-
36
- ```bash
37
- npm install @kendevelops/auth-flow-kit
38
- ```
39
-
40
- ```bash
41
- yarn add @kendevelops/auth-flow-kit
42
- ```
43
-
44
- ```bash
45
- bun add @kendevelops/auth-flow-kit
46
- ```
47
-
48
- ---
49
-
50
- # 🚀 Usage with Next.js App Router (Recommended)
51
-
52
- ---
53
-
54
- ## Step 1: Wrap your app in `app/layout.tsx`
55
-
56
- > Yes, `layout.tsx` can be a client component when it hosts providers. This is normal.
57
-
58
- ```tsx
59
- // app/layout.tsx
60
- "use client";
61
-
62
- import { AuthProvider } from "@kendevelops/auth-flow-kit";
63
-
64
- export default function RootLayout({
65
- children,
66
- }: {
67
- children: React.ReactNode;
68
- }) {
69
- return (
70
- <html lang="en">
71
- <body>
72
- <AuthProvider
73
- config={{
74
- baseURL: "https://your-backend-url.com",
75
- endpoints: {
76
- login: "/auth/login",
77
- signup: "/auth/signup",
78
- forgot: "/auth/forgot",
79
- },
80
- }}
81
- >
82
- {children}
83
- </AuthProvider>
84
- </body>
85
- </html>
86
- );
87
- }
88
- ```
89
-
90
- This makes auth **global** and available everywhere.
91
-
92
- ---
93
-
94
- ## Step 2: Use auth screens in `app/page.tsx`
95
-
96
- ```tsx
97
- // app/page.tsx
98
- "use client";
99
-
100
- import {
101
- LoginScreen,
102
- SignupScreen,
103
- PasswordResetScreen,
104
- Protected,
105
- useAuth,
106
- } from "@kendevelops/auth-flow-kit";
107
-
108
- import { useEffect, useState } from "react";
109
-
110
- export default function Home() {
111
- const { user } = useAuth();
112
- const [page, setPage] = useState<"login" | "signup" | "reset" | "dashboard">(
113
- "login"
114
- );
115
-
116
- // Keep UI in sync with auth (important on refresh)
117
- useEffect(() => {
118
- if (user) setPage("dashboard");
119
- }, [user]);
120
-
121
- return (
122
- <>
123
- {page === "login" && <LoginScreen />}
124
- {page === "signup" && <SignupScreen />}
125
- {page === "reset" && <PasswordResetScreen />}
126
-
127
- {page === "dashboard" && (
128
- <Protected>
129
- <Dashboard />
130
- </Protected>
131
- )}
132
- </>
133
- );
134
- }
135
-
136
- function Dashboard() {
137
- const { user, logout } = useAuth();
138
-
139
- return (
140
- <div>
141
- <h1>Dashboard</h1>
142
- <p>Welcome {user?.name}</p>
143
- <button onClick={logout}>Logout</button>
144
- </div>
145
- );
146
- }
147
- ```
148
-
149
- ---
150
-
151
- # 🔒 Protecting Components
152
-
153
- Wrap anything that requires authentication:
154
-
155
- ```tsx
156
- <Protected>
157
- <SecretArea />
158
- </Protected>
159
- ```
160
-
161
- - While loading → shows a loading state
162
- - If not authenticated → renders nothing (or redirects if configured)
163
-
164
- ---
165
-
166
- # 🧠 Using `useAuth()` Anywhere
167
-
168
- ```tsx
169
- "use client";
170
- import { useAuth } from "@kendevelops/auth-flow-kit";
171
-
172
- export default function Navbar() {
173
- const { user, logout } = useAuth();
174
-
175
- return (
176
- <nav>
177
- {user ? (
178
- <>
179
- <span>Hello {user.name}</span>
180
- <button onClick={logout}>Logout</button>
181
- </>
182
- ) : (
183
- <span>Not logged in</span>
184
- )}
185
- </nav>
186
- );
187
- }
188
- ```
189
-
190
- ---
191
-
192
- # 🌐 React (Non‑Next.js) Usage
193
-
194
- ```tsx
195
- import { AuthProvider, LoginScreen } from "@kendevelops/auth-flow-kit";
196
-
197
- export default function App() {
198
- return (
199
- <AuthProvider
200
- config={{
201
- baseURL: "https://your-backend-url.com",
202
- endpoints: {
203
- login: "/auth/login",
204
- signup: "/auth/signup",
205
- forgot: "/auth/forgot",
206
- },
207
- }}
208
- >
209
- <LoginScreen />
210
- </AuthProvider>
211
- );
212
- }
213
- ```
214
-
215
- ---
216
-
217
- # 🎯 Who This Library Is For
218
-
219
- - Developers who want to go straight into building their app before worrying about auth
220
- - MVP builders
221
- - SaaS dashboards
222
- - Internal tools
223
- - Learners who want to understand authentication
224
-
225
- If you already have a backend and just want auth to **work**, this library is for you.
226
-
227
- ---
228
-
229
- # 🎉 Summary
230
-
231
- **auth-flow-kit** gives you:
232
-
233
- - Global auth state (no reducers, no stores)
234
- - Prebuilt auth UI screens
235
- - Simple backend requirements
236
- - Refresh‑safe authentication
237
- - Works with Next.js and plain React
238
-
239
- Authentication, without the chaos.
1
+ # @kendevelops/auth-flow-kit
2
+
3
+ A beginner‑friendly authentication toolkit for **React** and **Next.js 13–16 (App Router)**.
4
+
5
+ This is literally the **simplest and shortest setup** for your Next.js apps.
6
+ You do **not** need extra wrapper files.
7
+
8
+ ---
9
+
10
+ It gives you:
11
+
12
+ - Global auth state (Redux / Zustand‑style, but zero setup)
13
+ - Prebuilt auth UI screens (Login, Signup, Reset)
14
+ - A simple `useAuth()` hook you can use anywhere
15
+
16
+ This library is intentionally designed to be **easy to understand**, even if you are new to authentication.
17
+
18
+ ---
19
+
20
+ ## 🔄 No Persistence Setup Needed
21
+
22
+ auth-flow-kit keeps authentication state in memory by default, and automatically restores the session when the app reloads.
23
+
24
+ **What this means in practice:**
25
+
26
+ From a developer’s point of view:
27
+
28
+ > “I refresh the page and I’m still logged in.”
29
+
30
+ That’s it.
31
+
32
+ ---
33
+
34
+ ## 📦 Installation
35
+
36
+ ```bash
37
+ npm install @kendevelops/auth-flow-kit
38
+ ```
39
+
40
+ ```bash
41
+ yarn add @kendevelops/auth-flow-kit
42
+ ```
43
+
44
+ ```bash
45
+ bun add @kendevelops/auth-flow-kit
46
+ ```
47
+
48
+ ---
49
+
50
+ # 🚀 Usage with Next.js App Router (Recommended)
51
+
52
+ ---
53
+
54
+ ## Step 1: Wrap your app in `app/layout.tsx`
55
+
56
+ > Yes, `layout.tsx` can be a client component when it hosts providers. This is normal.
57
+
58
+ ```tsx
59
+ // app/layout.tsx
60
+ "use client";
61
+
62
+ import { AuthProvider } from "@kendevelops/auth-flow-kit";
63
+
64
+ export default function RootLayout({
65
+ children,
66
+ }: {
67
+ children: React.ReactNode;
68
+ }) {
69
+ return (
70
+ <html lang="en">
71
+ <body>
72
+ <AuthProvider
73
+ config={{
74
+ baseURL: "https://your-backend-url.com",
75
+ endpoints: {
76
+ login: "/auth/login",
77
+ signup: "/auth/signup",
78
+ forgot: "/auth/forgot",
79
+ },
80
+ }}
81
+ >
82
+ {children}
83
+ </AuthProvider>
84
+ </body>
85
+ </html>
86
+ );
87
+ }
88
+ ```
89
+
90
+ This makes auth **global** and available everywhere.
91
+
92
+ ---
93
+
94
+ ## Step 2: Use auth screens in `app/page.tsx`
95
+
96
+ ```tsx
97
+ // app/page.tsx
98
+ "use client";
99
+
100
+ import {
101
+ LoginScreen,
102
+ SignupScreen,
103
+ PasswordResetScreen,
104
+ Protected,
105
+ useAuth,
106
+ } from "@kendevelops/auth-flow-kit";
107
+
108
+ import { useEffect, useState } from "react";
109
+
110
+ export default function Home() {
111
+ const { user } = useAuth();
112
+ const [page, setPage] = useState<"login" | "signup" | "reset" | "dashboard">(
113
+ "login"
114
+ );
115
+
116
+ // Keep UI in sync with auth (important on refresh)
117
+ useEffect(() => {
118
+ if (user) setPage("dashboard");
119
+ }, [user]);
120
+
121
+ return (
122
+ <>
123
+ {page === "login" && <LoginScreen />}
124
+ {page === "signup" && <SignupScreen />}
125
+ {page === "reset" && <PasswordResetScreen />}
126
+
127
+ {page === "dashboard" && (
128
+ <Protected>
129
+ <Dashboard />
130
+ </Protected>
131
+ )}
132
+ </>
133
+ );
134
+ }
135
+
136
+ function Dashboard() {
137
+ const { user, logout } = useAuth();
138
+
139
+ return (
140
+ <div>
141
+ <h1>Dashboard</h1>
142
+ <p>Welcome {user?.name}</p>
143
+ <button onClick={logout}>Logout</button>
144
+ </div>
145
+ );
146
+ }
147
+ ```
148
+
149
+ ---
150
+
151
+ # 🔒 Protecting Components
152
+
153
+ Wrap anything that requires authentication:
154
+
155
+ ```tsx
156
+ <Protected>
157
+ <SecretArea />
158
+ </Protected>
159
+ ```
160
+
161
+ - While loading → shows a loading state
162
+ - If not authenticated → renders nothing (or redirects if configured)
163
+
164
+ ---
165
+
166
+ # 🧠 Using `useAuth()` Anywhere
167
+
168
+ ```tsx
169
+ "use client";
170
+ import { useAuth } from "@kendevelops/auth-flow-kit";
171
+
172
+ export default function Navbar() {
173
+ const { user, logout } = useAuth();
174
+
175
+ return (
176
+ <nav>
177
+ {user ? (
178
+ <>
179
+ <span>Hello {user.name}</span>
180
+ <button onClick={logout}>Logout</button>
181
+ </>
182
+ ) : (
183
+ <span>Not logged in</span>
184
+ )}
185
+ </nav>
186
+ );
187
+ }
188
+ ```
189
+
190
+ ---
191
+
192
+ # 🌐 React (Non‑Next.js) Usage
193
+
194
+ ```tsx
195
+ import { AuthProvider, LoginScreen } from "@kendevelops/auth-flow-kit";
196
+
197
+ export default function App() {
198
+ return (
199
+ <AuthProvider
200
+ config={{
201
+ baseURL: "https://your-backend-url.com",
202
+ endpoints: {
203
+ login: "/auth/login",
204
+ signup: "/auth/signup",
205
+ forgot: "/auth/forgot",
206
+ },
207
+ }}
208
+ >
209
+ <LoginScreen />
210
+ </AuthProvider>
211
+ );
212
+ }
213
+ ```
214
+
215
+ ---
216
+
217
+ # 🎯 Who This Library Is For
218
+
219
+ - Developers who want to go straight into building their app before worrying about auth
220
+ - MVP builders
221
+ - SaaS dashboards
222
+ - Internal tools
223
+ - Learners who want to understand authentication
224
+
225
+ If you already have a backend and just want auth to **work**, this library is for you.
226
+
227
+ ---
228
+
229
+ # 🎉 Summary
230
+
231
+ **auth-flow-kit** gives you:
232
+
233
+ - Global auth state (no reducers, no stores)
234
+ - Prebuilt auth UI screens
235
+ - Simple backend requirements
236
+ - Refresh‑safe authentication
237
+ - Works with Next.js and plain React
238
+
239
+ Authentication, without the chaos.