shadcn.io is not affiliated with official shadcn/ui
Access Token Hygiene Settings Block for Svelte
An access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.
Installation
Overview
Show people which of their tokens deserve a second look, with this access token settings panel for Svelte with Ark UI. A header Toggle Group switches between All and Needs attention. Inside a hairline frame with a plus mark on each corner, a strip counts four risks across the account's tokens: no end date, unused for 90 days, the admin scope, and ending within 14 days. Below it a native table lists every token with its scopes in one line ("3 scopes, includes admin"), the risks it carries as outline Badges with a glyph and a word, when it last signed a request and when it ends. A token that never ends has a Native Select in its Expires cell, and choosing Set to 90 days gives it an end date, which takes its risk away and moves the counts. Ticking tokens, one by one or all of them with a Checkbox in the head that shows a mixed state, arms the Revoke bar at the foot: its Alert Dialog lists the tokens by name and asks before anything goes, and a revoked token stays on the list with a Restore button. The foot's status line says what is ticked and what just happened. On a phone every token is a card and the bar stays pinned to the bottom of the screen. It's built from Checkbox, Toggle Group, Native Select, Alert Dialog, Badge, Button and Guides, with a CSS entrance only. For a developer portal, an API platform or any product that issues personal tokens.
FAQ
How do I fill it with my own tokens?
Edit TOKENS at the top of the file: each token has an id, a name, its scopes, the day it was made, the day it last signed a request (empty when it never has) and the day it ends (empty when it never does). AS_OF is the day every age is measured from, and RISKS, UNUSED_DAYS and SOON_DAYS set the four checks. Every count, badge and sentence is worked out from those, so nothing is typed twice. In your app replace AS_OF with today's date.
How are the four risks worked out?
A token never expires when it has no end date. It is unused when 90 days or more have passed since it last signed a request, or since it was made if it never has. It has the admin scope when any scope starts with admin. It ends soon when its end date is within 14 days of AS_OF. These are small pure functions of the typed dates, so setting an end date on a token or restoring a revoked one changes the strip, the table and the heading count straight away. A revoked token carries no risk.
What stays local, and how do I make it real?
Everything. Choosing an end date, revoking and restoring only change the list in this page, and the status line and the dialog say so. To make them real, send the new end date or the revoke request from the handlers (expire, confirm and restore) to your API and update the list from the response, showing the failure in the same status line. Creating a token and showing its secret once is a different screen, and is not part of this panel.
What does Needs attention do to the list?
It dims the tokens that carry no risk instead of hiding them, so the table never changes height and a token you are about to fix doesn't jump away when you fix it. The status line says how many need attention and that the rest are dimmed, and dimmed rows keep their text at a readable contrast. When every risk has been fixed the heading reads that all the tokens are in good shape.
How does the revoke dialog behave?
Revoke is a destructive button that is always on the page: with nothing ticked it stays in place, says so in the status line when pressed, and opens nothing. With tokens ticked it opens an alert dialog that lists them by name and scope, takes focus on Keep them, and does not close when you click outside it. Escape and Keep them close it with focus back on Revoke. Confirming marks the tokens as revoked in the list and clears the selection.
How does it look on a phone, and is it accessible?
Below the medium breakpoint the table becomes one card per token with the same checkbox, badges and end-date menu, and the Revoke bar sticks to the bottom of the screen while you scroll. On a larger screen the table has a caption, column headers and a row header per token, the checkbox in each row is named for its token and described by its scopes, and the menu in the Expires cell is named for the token too ("End date for CI deploy"). The status line is a polite live region that is present from the start.