[Spring 2026] API Key Creation Page

[llam36]

Context

Dashboard allows creating api key, but does not show the key to the user. We need a table to show all api keys belonging to the projects that the user is linked to, and the ability to delete keys

Expected Layout

Design Inspiration

Card wrapping table

API Key Reveal Card

API Key table (no table border is nice!)

Requirement

Create API Key Form

• Wrap the current create api key form in a card (rounded corner, white border)
• Second input field title is Description, not email
• Add Create API Key title to card
• Check if the form is working correctly (can create an api key with Juno)
• When create, include current date in request
• Use react-query for all async SDK calls (React-query sample code: https://github.com/GTBitsOfGood/juno-dashboard/blob/main/src/components/fileConfigTable/fileConfig-table.tsx)

Reveal API Key

• Create a card to reveal the newly created API Key, empty when refreshing the page
• When no API key is created, display no API key to reveal
• Add title to card

API Key table

• Wrap the table in a card, same as other cards
• Display all past api keys in a table
• Should have columns for id, description, date created (in a chip/badge), linked project (in a chip/badge), env (in a chip/badge)
• For keys with no created date, display N/A
• Have an option to delete the key, and confirm delete is successful

Backend

• Add and modify endpoints as needed
• Add date created field in api key schema (stored as string)
• Add e2e tests to any new endpoints or behavior across all services you interact with

PR description

• Brief list of what you did
• Video showing a working frontend (mocked data or backend integration)