strapi-plugin-magic-sessionmanager 3.0.2 → 3.2.0

package/README.md

@@ -101,11 +101,33 @@ npm run build
 npm run develop
 ```
 
-### 4. Access Admin Dashboard
+### 4. Configure Encryption (Important!) 🔐
+
+Generate a secure encryption key for JWT token storage:
+
+```bash
+# Option 1: Use Admin Panel
+# Go to Admin → Sessions → Settings → Security Settings
+# Click "Generate Key" and copy to .env
+
+# Option 2: Generate manually
+node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+
+# Add to .env file:
+SESSION_ENCRYPTION_KEY=your-generated-32-char-key-here
+```
+
+**Why this is important:**
+- JWT tokens are encrypted before storing in database
+- Prevents token exposure if database is compromised
+- Uses AES-256-GCM encryption standard
+
+### 5. Access Admin Dashboard
 
 - Navigate to Strapi Admin: `http://localhost:1337/admin`
 - Find **Sessions** in the left sidebar under plugins
 - Start with the **License** tab to activate your license
+- Go to **Settings → Security** to generate your encryption key
 
 ---
 
@@ -699,6 +721,104 @@ Available through Admin UI **Settings → Sessions → Settings**:
 
 ---
 
+## 🔐 JWT Token Security
+
+### Encryption
+
+All JWT tokens are **encrypted before storing** in the database using **AES-256-GCM** encryption.
+
+#### Why Encrypt Tokens?
+
+```
+❌ Without Encryption:
+Database compromised → Attacker sees JWTs → Can impersonate users!
+
+✅ With Encryption:
+Database compromised → Attacker sees encrypted data → Useless without key!
+```
+
+#### How It Works
+
+```
+Login: User gets JWT
+       ↓
+JWT: "eyJhbGciOiJIUzI1NiIs..."
+       ↓
+[Encrypt with AES-256-GCM]
+       ↓
+Encrypted: "a3f7b2c1:8c4d9e2a:f2a5b8c3d4e5f6a7..."
+       ↓
+Stored in Database (secure!)
+
+Logout: User sends JWT
+       ↓
+[Fetch all active sessions from DB]
+       ↓
+[Decrypt each token]
+       ↓
+[Compare with user's JWT]
+       ↓
+Match found → Terminate session ✅
+```
+
+#### Configuration
+
+**Generate Encryption Key (Admin Panel):**
+
+1. Go to **Admin → Sessions → Settings**
+2. Open **Security Settings** accordion
+3. Find **JWT Encryption Key Generator**
+4. Click **"Generate Key"**
+5. Copy key with **"Copy for .env"** button
+6. Add to your `.env` file
+
+**Or generate manually:**
+
+```bash
+# Generate secure 32-byte key
+node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+
+# Add to .env
+SESSION_ENCRYPTION_KEY=aBc123XyZ...your-32-char-key
+```
+
+**Fallback Behavior:**
+
+If `SESSION_ENCRYPTION_KEY` is not set:
+- Plugin uses `APP_KEYS` or `API_TOKEN_SALT` as fallback
+- ⚠️ Warning logged on startup
+- Still encrypted, but key is derived from Strapi's keys
+
+**Production Recommendation:**
+Always use a dedicated `SESSION_ENCRYPTION_KEY` for better security isolation.
+
+#### Security Details
+
+| Feature | Value |
+|---------|-------|
+| Algorithm | AES-256-GCM |
+| Key Size | 256 bits (32 bytes) |
+| IV Length | 128 bits (16 bytes) |
+| Auth Tag | 128 bits (16 bytes) |
+| Format | `iv:authTag:encryptedData` (hex) |
+
+### Unique Session IDs
+
+Each session gets a cryptographically unique identifier:
+
+```javascript
+sessionId: "sess_lx3k7_4f2a8b3c_a1b2c3d4e5f6"
+//          prefix^  ^timestamp  ^user-hash  ^random-bytes
+```
+
+**Benefits:**
+- ✅ No collisions across sessions
+- ✅ Traceable session identifiers
+- ✅ Independent from database IDs
+- ✅ URL-safe for future features
+
+---
+
 ## 🔒 Premium Features
 
 ### IP Geolocation & Threat Detection

package/admin/src/pages/Settings.jsx

@@ -366,6 +366,20 @@ Login Details:
   },
 });
 
+// ================ HELPER FUNCTIONS ================
+const generateSecureKey = () => {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
+  let key = '';
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  
+  for (let i = 0; i < 32; i++) {
+    key += chars[array[i] % chars.length];
+  }
+  
+  return key;
+};
+
 const SettingsPage = () => {
   const { get, post, put } = useFetchClient();
   const { toggleNotification } = useNotification();
@@ -375,6 +389,8 @@ const SettingsPage = () => {
   const [hasChanges, setHasChanges] = useState(false);
   const [cleaning, setCleaning] = useState(false);
   const [activeTemplateTab, setActiveTemplateTab] = useState('suspiciousLogin');
+  const [encryptionKey, setEncryptionKey] = useState('');
+  const [showEncryptionKey, setShowEncryptionKey] = useState(false);
   
   const [settings, setSettings] = useState({
     inactivityTimeout: 15,
@@ -772,6 +788,136 @@ const SettingsPage = () => {
                 <Typography variant="sigma" fontWeight="bold" style={{ marginBottom: '16px', display: 'block', color: theme.colors.neutral[700] }}>
                   🔒 SECURITY OPTIONS
                 </Typography>
+
+                {/* Encryption Key Generator */}
+                <Box 
+                  background="neutral0" 
+                  padding={6} 
+                  style={{ 
+                    borderRadius: theme.borderRadius.lg, 
+                    marginBottom: '32px',
+                    border: `2px solid ${theme.colors.primary[100]}`,
+                    background: `linear-gradient(135deg, ${theme.colors.neutral[0]} 0%, ${theme.colors.primary[50]} 100%)`
+                  }}
+                >
+                  <Flex direction="column" gap={4}>
+                    <Flex alignItems="center" gap={3}>
+                      <Shield style={{ width: 24, height: 24, color: theme.colors.primary[600] }} />
+                      <Typography variant="delta" fontWeight="bold">
+                        JWT Encryption Key Generator
+                      </Typography>
+                    </Flex>
+                    
+                    <Typography variant="omega" textColor="neutral600" style={{ lineHeight: 1.6 }}>
+                      Generate a secure 32-character encryption key for JWT token storage.
+                      This key is used to encrypt tokens before saving them to the database.
+                    </Typography>
+
+                    <Alert 
+                      variant="default" 
+                      title="Important"
+                      style={{ marginTop: 8 }}
+                    >
+                      Add this key to your <code>.env</code> file as <strong>SESSION_ENCRYPTION_KEY</strong> for production.
+                    </Alert>
+
+                    <Flex gap={3} alignItems="flex-end">
+                      <Box style={{ flex: 1 }}>
+                        <TextInput
+                          label="Generated Encryption Key"
+                          value={encryptionKey}
+                          onChange={(e) => setEncryptionKey(e.target.value)}
+                          placeholder="Click 'Generate Key' to create a secure key"
+                          type={showEncryptionKey ? 'text' : 'password'}
+                        />
+                      </Box>
+                      <Button
+                        variant="secondary"
+                        onClick={() => setShowEncryptionKey(!showEncryptionKey)}
+                        size="L"
+                      >
+                        {showEncryptionKey ? 'Hide' : 'Show'}
+                      </Button>
+                    </Flex>
+
+                    <Flex gap={3}>
+                      <Button
+                        variant="default"
+                        startIcon={<Code />}
+                        onClick={() => {
+                          const key = generateSecureKey();
+                          setEncryptionKey(key);
+                          setShowEncryptionKey(true);
+                          toggleNotification({
+                            type: 'success',
+                            message: '32-character encryption key generated!'
+                          });
+                        }}
+                        size="L"
+                      >
+                        Generate Key
+                      </Button>
+                      
+                      <Button
+                        variant="tertiary"
+                        startIcon={<Duplicate />}
+                        onClick={() => {
+                          if (encryptionKey) {
+                            navigator.clipboard.writeText(encryptionKey);
+                            toggleNotification({
+                              type: 'success',
+                              message: 'Encryption key copied to clipboard!'
+                            });
+                          }
+                        }}
+                        disabled={!encryptionKey}
+                        size="L"
+                      >
+                        Copy to Clipboard
+                      </Button>
+
+                      <Button
+                        variant="tertiary"
+                        startIcon={<Duplicate />}
+                        onClick={() => {
+                          if (encryptionKey) {
+                            const envLine = `SESSION_ENCRYPTION_KEY=${encryptionKey}`;
+                            navigator.clipboard.writeText(envLine);
+                            toggleNotification({
+                              type: 'success',
+                              message: 'Copied as .env format!'
+                            });
+                          }
+                        }}
+                        disabled={!encryptionKey}
+                        size="L"
+                      >
+                        Copy for .env
+                      </Button>
+                    </Flex>
+
+                    {encryptionKey && (
+                      <Box 
+                        padding={4} 
+                        background="neutral100" 
+                        style={{ 
+                          borderRadius: theme.borderRadius.md,
+                          border: '1px solid ' + theme.colors.neutral[200],
+                          fontFamily: 'monospace',
+                          fontSize: '12px',
+                          wordBreak: 'break-all'
+                        }}
+                      >
+                        <Typography variant="omega" fontWeight="bold" style={{ marginBottom: 8, display: 'block' }}>
+                          Add to .env file:
+                        </Typography>
+                        <code style={{ color: theme.colors.primary[700] }}>
+                          SESSION_ENCRYPTION_KEY={encryptionKey}
+                        </code>
+                      </Box>
+                    )}
+                  </Flex>
+                </Box>
                 
                 {/* Feature Toggles */}
                 <Box background="neutral100" padding={5} style={{ borderRadius: theme.borderRadius.md, marginBottom: '32px' }}>

package/dist/_chunks/{Analytics-Bp1cPJx1.mjs → Analytics-CwyLwdOZ.mjs}

@@ -4,8 +4,8 @@ import { useFetchClient } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Loader, Typography, Box, Flex, Badge } from "@strapi/design-system";
 import { ChartBubble, Crown, User, Clock, Monitor } from "@strapi/icons";
-import { a as pluginId } from "./index--JzOiQNw.mjs";
-import { u as useLicense } from "./useLicense-W1cxUaca.mjs";
+import { a as pluginId } from "./index-B-0VPfeF.mjs";
+import { u as useLicense } from "./useLicense-DUGjNbQ9.mjs";
 const theme = {
   colors: {
     primary: { 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },

package/dist/_chunks/{Analytics-CjqdGXnQ.js → Analytics-DRzCKaDF.js}

@@ -6,8 +6,8 @@ const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-DqtQaEBL.js");
-const useLicense = require("./useLicense-DA-averf.js");
+const index = require("./index-W_QbTAYU.js");
+const useLicense = require("./useLicense-C_Rneohy.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {

package/dist/_chunks/{App-DONYhluL.mjs → App-Zhs_vt59.mjs}

@@ -4,8 +4,8 @@ import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Modal, Flex, Box, Typography, Badge, Divider, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, TextInput } from "@strapi/design-system";
 import { Check, Information, Monitor, Server, Clock, Cross, Earth, Shield, Crown, Phone, Download, User, Eye, Trash, Search, Key } from "@strapi/icons";
-import { p as parseUserAgent, a as pluginId } from "./index--JzOiQNw.mjs";
-import { u as useLicense } from "./useLicense-W1cxUaca.mjs";
+import { p as parseUserAgent, a as pluginId } from "./index-B-0VPfeF.mjs";
+import { u as useLicense } from "./useLicense-DUGjNbQ9.mjs";
 import { useNavigate } from "react-router-dom";
 const TwoColumnGrid = styled.div`
   display: grid;

package/dist/_chunks/{App-DtfZMVae.js → App-nGu2Eb87.js}

@@ -6,8 +6,8 @@ const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-DqtQaEBL.js");
-const useLicense = require("./useLicense-DA-averf.js");
+const index = require("./index-W_QbTAYU.js");
+const useLicense = require("./useLicense-C_Rneohy.js");
 const reactRouterDom = require("react-router-dom");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);

package/dist/_chunks/{License-lcVK7rtT.mjs → License-CPI0p_W8.mjs}

@@ -4,7 +4,7 @@ import { Loader, Box, Alert, Flex, Typography, Button, Badge, Accordion } from "
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { ArrowClockwise, Duplicate, Download, User, Shield, Sparkle, ChartBubble } from "@strapi/icons";
 import styled, { css, keyframes } from "styled-components";
-import { a as pluginId } from "./index--JzOiQNw.mjs";
+import { a as pluginId } from "./index-B-0VPfeF.mjs";
 const theme = {
   colors: {
     neutral: { 200: "#E5E7EB" }

package/dist/_chunks/{License-IWH6ClOx.js → License-k5vvhgKr.js}

@@ -6,7 +6,7 @@ const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
 const icons = require("@strapi/icons");
 const styled = require("styled-components");
-const index = require("./index-DqtQaEBL.js");
+const index = require("./index-W_QbTAYU.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {

package/dist/_chunks/{Settings-JaiqQ_7r.mjs → Settings-CL2im8M3.mjs}

@@ -1,17 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Flex, Loader, Typography, Button, Box, Badge, Accordion, Grid, SingleSelect, SingleSelectOption, Divider, Toggle, NumberInput, Checkbox, Tabs, TextInput } from "@strapi/design-system";
+import { Flex, Loader, Typography, Button, Box, Badge, Accordion, Grid, SingleSelect, SingleSelectOption, Divider, Alert, TextInput, Toggle, NumberInput, Checkbox, Tabs } from "@strapi/design-system";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
-import { Check, Information, Cog, Trash, Shield, Mail, Code } from "@strapi/icons";
+import { Check, Information, Cog, Trash, Shield, Code, Duplicate, Mail } from "@strapi/icons";
 import styled, { css, keyframes } from "styled-components";
-import { a as pluginId } from "./index--JzOiQNw.mjs";
-import { u as useLicense } from "./useLicense-W1cxUaca.mjs";
+import { a as pluginId } from "./index-B-0VPfeF.mjs";
+import { u as useLicense } from "./useLicense-DUGjNbQ9.mjs";
 const theme = {
   colors: {
-    primary: { 600: "#0284C7", 700: "#075985" },
+    primary: { 600: "#0284C7", 700: "#075985", 100: "#E0F2FE", 50: "#F0F9FF" },
     success: { 600: "#16A34A", 700: "#15803D" },
     danger: { 600: "#DC2626" },
-    neutral: { 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151" }
+    neutral: { 0: "#FFFFFF", 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151" }
   },
   shadows: { sm: "0 1px 3px rgba(0,0,0,0.1)" },
   borderRadius: { md: "8px", lg: "12px" }
@@ -322,6 +322,16 @@ Login Details:
 - VPN: {{reason.isVpn}}, Proxy: {{reason.isProxy}}`
   }
 });
+const generateSecureKey = () => {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
+  let key = "";
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  for (let i = 0; i < 32; i++) {
+    key += chars[array[i] % chars.length];
+  }
+  return key;
+};
 const SettingsPage = () => {
   const { get, post, put } = useFetchClient();
   const { toggleNotification } = useNotification();
@@ -331,6 +341,8 @@ const SettingsPage = () => {
   const [hasChanges, setHasChanges] = useState(false);
   const [cleaning, setCleaning] = useState(false);
   const [activeTemplateTab, setActiveTemplateTab] = useState("suspiciousLogin");
+  const [encryptionKey, setEncryptionKey] = useState("");
+  const [showEncryptionKey, setShowEncryptionKey] = useState(false);
   const [settings, setSettings] = useState({
     inactivityTimeout: 15,
     cleanupInterval: 30,
@@ -658,6 +670,142 @@ const SettingsPage = () => {
           ) }),
           /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
             /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: "🔒 SECURITY OPTIONS" }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                background: "neutral0",
+                padding: 6,
+                style: {
+                  borderRadius: theme.borderRadius.lg,
+                  marginBottom: "32px",
+                  border: `2px solid ${theme.colors.primary[100]}`,
+                  background: `linear-gradient(135deg, ${theme.colors.neutral[0]} 0%, ${theme.colors.primary[50]} 100%)`
+                },
+                children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+                  /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
+                    /* @__PURE__ */ jsx(Shield, { style: { width: 24, height: 24, color: theme.colors.primary[600] } }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "JWT Encryption Key Generator" })
+                  ] }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { lineHeight: 1.6 }, children: "Generate a secure 32-character encryption key for JWT token storage. This key is used to encrypt tokens before saving them to the database." }),
+                  /* @__PURE__ */ jsxs(
+                    Alert,
+                    {
+                      variant: "default",
+                      title: "Important",
+                      style: { marginTop: 8 },
+                      children: [
+                        "Add this key to your ",
+                        /* @__PURE__ */ jsx("code", { children: ".env" }),
+                        " file as ",
+                        /* @__PURE__ */ jsx("strong", { children: "SESSION_ENCRYPTION_KEY" }),
+                        " for production."
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-end", children: [
+                    /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        label: "Generated Encryption Key",
+                        value: encryptionKey,
+                        onChange: (e) => setEncryptionKey(e.target.value),
+                        placeholder: "Click 'Generate Key' to create a secure key",
+                        type: showEncryptionKey ? "text" : "password"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "secondary",
+                        onClick: () => setShowEncryptionKey(!showEncryptionKey),
+                        size: "L",
+                        children: showEncryptionKey ? "Hide" : "Show"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "default",
+                        startIcon: /* @__PURE__ */ jsx(Code, {}),
+                        onClick: () => {
+                          const key = generateSecureKey();
+                          setEncryptionKey(key);
+                          setShowEncryptionKey(true);
+                          toggleNotification({
+                            type: "success",
+                            message: "32-character encryption key generated!"
+                          });
+                        },
+                        size: "L",
+                        children: "Generate Key"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "tertiary",
+                        startIcon: /* @__PURE__ */ jsx(Duplicate, {}),
+                        onClick: () => {
+                          if (encryptionKey) {
+                            navigator.clipboard.writeText(encryptionKey);
+                            toggleNotification({
+                              type: "success",
+                              message: "Encryption key copied to clipboard!"
+                            });
+                          }
+                        },
+                        disabled: !encryptionKey,
+                        size: "L",
+                        children: "Copy to Clipboard"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "tertiary",
+                        startIcon: /* @__PURE__ */ jsx(Duplicate, {}),
+                        onClick: () => {
+                          if (encryptionKey) {
+                            const envLine = `SESSION_ENCRYPTION_KEY=${encryptionKey}`;
+                            navigator.clipboard.writeText(envLine);
+                            toggleNotification({
+                              type: "success",
+                              message: "Copied as .env format!"
+                            });
+                          }
+                        },
+                        disabled: !encryptionKey,
+                        size: "L",
+                        children: "Copy for .env"
+                      }
+                    )
+                  ] }),
+                  encryptionKey && /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      padding: 4,
+                      background: "neutral100",
+                      style: {
+                        borderRadius: theme.borderRadius.md,
+                        border: "1px solid " + theme.colors.neutral[200],
+                        fontFamily: "monospace",
+                        fontSize: "12px",
+                        wordBreak: "break-all"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: 8, display: "block" }, children: "Add to .env file:" }),
+                        /* @__PURE__ */ jsxs("code", { style: { color: theme.colors.primary[700] }, children: [
+                          "SESSION_ENCRYPTION_KEY=",
+                          encryptionKey
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
+              }
+            ),
             /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "32px" }, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
               /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
                 ToggleCard,