WebGuard Frontend Documentation

WebGuard Frontend is a Next.js-based dashboard UI designed to work inside the FireAPI Tools Marketplace.
It supports FireAPI SSO login and session persistence without needing a traditional signup/login system.

🚀 Installation

⚙️ Environment Configuration

Create your .env file using the sample:

Required variables

NEXT_PUBLIC_WEBGUARD_API_URL → WebGuard backend URL
(example: http://localhost:4010)

NEXT_PUBLIC_FIREAPI_SSO_VERIFY_URL → FireAPI verification endpoint
(example: https://api.fireapi.io/api/sso/verify)

NEXT_PUBLIC_API_URL → Backend API base URL
(example: http://localhost:4010/api)

▶️ Run Development Server

Now open:

http://localhost:5007

WebGuard does not use email/password login.

SSO Handshake Flow

User is redirected from FireAPI to:
/auth/sso?token=...

The SSOPage reads the token from the URL.

Token is verified using FireAPI.

Verified session data is sent to the backend.

Session is stored in localStorage using sessionManager.

🔒 Protecting Routes

To protect dashboard pages, use:

sessionManager.isAuthenticated()

sessionManager.get() for user metadata

📁 Project Structure

src/
├── app/            # Next.js App Router (Pages & Layouts)
│   ├── auth/       # SSO and Error pages
│   └── app/        # Main Dashboard (Protected area)
├── components/     # Reusable UI components
├── lib/            # Session manager, API helpers
└── types/          # TypeScript interfaces

💡 Developer Notes

Add http://localhost:5007 into FireAPI backend allowed origins for local SSO testing.

Tailwind CSS v4 is used for styling and modern dashboard UI.

WebGuard Frontend Documentation

🚀 Installation#

⚙️ Environment Configuration#

Required variables#

▶️ Run Development Server#

🔐 FireAPI SSO Integration (How Login Works)#

SSO Handshake Flow#

🔒 Protecting Routes#

📁 Project Structure#

💡 Developer Notes#