Permit.io Elements Demo

User Management

Allow your users to manage access control and permissions within safe boundaries.

1
Authentication Setup

JSON Web Key Set (JWKS) for JWT authentication with Permit.io

JWKS Configured

A JWKS has been configured, which means we can generate valid JWTs for Permit.io authentication.

Key ID: 1766ead206fd15a67129662b

2
Implementation

Use this code to embed the Permit.io element in your application

1. Import the Permit.io library

import permit, { LoginMethod } from '@permitio/permit-js';

2. Initialize and authenticate with Permit.io

// Use a JWT token to authenticate to Permit.io
const loginOptions = {
  loginMethod: LoginMethod.frontendOnly,
  userJwt: "USER_JWT_TOKEN", // Replace with your JWT token
  tenant: "default",
  envId: "e5c1bede268744af8433f3cb13d1b68a"
};

permit.elements.login(loginOptions).then(() => {
  console.log("Successfully authenticated with Permit.io");
}).catch(err => {
  console.error("Login error:", err);
});

3. Embed the element in your HTML

<iframe 
  src="https://embed.permit.io/elements-demo?envId=e5c1bede268744af8433f3cb13d1b68a&darkMode=false?darkMode=false"
  style="border: none; width: 100%; height: 500px;"
  title="Permit.io Element"
  allow="clipboard-write"
></iframe>

3
Authentication

Connect to enable user management functionality

4
Preview

User Management Element Preview

User Management Element

Manage users, roles, and permissions directly from this embedded interface.

Initializing Permit.io element...