strapi-plugin-magic-link-v5 4.0.0

package/.eslintignore

@@ -0,0 +1 @@
+dist

package/.github/workflows/semantic-release.yml

@@ -0,0 +1,27 @@
+name: Semantic Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+      issues: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: yarn install
+      - run: yarn build
+      - run: yarn semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -0,0 +1,318 @@
+# Magic Link - Passwordless Authentication for Strapi
+
+A secure passwordless authentication solution for Strapi, allowing users to log in via email links without requiring passwords.
+
+## Core Features
+
+- **Passwordless Authentication**: Login via secure email links
+- **Token Management**: Admin dashboard for managing and monitoring tokens
+- **JWT Session Tracking**: Monitor and manage active sessions
+- **Security Features**: IP banning, token expiration controls
+- **Admin Interface**: Statistics dashboard and configuration options
+
+## Installation
+
+```bash
+# Using npm
+npm install magic-link
+
+# Using yarn
+yarn add magic-link
+```
+
+After installation, restart your Strapi server and the plugin will be available in the admin panel.
+
+## How It Works
+
+### Email User with Login Link
+
+1. **Request Process**:
+
+   - User requests a login link by entering their email
+   - System generates a secure token and sends an email
+   - Email contains a magic link with the token
+
+2. **Token Details**:
+   - Cryptographically secure random tokens
+   - Configurable expiration time
+   - Option for one-time use or reusable tokens
+   - Tracks IP address and user agent information
+
+### Login with Token
+
+1. **Authentication Process**:
+
+   - User clicks the link in their email
+   - System verifies the token is valid and not expired
+   - User is automatically authenticated
+   - JWT token is generated for the session
+
+2. **Security Measures**:
+   - IP address validation (optional)
+   - Token expiration
+   - One-time use tokens (configurable)
+   - Automatic blocking after failed attempts
+
+## Configuration
+
+Configure the plugin through **Settings > Magic Link** in the Strapi admin panel:
+
+### General Settings
+
+- **Enable Magic Link**: Turn the feature on/off
+- **Create New Users**: Automatically create users if they don't exist
+- **Token Stays Valid**: Configure one-time use or reusable tokens
+- **Expiration Period**: Set how long tokens remain valid
+- **Token Length**: Configure the security level of tokens
+
+### Authentication Settings
+
+- **Default Role**: Select which user role is assigned to new users
+- **JWT Token Expiration**: Define how long JWT tokens remain valid (e.g., 30d, 24h)
+- **Store Login Info**: Enable tracking of user agents and IP addresses
+- **Remember Me**: Allow users to stay logged in for extended periods
+
+### Email Settings
+
+- **Sender Information**: Configure the email sender details (name, email)
+- **Reply-To Address**: Set a reply-to email address for support inquiries
+- **Email Subject**: Customize the subject line of the magic link emails
+- **Email Templates**: Customize HTML and text templates
+- **Email Designer Integration**: Use with Email Designer 5 if installed
+
+## Dashboard & Admin Interface
+
+Magic Link provides a comprehensive admin interface with several key sections:
+
+### Dashboard Overview
+
+- **Security Score**: Dynamic score (0-100) showing your current security configuration
+- **Active Tokens**: Count and management of currently active tokens
+- **Token Usage**: Metrics on token creation and usage patterns
+- **Users Using Magic Link**: Number of unique users authenticating via magic links
+- **Tokens About to Expire**: Warning system for tokens expiring soon
+
+### Token Management
+
+- **Token List View**: Sortable and filterable list of all tokens
+- **Token Status Indicators**: Visual indicators showing token status (active, expired, used)
+- **Token Details**: Inspect complete token information including:
+  - Creation and expiration dates
+  - IP address and user agent information
+  - Usage history and context data
+- **Bulk Actions**: Select multiple tokens for batch operations
+- **Search & Filter**: Find tokens by email, status, or creation date
+- **Token Operations**:
+  - Block/deactivate tokens
+  - Extend token expiration
+  - Delete tokens
+
+### JWT Session Management
+
+- **Active Sessions**: Monitor all active JWT sessions across your application
+- **Session Revocation**: Ability to revoke any active session immediately
+- **Session Details**: View complete session information including:
+  - User details
+  - Creation and expiration time
+  - Last activity
+  - IP address and device information
+
+### Security Features
+
+- **IP Ban Management**: View and manage banned IP addresses
+- **IP Ban Controls**: Ban suspicious IPs and view associated tokens
+- **Security Audit**: Track login attempts and security events
+- **System Status**: Monitor the health of the plugin and its dependencies
+
+### Token Creation Interface
+
+- **Manual Token Creation**: Generate tokens for specific users
+- **Email Control**: Option to send or not send the email with the token
+- **Context Injection**: Add custom JSON context data to tokens
+- **Email Validation**: Verify email existence before token creation
+
+## Admin Features
+
+### Token Management
+
+- View all active/inactive tokens
+- Block or activate individual tokens
+- Delete expired tokens
+- See token usage statistics
+
+### Security Dashboard
+
+- Security score based on your configuration
+- IP banning for suspicious activity
+- JWT session monitoring and management
+- Token expiration warnings
+
+## API Endpoints
+
+- `POST /api/magic-link/send` - Generate and send a magic link
+- `GET /api/magic-link/login?loginToken=xxx` - Authenticate with token
+- `GET /api/magic-link/tokens` - List tokens (admin only)
+- `GET /api/magic-link/jwt-sessions` - List active sessions (admin only)
+- `POST /api/magic-link/tokens/:id/block` - Block a specific token
+- `POST /api/magic-link/ban-ip` - Ban an IP address
+
+## Frontend Implementation
+
+```javascript
+// Request a magic link
+const requestLogin = async (email) => {
+  try {
+    await axios.post("/api/magic-link/send", { email });
+    // Show success message
+  } catch (error) {
+    // Handle error
+  }
+};
+
+// Verify token on the callback page
+const verifyToken = async () => {
+  const token = new URLSearchParams(window.location.search).get("loginToken");
+  if (token) {
+    try {
+      const response = await axios.get(
+        `/api/magic-link/login?loginToken=${token}`
+      );
+      // Store JWT and redirect user
+      localStorage.setItem("token", response.data.jwt);
+      window.location.href = "/dashboard";
+    } catch (error) {
+      // Handle invalid token
+    }
+  }
+};
+```
+
+## Context Data
+
+You can include additional context when sending a magic link:
+
+```javascript
+await axios.post("/api/magic-link/send", {
+  email: "user@example.com",
+  context: {
+    redirectUrl: "/dashboard",
+    source: "registration",
+  },
+});
+```
+
+## Security Best Practices
+
+- Set reasonable token expiration times
+- Use one-time tokens for sensitive operations
+- Regularly monitor the security dashboard
+- Ban suspicious IP addresses promptly
+
+## Troubleshooting
+
+| Issue                  | Solution                                       |
+| ---------------------- | ---------------------------------------------- |
+| Emails not sending     | Check your Strapi email provider configuration |
+| Token validation fails | Verify token expiration settings               |
+| User not found errors  | Check "Create New Users" setting               |
+
+## License
+
+[MIT](LICENSE)
+
+## Development & Contributing
+
+### Release Process
+
+This project uses [semantic-release](https://github.com/semantic-release/semantic-release) to automate version management and package publishing.
+
+To create a new release:
+
+```bash
+npx semantic-release
+```
+
+This will automatically:
+
+1. Analyze commit messages since the last release
+2. Determine the appropriate version bump (major, minor, or patch)
+3. Generate release notes
+4. Update the version in package.json
+5. Create a new Git tag
+6. Publish the package to npm
+
+### Commit Guidelines
+
+To ensure semantic-release can properly determine the next version number, please follow these commit message conventions:
+
+#### Commit Message Format
+
+Each commit message consists of a **header**, an optional **body**, and an optional **footer**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and must conform to the following format:
+
+- **type**: What type of change this commit is making. Must be one of:
+
+  - `feat`: A new feature (triggers a minor release)
+  - `fix`: A bug fix (triggers a patch release)
+  - `docs`: Documentation changes only
+  - `style`: Changes that don't affect code functionality (formatting, etc.)
+  - `refactor`: Code changes that neither fix a bug nor add a feature
+  - `perf`: Performance improvements
+  - `test`: Adding or updating tests
+  - `chore`: Changes to build process or auxiliary tools
+  - `ci`: Changes to CI configuration files and scripts
+
+- **scope**: Optional, can be anything specifying the place of the commit change (e.g., `admin`, `api`, `auth`)
+
+- **subject**: Brief description of the change
+
+#### Breaking Changes
+
+For breaking changes, add `BREAKING CHANGE:` in the footer of the commit message or append a `!` after the type/scope:
+
+```
+feat(api)!: completely restructure API endpoints
+
+BREAKING CHANGE: The API endpoints have been completely restructured.
+```
+
+This will trigger a major version bump.
+
+#### Examples
+
+```
+feat(auth): add support for multiple roles
+
+fix(email): correct template rendering issue
+
+docs: update API documentation
+
+chore(deps): update dependencies
+
+fix!: critical security vulnerability in token validation
+```
+
+### Branching Strategy
+
+- `main`: Production-ready code
+- `develop`: Integration branch for features
+- `feature/*`: New features
+- `fix/*`: Bug fixes
+- `docs/*`: Documentation changes
+
+When creating PRs, always merge feature branches into `develop` first. The `develop` branch is periodically merged into `main` for releases.
+
+---
+
+## Support
+
+If you encounter issues or have questions, please check the admin documentation or open an issue.

package/admin/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*.js", "./src/**/*.jsx"]
+}

package/admin/src/components/Initializer/index.jsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer; 

package/admin/src/components/Initializer.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+import { PLUGIN_ID } from '../pluginId';
+
+/**
+ * @type {import('react').FC<{ setPlugin: (id: string) => void }>}
+ */
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+
+  return null;
+};
+
+export { Initializer };

package/admin/src/components/LazyComponentLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// This helper ensures the component module structure that Strapi v5 expects
+// for lazy-loaded components
+const LazyComponentLoader = (importComponent) => {
+  return React.lazy(() => {
+    return importComponent().then(module => {
+      // If the module has a default export, use it
+      if (module.default) {
+        return { default: module.default };
+      }
+      
+      // Otherwise, use the named export if available
+      const firstExport = Object.keys(module)[0];
+      if (firstExport && module[firstExport]) {
+        return { default: module[firstExport] };
+      }
+      
+      // If no suitable export is found, return a fallback component
+      return { 
+        default: () => <div>Component loading error</div> 
+      };
+    });
+  });
+};
+
+export default LazyComponentLoader; 

package/admin/src/components/PluginIcon/index.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Key } from '@strapi/icons';
+
+export const PluginIcon = () => <Key />;
+
+export default PluginIcon; 

package/admin/src/components/PluginIcon.jsx

@@ -0,0 +1,5 @@
+import { PuzzlePiece } from '@strapi/icons';
+
+const PluginIcon = () => <PuzzlePiece />;
+
+export { PluginIcon };

package/admin/src/index.js

@@ -0,0 +1,101 @@
+import { prefixPluginTranslations } from '@strapi/strapi/admin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+import pluginPermissions from './permissions';
+import getTrad from './utils/getTrad';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: name,
+      },
+      Component: () => import('./pages/HomePage').then(module => ({
+        default: module.default
+      }))
+    });
+
+    app.addMenuLink({
+      to: `/plugins/${pluginId}/tokens`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: getTrad('tokens.title'),
+        defaultMessage: 'Magic Link Tokens',
+      },
+      Component: () => import('./pages/Tokens').then(module => ({
+        default: module.default
+      }))
+    });
+
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: getTrad('Header.Settings'),
+          defaultMessage: 'Magic Link',
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: getTrad('Form.title.Settings'),
+            defaultMessage: 'Settings',
+          },
+          id: 'magic-link-settings',
+          to: `/settings/${pluginId}`,
+          Component: () => import('./pages/Settings').then(module => ({
+            default: module.default
+          })),
+          permissions: pluginPermissions.readSettings,
+        },
+      ]
+    );
+
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap() {
+    // Nothing to do here
+  },
+
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        try {
+          return import(`./translations/${locale}.json`)
+            .then(({ default: data }) => {
+              return {
+                data: prefixPluginTranslations(data, pluginId),
+                locale,
+              };
+            })
+            .catch(() => {
+              return {
+                data: {},
+                locale,
+              };
+            });
+        } catch (error) {
+          return {
+            data: {},
+            locale,
+          };
+        }
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

package/admin/src/pages/App/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Main, Box, Typography } from '@strapi/design-system';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+import TokensPage from '../Tokens';
+
+const App = () => {
+  console.log("Magic Link App-Root-Komponente wird geladen");
+  
+  // Ermittle den aktuellen Pfad, um zu sehen, welche Route angezeigt werden soll
+  const currentPath = window.location.pathname;
+  console.log("Aktueller Pfad:", currentPath);
+  console.log("Plugin ID:", pluginId);
+  
+  // Einfachere Bedingungen, die nur prüfen, ob der Pfad bestimmte Segmente enthält
+  const isTokensPage = currentPath.includes(`/plugins/${pluginId}/tokens`) || 
+                      currentPath.includes(`/plugins/magic-link/tokens`);
+  const isHomePage = (currentPath.includes(`/plugins/${pluginId}`) || 
+                     currentPath.includes(`/plugins/magic-link`)) && !isTokensPage;
+
+  console.log("isTokensPage:", isTokensPage);
+  console.log("isHomePage:", isHomePage);
+  
+  let content;
+  if (isTokensPage) {
+    console.log("Zeige TokensPage an");
+    content = <TokensPage />;
+  } else if (isHomePage) {
+    console.log("Zeige HomePage an");
+    content = <HomePage />;
+  } else {
+    console.log("Zeige 404 Seite an");
+    content = (
+      <Box padding={8} background="neutral100">
+        <Typography variant="alpha">
+          404 - Route nicht gefunden: {currentPath}
+        </Typography>
+      </Box>
+    );
+  }
+  
+  return (
+    <Main>
+      {content}
+    </Main>
+  );
+};
+
+export { App };
+export default App; 

package/admin/src/pages/App.jsx

@@ -0,0 +1,15 @@
+import { Page } from '@strapi/strapi/admin';
+import { Routes, Route } from 'react-router-dom';
+
+import { HomePage } from './HomePage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="*" element={<Page.Error />} />
+    </Routes>
+  );
+};
+
+export { App };

package/admin/src/pages/HomePage/index.js

@@ -0,0 +1,2 @@
+// Vereinfachter Export
+export { default } from '../HomePage.jsx';