Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

OIDC Sessions Dashboard Block for Svelte

Eight signed-in sessions from three identity providers in a table with scope chips and a token-expiry bar, a provider select and a search, and a bulk revoke that asks first and keeps revoked rows in place.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Review who is signed in through single sign-on and end the sessions you don't trust, with this OIDC sessions panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar with a Native Select in the header for the provider (Google Workspace, Microsoft Entra ID or Okta, each shown in text with a two-letter tile) and an Input that searches person, device and place, over a table of eight sessions: the person, the device and place, the scopes the token holds as code chips (openid, profile, offline_access) and when the token expires, in minutes, hours or days from one fixed time, with a thin bar for how much of its life remains. A Checkbox on every row and a select-all in the head, which shows a dash while only some are ticked, feed the action foot. Its Shine Button reads "Revoke 3", and an Alert Dialog names the people before anything happens. Revoked rows stay where they were, muted and unticked, marked "Revoked in this demo". It's built from Native Select, Input, Checkbox, Alert Dialog, Empty, Button, Shine Button and Guides. For admin consoles and security settings.

FAQ

How do I fill it with my sessions?

Edit SESSIONS and PROVIDERS. A session has a person, a device and a place, a provider, its scopes, an ISO expires time and the token's lifetime in seconds. the time remaining, the unit it is shown in and the width of the bar are worked out against AS_OF, the one fixed "now" on the page, so nothing reads the clock and server and browser agree.

How does selecting work?

Each row's box ticks that session, and the box in the head ticks every session the filters leave in view; it shows a dash when only some are ticked. Changing the provider or the search drops any tick on a row that is no longer shown, so "Revoke 3" always counts what you can see. A revoked row can't be ticked again.

What does Revoke do, and how does it ask?

The button opens an alert dialog that names every person whose session would end, with Cancel focused first. Confirming marks those rows "Revoked in this demo" and keeps them in place, so nothing slides away under the pointer, and the status line says how many were revoked.

What stays local, and how do I wire it for real?

Everything: no provider is contacted and no token is touched. To make it real, call your provider's token revocation or your own session store from the confirm handler, then update the rows from the response and keep the ones that failed ticked with the reason beside them.

What if nothing matches?

A search or provider that matches no session shows an empty state with a Clear filters button inside the same frame, so the panel keeps its height. The table scrolls inside its frame, and the frame is a labelled region you can reach with the keyboard.

How does it look on a phone?

The table keeps the checkbox and the first cell, which folds in the provider, the expiry and the scopes under the person's name. The action foot stays pinned to the bottom of the screen.