Project — Workspace Invite System | Development Standards

React + Supabase ~8 Hours Intermediate–Advanced

What You Are Building

Build a secure invite system where Owners/Admins can invite users to a workspace using email and token-based acceptance.

This project teaches

Supabase tables
RLS
Invite email Edge Function
Accept-invite RPC
React invite management UI
Token-based invite acceptance

Flow Design

Invite Flow

flowchart TD
    Login[User opens app and logs in]
    Workspace[Selects workspace]
    InviteArea[Opens members / invites area]

    Login --> Workspace --> InviteArea

    InviteArea --> Owner[Owner Flow]
    InviteArea --> Admin[Admin Flow]
    InviteArea --> Invitee[Invited User Flow]

    Owner --> OwnerList[View members and invite history]
    OwnerList --> OwnerFilter[Search / filter / paginate invites]
    OwnerFilter --> OwnerSend[Invite admin or member]
    OwnerSend --> OwnerManage[Resend, revoke, or copy invite link]
    OwnerManage --> OwnerAudit[Review accepted / expired / revoked invites]

    Admin --> AdminList[View assigned workspace members and invites]
    AdminList --> AdminFilter[Search / filter / paginate invites]
    AdminFilter --> AdminSend[Invite member to assigned workspace]
    AdminSend --> AdminManage[Resend, revoke, or copy pending invite]
    AdminManage -. cannot invite to another workspace or create admin invite .-> AdminBlocked[Blocked by role and workspace rules]

    Invitee --> InviteOpen[Open invite link]
    InviteOpen --> InviteReview[Review workspace, role, and expiry]
    InviteReview --> InviteAccept[Accept invite]
    InviteAccept --> InviteValidate[RPC validates token, email match, expiry, and status]
    InviteValidate --> InviteJoin[Workspace membership created]
    InviteValidate -. revoked, expired, invalid, or reused token .-> InviteBlocked[Acceptance denied with clear state]

Required Screens

Invite Management Page

Should show:

Tabs or filters for pending, accepted, expired, and revoked invites.
Email, role, workspace, invited by, created date, and expiry date.
Search by email.
Filters for role, workspace, and invite status.
Pagination if the workspace has invite history.
Resend, revoke, and copy-link actions for Admin/Owner only.

Send Invite Form

Fields:

Email, workspace, and role.
Validation for existing member, duplicate pending invite, and allowed role assignment.
Submit state while Edge Function runs.
Success feedback after invite email is sent.

Accept Invite Page

Should show:

Workspace name, invited role, invite email, and expiry information.
Primary accept button that triggers server-side token validation.
Expired, revoked, invalid, and already-used token states.
Success state after workspace membership is created.

Members Tab

Should include:

Current workspace members with role and joined date.
Search/filter for members where useful.
Role update and remove-member actions for Owner/Admin only.
Clear separation between active members and pending invites.

Data Model

Recommended tables:

Table	Purpose
`workspaces`	Workspace records.
`workspace_members`	Active memberships.
`workspace_invites`	Pending invite records.

Recommended workspace_invites fields:

Field	Purpose
`workspace_id`	Target workspace.
`email`	Invited email.
`role`	Admin or member.
`token_hash`	Hashed invite token.
`status`	Pending, accepted, expired, revoked.
`expires_at`	Expiry time.
`invited_by`	Inviter user ID.

Security Rules

Never store raw invite token if avoidable; store token hash.
Token must expire.
Token must be single-use.
Accept invite must be handled server-side through RPC.
User email must match the invited email exactly before the invite can be accepted.
Revoked invite cannot be accepted.

Permission Rules

Actor	Allowed
Owner	Invite admins and members to owned workspaces.
Admin	Invite members to assigned workspace.
Member	Cannot invite users. Invite actions are out of scope for members.
Non-member	Cannot access invite management.

Acceptance Checklist

Owner can invite admin/member.
Admin can invite member only to assigned workspace.
Admin cannot invite users to another workspace.
Invite email is sent through Edge Function.
Invite token expires.
Invite token cannot be reused.
Revoked invite cannot be accepted.
RLS blocks unauthorized invite reads.
Accept invite RPC handles all validation server-side.