Backend & API Suite

Auth Token Manager

A persistent, organized vault for your JWTs, Bearer tokens, and API keys. Store once, inject instantly into any API request with live expiry tracking.

Overview

Eliminating Manual Token Management

Managing authentication credentials during API testing is one of the most tedious and error-prone activities in a developer's day. Tokens expire silently. You forget the Bearer prefix. You accidentally paste a token with a trailing whitespace that breaks the header format. You have multiple tokens for multiple user roles and can't keep track of which is which.

The Auth Token Manager solves all of this. It stores your credentials locally in your browser's localStorage—never transmitted to Vispane's servers—organized by name, and injects them correctly into the API Explorer with a single click.

  • Multi-Type Support: Store JWT tokens (with visual payload decoding), standard Bearer strings, or arbitrary API Keys.
  • JWT Expiration Tracking: The manager automatically decodes the exp claim from JWT payloads and shows a live countdown badge: ✓ 4h left, ⚠ 7m left, or ✗ expired 2m ago.
  • One-Click Injection: The "Inject into API Explorer" button formats the token with the correct prefix and sets the Authorization header automatically.
  • Named Storage: Give each token a descriptive name (e.g., "Admin User JWT", "Guest Account Token", "Production API Key") to manage multiple roles simultaneously.
  • Masked Preview: Tokens are masked by default for security when working in shared screen environments.
  • Local-Only Storage: All tokens are stored in browser localStorage only — never sent to Vispane servers — keeping your credentials private.
Workflow

How to Store and Use a Token

  1. 1

    Obtain your token

    Log in through your application's UI and use the XHR Inspector to capture the /login or /auth/token response. Copy the JWT or Bearer string from the response body.

  2. 2

    Open the Auth Token Manager

    Click the key/lock icon in the Vispane left rail to open the panel.

  3. 3

    Add a new token

    Click "Add Token". Enter a descriptive name, select the type (JWT, Bearer, or API Key), and paste the token string. Click Save.

  4. 4

    Inject into API Explorer

    When testing a protected route, click the "⚡ Inject" button next to the appropriate token. The API Explorer's Auth tab will be populated instantly.

Pro Tips
💡
Test permission boundaries with multiple roles Store both a "Standard User" token and a "Super Admin" token. Rapidly switch between them when testing protected routes to verify your backend correctly enforces Role-Based Access Control (RBAC) and returns the correct 403 Forbidden responses.
💡
Watch the expiry badge before long debugging sessions The live countdown badge goes amber when less than 15 minutes remain and red on expiry. Refresh your token before the badge turns red to avoid mid-session interruptions caused by silent 401 responses.