Add profile creation — close the gap between signing in and being a member
Deploying and then trying to actually use it surfaced a dead end: /api/signup was exempted from auth but never implemented, so a real person could sign in, receive 403 needs_profile, and have nowhere to go. Authentication worked; joining did not. The route is mounted before the auth middleware, because requiring membership to reach the route that grants membership is circular. It verifies the token itself and then requires one of two things: - A valid invite code. Stored hashed, optionally pinned to an address, optionally expiring, consumed on redemption with the redeemer recorded. - Presence in PIG_ADMIN_EMAILS. The bootstrap path, which exists because on a fresh deployment nobody can issue an invite since nobody can sign in to issue one. The bootstrap path is narrow by construction: the address must be listed in server-side configuration AND match the verified email claim on the token. Admin rights are never read from the request body, so a crafted payload cannot grant them. Two behaviours worth noting. A row that was invited but never signed into is claimed rather than rejected, binding it to the identity that just proved ownership of the address. And a resubmitted form returns the existing user instead of erroring, because a double-tap should be harmless. The front end now treats needs_profile as a step in the flow rather than an error, showing a team picker. Sending someone back to a login screen they have already completed is a loop with no exit. Also: the seed no longer creates the dev@localhost admin row under NODE_ENV=production. It was unreachable (no auth subject, so nobody can sign in as it), but an admin-flagged placeholder in a real deployment is a trap. Verified: rejects a missing token, rejects an invalid body, claims a pre-existing row, and is idempotent on resubmission. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,7 @@ import { Settings } from '@/pages/Settings';
|
||||
import { Accounts } from '@/pages/Accounts';
|
||||
import { Margin } from '@/pages/Margin';
|
||||
import { SignIn } from '@/pages/SignIn';
|
||||
import { CreateProfile } from '@/pages/CreateProfile';
|
||||
import { PiggyMark } from '@/components/PiggyMark';
|
||||
import { EmptyState } from '@/components/ui';
|
||||
|
||||
@@ -115,15 +116,11 @@ function AuthGate({ config }: { config: PublicConfig }) {
|
||||
|
||||
if (error instanceof ApiError) {
|
||||
if (error.needsSignIn) return <SignIn config={config} />;
|
||||
// Authenticated but not a member. This is a step in the flow, not an
|
||||
// error — sending them back to a login screen they have already completed
|
||||
// would be a loop with no exit.
|
||||
if (error.needsProfile) {
|
||||
return (
|
||||
<Centered>
|
||||
<EmptyState
|
||||
title="You're signed in, but not a member of this workspace"
|
||||
description="PIG uses a shared identity provider, so having an account is not the same as having access here. Ask an administrator for an invite."
|
||||
/>
|
||||
</Centered>
|
||||
);
|
||||
return <CreateProfile config={config} onCreated={() => void refetch()} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* Profile creation.
|
||||
*
|
||||
* Shown when someone is authenticated but is not yet a member — the state that
|
||||
* exists precisely because PIG shares its identity provider with other
|
||||
* applications. Without this screen that state is a dead end, which is a
|
||||
* miserable thing to hand someone who has just clicked a sign-in link.
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
import { TEAMS, TEAM_DESCRIPTIONS, TEAM_LABELS, type Team } from '@pig/core';
|
||||
import { ApiError, post, type PublicConfig } from '@/lib/api';
|
||||
import { Button, Card, CardContent, Input } from '@/components/ui';
|
||||
import { PiggyMark } from '@/components/PiggyMark';
|
||||
|
||||
export function CreateProfile({
|
||||
config,
|
||||
onCreated,
|
||||
}: {
|
||||
config: PublicConfig;
|
||||
onCreated: () => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [title, setTitle] = useState('');
|
||||
const [team, setTeam] = useState<Team>('demand');
|
||||
const [inviteCode, setInviteCode] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function submit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await post('/api/signup', {
|
||||
name,
|
||||
team,
|
||||
title: title || undefined,
|
||||
inviteCode: inviteCode || undefined,
|
||||
});
|
||||
onCreated();
|
||||
} catch (err) {
|
||||
// The server distinguishes "no code", "wrong code", "expired" and
|
||||
// "issued to someone else". All four are actionable, so all four are
|
||||
// shown rather than flattened into "access denied".
|
||||
setError(err instanceof ApiError ? err.message : 'Could not create your profile.');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-dvh items-center justify-center bg-bg px-6 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-6 flex flex-col items-center gap-3 text-center">
|
||||
<PiggyMark className="h-12 w-12 text-fg" title="pig" />
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold tracking-tight">Set up your profile</h1>
|
||||
<p className="mt-1 text-sm text-muted">
|
||||
You're signed in. One more step to join the workspace.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-5">
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium">Your name</span>
|
||||
<Input
|
||||
required
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
autoComplete="name"
|
||||
placeholder="Alex Ferguson"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium">
|
||||
Title <span className="font-normal text-muted">(optional)</span>
|
||||
</span>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Head of Growth"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<fieldset>
|
||||
<legend className="mb-2 text-sm font-medium">Which team are you on?</legend>
|
||||
<div className="space-y-2">
|
||||
{TEAMS.map((value) => (
|
||||
<label
|
||||
key={value}
|
||||
className={[
|
||||
'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
|
||||
team === value
|
||||
? 'border-accent bg-accent-subtle'
|
||||
: 'border-border hover:bg-surface-2',
|
||||
].join(' ')}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="team"
|
||||
value={value}
|
||||
checked={team === value}
|
||||
onChange={() => setTeam(value)}
|
||||
className="mt-0.5 h-4 w-4 accent-[hsl(var(--accent))]"
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-sm font-medium">{TEAM_LABELS[value]}</span>
|
||||
<span className="block text-xs text-muted">
|
||||
{TEAM_DESCRIPTIONS[value]}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-muted">
|
||||
You can be added to more teams later.
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
{config.inviteRequired ? (
|
||||
<label className="block">
|
||||
<span className="mb-1 block text-sm font-medium">Invite code</span>
|
||||
<Input
|
||||
value={inviteCode}
|
||||
onChange={(e) => setInviteCode(e.target.value)}
|
||||
placeholder="Ask an administrator"
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<span className="mt-1 block text-xs text-muted">
|
||||
Not needed if your address is configured as an administrator.
|
||||
</span>
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="text-sm text-danger">{error}</p> : null}
|
||||
|
||||
<Button type="submit" variant="primary" className="w-full" disabled={busy}>
|
||||
{busy ? 'Creating…' : 'Join the workspace'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user