---
name: add-super-admin-login
description: Add a Google SSO login (OAuth2 PKCE via Janus) to a sandbox project. Use when the user asks to add a login for an internal project, a super admin login, protect routes, add authentication, or add a logout button.
metadata:
  category: Implementation
---

# Skill: Add Super Admin Login

Add Google SSO authentication via OAuth2 Authorization Code + PKCE through **Janus** (Humand's authorization server). No client secret — this is a public client. The token is stored in `sessionStorage`.

## When to use

Trigger this skill when the user asks for any of:

- "Add a login for an internal project"
- "Add a super admin login"
- "Protect the app / routes"
- "Add authentication"
- "Add logout"

The target project is a super admin sandbox that needs restricted access.

## Prerequisites

- Project created with `/bootstrap-react-project`
- Access to Janus credentials (`VITE_JANUS_URL` and `VITE_CLIENT_ID`)
- The dev server must run on port 3000 (`bun run dev`) — Janus has `http://localhost:3000/callback` registered

## Templates

All source files referenced below live in the `templates/` folder inside this skill. Copy them into the project verbatim (adjusting paths as noted) instead of regenerating the code.

```
templates/
├── AuthContext.tsx                 → src/providers/AuthContext.tsx
├── Login/constants.ts              → src/pages/Auth/Login/constants.ts
├── Login/index.tsx                 → src/pages/Auth/Login/index.tsx
├── Callback/index.tsx              → src/pages/Auth/Callback/index.tsx
├── App.snippet.tsx                 → merge into src/App.tsx
└── DashboardLayout.snippet.tsx     → merge into src/layouts/DashboardLayout/index.tsx
```

The `.snippet.*` files are **partial merges**, not full-file replacements. Apply only the additions they show to the corresponding existing files.

---

## Steps

### 1. Get credentials

Ask the user for both values and **wait for the reply** before continuing. Do not assume defaults, do not proceed with placeholders.

> To configure the login I need two values from the client registered in Janus:
> - **`VITE_JANUS_URL`** — Janus base URL (e.g., `https://api.slot2.humand.co/api/v1/janus`)
> - **`VITE_CLIENT_ID`** — the client ID registered in Janus

### 2. Install files

Run the script:

```bash
bun ${CLAUDE_SKILL_DIR}/scripts/install-files.ts \
  --janus-url=<VITE_JANUS_URL> \
  --client-id=<VITE_CLIENT_ID>
```

**If the script exits with code 1 and outputs `EXISTING_AUTH:<type>`:**
Tell the user: "Auth is already installed (`<type>`). Installing `add-super-admin-login` will replace it. Do you want to continue?"
- If **yes**: re-run adding `--force`.
- If **no**: stop the skill.

This copies the auth templates, writes real values to all `.env*` files (`.env.example` gets placeholders), and verifies `.gitignore`.

> **Note:** the `login-banner.png` asset must exist at `src/assets/login-banner.png`. If the project doesn't have it, copy it from `instances-visualizer-1` or replace it with a project-specific image.

### 3. Update `App.tsx`

Using `templates/App.snippet.tsx` as a guide, merge the following changes into the existing `src/App.tsx`:

**Add marker comment as the very first line of the file:**
```tsx
// @humand-auth: super-admin
```

- Wrap the app with `AuthProvider`
- Define `ProtectedRoute` inside the `AuthProvider`
- Lazy-load `LoginPage` and `CallbackPage`
- Register routes `/login` and `/callback`
- Wrap each protected route with `<ProtectedRoute>...</ProtectedRoute>`

**Rules:**
- `AuthProvider` must wrap everything that uses `useAuth()`
- `ProtectedRoute` uses `useAuth()` internally, so it must live inside `AuthProvider`

### 4. Add the logout button to `DashboardLayout`

Using `templates/DashboardLayout.snippet.tsx` as a guide, add the logout button to the `avatarPopoverContent` prop of `HomeHeader` in `src/layouts/DashboardLayout/index.tsx`.

### 5. Verify

```bash
npx tsc --noEmit
bun run lint
```

Ignore TS2688 and TS5101. Fix any other errors.

### 6. Report back to the user

> Done — I added the super admin login. Here's what changed:
>
> - **Google login** at `/login` using OAuth2 PKCE through Janus
> - **Callback handler** at `/callback` that exchanges the code for an access token
> - **Protected routes** — unauthenticated users are redirected to `/login`
> - **Logout button** in the avatar menu of the header
>
> To try it:
> 1. Run `bun run dev` (must run on port 3000)
> 2. Open `http://localhost:3000` — it will redirect you to the login

---

## Reference

Full OAuth2 PKCE flow, critical gotchas, key files, and env vars: `./references/AUTH-SUPER-ADMIN-LOGIN.md`.
