https://github.com/kennethnnabuife/auth-flow-kit
A global authentication state toolkit for React with prebuilt UI screens and a globally accessible useAuth() hook. No separate stores, persistence layers, or setup files required. Integrates directly at the app layout level, with auth state remaining consistent across refreshes without manual persistence.
https://github.com/kennethnnabuife/auth-flow-kit
auth authentication developer-tools fork-for-contribution frontend-authentication global-state-management javascript javascript-library npm npm-package open-source open-source-community open-source-library open-source-project open-source-tools react react-library review typescript typescript-library
Last synced: 4 days ago
JSON representation
A global authentication state toolkit for React with prebuilt UI screens and a globally accessible useAuth() hook. No separate stores, persistence layers, or setup files required. Integrates directly at the app layout level, with auth state remaining consistent across refreshes without manual persistence.
- Host: GitHub
- URL: https://github.com/kennethnnabuife/auth-flow-kit
- Owner: kennethnnabuife
- License: mit
- Created: 2025-11-19T20:55:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-02-03T00:21:58.000Z (9 days ago)
- Last Synced: 2026-02-03T13:49:08.698Z (8 days ago)
- Topics: auth, authentication, developer-tools, fork-for-contribution, frontend-authentication, global-state-management, javascript, javascript-library, npm, npm-package, open-source, open-source-community, open-source-library, open-source-project, open-source-tools, react, react-library, review, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 54
- Watchers: 0
- Forks: 21
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @kendevelops/auth-flow-kit
A beginner‑friendly authentication toolkit for **React** and **Next.js 13–16 (App Router)**.
This is literally the **simplest and shortest setup** for your Next.js apps.
You do **not** need extra wrapper files.
---
It gives you:
- Global auth state (Redux / Zustand‑style, but zero setup)
- Prebuilt auth UI screens (Login, Signup, Reset)
- A simple `useAuth()` hook you can use anywhere
This library is intentionally designed to be **easy to understand**, even if you are new to authentication.
---
## 🔄 No Persistence Setup Needed
auth-flow-kit keeps authentication state in memory by default, and automatically restores the session when the app reloads.
**What this means in practice:**
From a developer’s point of view:
> “I refresh the page and I’m still logged in.”
That’s it.
---
## 📦 Installation
```bash
npm install @kendevelops/auth-flow-kit
```
```bash
yarn add @kendevelops/auth-flow-kit
```
```bash
bun add @kendevelops/auth-flow-kit
```
---
# 🚀 Usage with Next.js App Router (Recommended)
---
## Step 1: Wrap your app in `app/layout.tsx`
> Yes, `layout.tsx` can be a client component when it hosts providers. This is normal.
```tsx
// app/layout.tsx
"use client";
import { AuthProvider } from "@kendevelops/auth-flow-kit";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
This makes auth **global** and available everywhere.
---
## Step 2: Use auth screens in `app/page.tsx`
```tsx
// app/page.tsx
"use client";
import {
LoginScreen,
SignupScreen,
PasswordResetScreen,
Protected,
useAuth,
} from "@kendevelops/auth-flow-kit";
import { useEffect, useState } from "react";
export default function Home() {
const { user } = useAuth();
const [page, setPage] = useState<"login" | "signup" | "reset" | "dashboard">(
"login"
);
// Keep UI in sync with auth (important on refresh)
useEffect(() => {
if (user) setPage("dashboard");
}, [user]);
return (
<>
{page === "login" && }
{page === "signup" && }
{page === "reset" && }
{page === "dashboard" && (
)}
>
);
}
function Dashboard() {
const { user, logout } = useAuth();
return (
Dashboard
Welcome {user?.name}
Logout
);
}
```
---
# 🔒 Protecting Components
Wrap anything that requires authentication:
```tsx
```
- While loading → shows a loading state
- If not authenticated → renders nothing (or redirects if configured)
---
# 🧠 Using `useAuth()` Anywhere
```tsx
"use client";
import { useAuth } from "@kendevelops/auth-flow-kit";
export default function Navbar() {
const { user, logout } = useAuth();
return (
{user ? (
<>
Hello {user.name}
Logout
>
) : (
Not logged in
)}
);
}
```
---
# 🌐 React (Non‑Next.js) Usage
```tsx
import { AuthProvider, LoginScreen } from "@kendevelops/auth-flow-kit";
export default function App() {
return (
);
}
```
---
# 🎯 Who This Library Is For
- Developers who want to go straight into building their app before worrying about auth
- MVP builders
- SaaS dashboards
- Internal tools
- Learners who want to understand authentication
If you already have a backend and just want auth to **work**, this library is for you.
---
# 🎉 Summary
**auth-flow-kit** gives you:
- Global auth state (no reducers, no stores)
- Prebuilt auth UI screens
- Simple backend requirements
- Refresh‑safe authentication
- Works with Next.js and plain React
Authentication, without the chaos.