{"repo":"kennethnnabuife/auth-flow-kit","free":true,"listed":false,"github":"https://github.com/kennethnnabuife/auth-flow-kit","clone":"git clone https://github.com/kennethnnabuife/auth-flow-kit.git","description":"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.","language":"TypeScript","stars":257,"topics":["auth","authentication","developer-tools","fork-for-contribution","frontend-authentication","global-state-management","javascript","javascript-library","npm","npm-package"],"license":"MIT","category":"auth-billing-email","readme_excerpt":"@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 --- 🚀 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. This makes auth global and available everywhere. --- Step 2: Use auth screens in app/page.tsx --- 🔒 Protecting Components Wrap anything that requires authentication: - While loading → shows a loading state - If not authenticated → renders nothing (or redirects if configured) --- 🧠 Using useAuth() Anywhere --- 🌐 React (Non‑Next.js) Usage --- 🛠 Backend Requirements This section defines the exact API contract your backend must implement. The library makes three types of requests and expects specific JSON response ","default_branch":null,"files":null,"tree":[],"storefront":"/r/kennethnnabuife","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/kennethnnabuife/auth-flow-kit/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}