[Frontend] Create Auth Initializer Component and App Providers

[yusuftomilola]

Bootstrap the application with global providers and ensure authentication state is hydrated before any protected page renders.

Requirements

providers.tsx — Wraps the app in:

• QueryClientProvider (React Query)
• Any other global providers

AuthInitializer component — A use client component that calls useAuthStore.getState().initialize() on mount using useEffect. Must be included in the root layout so it runs on every page load.

Middleware (middleware.ts) — Next.js edge middleware that:

• Checks for the isAuthenticated cookie
• Redirects / → /dashboard
• Redirects unauthenticated users from /(dashboard)/* routes to /login
• Redirects authenticated users away from /(auth)/* routes to /dashboard

Acceptance Criteria

• initialize() runs once on app boot
• Unauthenticated access to /dashboard redirects to /login
• Authenticated access to /login redirects to /dashboard

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Bug-Hunter-X]

@Bug-Hunter-X has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m excited to bootstrap the app’s global providers and auth hydration in #448 for AssetsUp, ensuring React Query is set up app-wide and authentication state initializes reliably on every page load before protected routes render — a solid foundation for secure, performant routing in this Next.js App Router project. With strong experience in Next.js 14+ (middleware for cookie-based auth checks, Zustand/Pinia-like stores for auth, TanStack Query setup, useEffect hydration patterns), I’ve wired similar auth initializers and middleware redirects before. My approach: create providers.tsx exporting a Providers wrapper with <QueryClientProvider client={new QueryClient()}> (plus any others like ThemeProvider if needed); build a 'use client' AuthInitializer component that uses useEffect(() => { useAuthStore.getState().initialize(); }, []) to run initialize() once on mount (empty deps for single execution); place in root layout.tsx right after providers; implement middleware.ts at root level to: read isAuthenticated cookie (cookies().get('isAuthenticated')?.value === 'true'), redirect / → /dashboard if authenticated, redirect /(dashboard)/* → /login if !authenticated, and redirect /(auth)/* (login/register) → /dashboard if authenticated (using pathname.startsWith checks and NextResponse.redirect); add matcher config to target relevant routes. This ensures initialize() runs once per boot, middleware enforces auth rules early (edge runtime safe), and acceptance criteria are met (redirects work, no stale auth) — I can deliver a clean, testable PR fast with comments and verification steps.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Bug-Hunter-X to this issue.

[Xaxxoo]

@Xaxxoo has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi,

Can I take up on this issue please ?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Xaxxoo to this issue.

[drips-wave]

Congratulations, @Xaxxoo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @Xaxxoo: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Itodo-S]

@Itodo-S has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’d like to take on this task because application bootstrapping and authentication orchestration are foundational to frontend architecture. Ensuring auth state is fully hydrated before protected routes render prevents flickering, race conditions, and inconsistent UI states all of which directly impact user experience and security.

This task is especially important because it establishes:

A single, reliable initialization flow for authentication.

Clean separation between global app configuration and page logic.

Proper route-level access control using middleware.

A scalable structure for adding more global providers in the future.

Implementing providers.tsx, AuthInitializer, and middleware.ts correctly ensures the app behaves predictably on every page load both client-side and at the edge.

I’m particularly interested in this because it combines state management, React lifecycle control, and Next.js edge middleware all critical for production-grade frontend systems.

Relevant Experience

Next.js App Router Architecture: Experience structuring root layouts, global providers, and client/server boundaries correctly.

Authentication Flows: Implemented auth hydration patterns to prevent protected pages from rendering before state is ready.

Zustand / Global State Management: Comfortable triggering store initialization via useEffect while preventing duplicate calls.

React Query Integration: Experience setting up QueryClientProvider at the root level for consistent caching and data synchronization.

Next.js Middleware: Built edge middleware for cookie-based redirects and route guarding across auth and dashboard segments.

Race Condition Prevention: Strong understanding of how to avoid double renders, hydration mismatches, and auth flickers.

My focus would be to ensure:

initialize() runs exactly once at boot.

Middleware logic is deterministic and edge-safe.

No protected page renders before auth state is confirmed.

The architecture remains clean and extensible.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Itodo-S to this issue.

[Mkalbani]

@Mkalbani has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hey Maintainers. Can I work on this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mkalbani to this issue.

[drips-wave]

Congratulations, @Mkalbani! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @Mkalbani: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊