---
name: add-login
description: >
  Installs Janus OAuth2 authentication (HttpOnly cookies, silent refresh, ProtectedRoute) into a humand-create-app project. Use when the project needs Google login via Humand's Janus auth server.
allowed-tools: Bash Read Write Edit
metadata:
  category: Implementation
---

# add-login

Installs the full Janus OAuth2 authentication stack into this project.

## What this skill does

1. Creates `api/auth/_lib.ts` — server-side session resolver, token exchange, cookie helpers.
2. Creates `api/auth/[...path].ts` — Vercel proxy routes: `/callback`, `/me`, `/refresh`, `/logout`.
3. Creates `src/providers/AuthProvider.tsx` — React context + `useAuth()` hook.
4. Creates `src/providers/ProtectedRoute.tsx` — Route guard component.
5. Creates `src/pages/Unauthenticated/index.tsx` — "Access restricted" page.
6. Creates `src/pages/AuthError/index.tsx` — Auth error page.
7. Patches `src/App.tsx` — adds imports, wraps with `AuthProvider`, adds `/error` route, wraps protected routes with `ProtectedRoute`.
8. Adds required env vars to `.env.example`.

## Instructions

### Step 0 — Collect env vars

Ask the user for the following values before proceeding:

| Variable | Description | Default |
|---|---|---|
| `HUMAND_CLIENT_ID` | OAuth2 client ID | _(required)_ |
| `HUMAND_CLIENT_SECRET` | OAuth2 client secret | _(required)_ |
| `REDIRECT_URI` | Registered redirect URI in Janus console | _(required)_ |
| `VITE_HUMAND_APP_URL` | Humand app URL shown on unauthenticated screen | `https://app.humand.co` |

`JANUS_URL` is always `https://api.humand.co/api/v1/janus` — do not ask the user for it.

### Step 1 — Install files

Run the script:

```bash
bun ${CLAUDE_SKILL_DIR}/scripts/install-files.ts \
  --client-id=<HUMAND_CLIENT_ID> \
  --client-secret=<HUMAND_CLIENT_SECRET> \
  --redirect-uri=<REDIRECT_URI> \
  --humand-app-url=<VITE_HUMAND_APP_URL>
```

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

This copies all auth templates to their destinations, writes real values to `.env.local` (gitignored), and documents them in `.env.example`.

> **Note:** Imports between files in `api/` use the `.js` extension (e.g. `from './_lib.js'`).
> This is required for Vercel to resolve ESM modules correctly at deploy time.

### Step 2 — Patch src/App.tsx

Read the current `src/App.tsx` and apply these surgical changes:

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

**Add imports** (after existing provider imports):
```tsx
import { AuthProvider } from './providers/AuthProvider';
import { ProtectedRoute } from './providers/ProtectedRoute';
import { AuthErrorPage } from './pages/AuthError';
```

**Wrap `<BrowserRouter>` children with `<AuthProvider>`:**
```tsx
<BrowserRouter>
  <AuthProvider>
    {/* existing routes */}
  </AuthProvider>
</BrowserRouter>
```

**Add `/error` route** (as a public route, outside any ProtectedRoute):
```tsx
<Route path="/error" element={<AuthErrorPage />} />
```

**Wrap every existing protected route with `<ProtectedRoute>`:**
```tsx
<Route
  path="/"
  element={
    <ProtectedRoute>
      <HomePage />
    </ProtectedRoute>
  }
/>
```

Do NOT modify anything else in App.tsx.

### Step 3 — Report to user

Tell the user:
- Which files were created.
- That they need to set the 5 env vars in `.env.local` (and in Vercel for production).
- That the `/api/auth/callback` route must be registered as the redirect URI in the Janus console.

## Reference

Full auth flow, env vars, key files, and auth-type detection: `./references/AUTH-LOGIN.md`.
