Adding encrypted INCY links

README.md

@@ -1,5 +1,21 @@
 ## Remnawave Subscription Page
 
+### INCY encrypted subscription links
+
+This fork adds support for INCY encrypted deep links (`incy://crypt1/...`), similar to
+the existing `HAPP_CRYPT4_LINK` placeholder for Happ.
+
+**Setup:**
+1. Install the dependency in `frontend`: `npm install @densds/link-encoder`
+2. In your app-config JSON (Subscription Page settings), use the placeholder
+   `{{INCY_CRYPT1_LINK}}` as the `link` value for an INCY button.
+
+Encryption happens entirely client-side, the same way `HAPP_CRYPT3_LINK` /
+`HAPP_CRYPT4_LINK` already work: the subscription URL is built from the already-loaded,
+already-validated subscription info (`constructSubscriptionUrl`), never from
+unvalidated user input, so there's no backend endpoint involved and nothing for it to
+expose.
+
 Learn more about Remnawave [here](https://remna.st/).
 
 # Contributors

backend/package.json

@@ -94,4 +94,4 @@
   "overrides": {
     "multer": "2.2.0"
   }
-}
+}

backend/src/modules/root/root.controller.ts

@@ -66,4 +66,4 @@ export class RootController {
             );
         }
     }
-}
+}

backend/src/modules/root/root.service.ts

@@ -374,4 +374,4 @@ export class RootService {
 
         return true;
     }
-}
+}

docker-compose.yml

@@ -3,7 +3,17 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+    container_name: remnawave-subscription-page
+    hostname: remnawave-subscription-page
+    restart: always
     env_file:
       - .env
     ports:
       - '127.0.0.1:3010:3010'
+    networks:
+      - remnawave-network
+
+networks:
+  remnawave-network:
+    driver: bridge
+    external: true

frontend/package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@gfazioli/mantine-spinner": "^2.3.9",
+    "@densds/link-encoder": "^2.0.0",
     "@kastov/cryptohapp": "^1.1.2",
     "@mantine/core": "9.3.1",
     "@mantine/hooks": "9.3.1",

frontend/src/widgets/main/installation-guide/installation-guide.connector.tsx

@@ -15,8 +15,9 @@ import {
     UnstyledButton
 } from '@mantine/core'
 import { notifications } from '@mantine/notifications'
+import { encryptLink } from '@densds/link-encoder'
 import { useClipboard } from '@mantine/hooks'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 
 import { constructSubscriptionUrl } from '@shared/utils/construct-subscription-url'
@@ -81,10 +82,47 @@ export const InstallationGuideConnector = (props: IProps) => {
         subscription.user.shortUuid
     )
 
+    const [incyCryptLink, setIncyCryptLink] = useState<string | undefined>(undefined)
+    const [incyCryptLoading, setIncyCryptLoading] = useState(true)
+
+    useEffect(() => {
+        let cancelled = false
+        setIncyCryptLoading(true)
+
+        // name is capped at 128 chars per @densds/link-encoder's encryptLink contract
+        const name = subscription.user.username.slice(0, 128)
+
+        encryptLink(subscriptionUrl, { name })
+            .then((link) => {
+                if (!cancelled) setIncyCryptLink(link)
+            })
+            .catch((e) => {
+                console.error('Failed to generate INCY link', e)
+            })
+            .finally(() => {
+                if (!cancelled) setIncyCryptLoading(false)
+            })
+
+        return () => {
+            cancelled = true
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subscriptionUrl, subscription.user.username])
+
     const handleButtonClick = (button: TSubscriptionPageButtonConfig) => {
         let formattedUrl: string | undefined
 
-        if (button.type === 'subscriptionLink' || button.type === 'copyButton') {
+        if (button.link === '{{INCY_CRYPT1_LINK}}') {
+            if (!incyCryptLink) {
+                notifications.show({
+                    title: 'Error',
+                    message: 'INCY link is not ready yet, please try again in a moment',
+                    color: 'red'
+                })
+                return
+            }
+            formattedUrl = incyCryptLink
+        } else if (button.type === 'subscriptionLink' || button.type === 'copyButton') {
             formattedUrl = TemplateEngine.formatWithMetaInfo(button.link, {
                 username: subscription.user.username,
                 subscriptionUrl
@@ -104,13 +142,17 @@ export const InstallationGuideConnector = (props: IProps) => {
                 break
             }
             case 'external': {
-                window.open(button.link, '_blank')
+                if (formattedUrl) {
+                    window.location.href = formattedUrl
+                } else {
+                    window.open(button.link, '_blank')
+                }
                 break
             }
             case 'subscriptionLink': {
                 if (!formattedUrl) return
 
-                window.open(formattedUrl, '_blank')
+                window.location.href = formattedUrl
                 break
             }
             default:
@@ -129,6 +171,7 @@ export const InstallationGuideConnector = (props: IProps) => {
                 {buttons.map((button, index) => (
                     <Button
                         key={index}
+                        disabled={button.link === '{{INCY_CRYPT1_LINK}}' && incyCryptLoading}
                         leftSection={
                             <span
                                 dangerouslySetInnerHTML={{
@@ -137,6 +180,7 @@ export const InstallationGuideConnector = (props: IProps) => {
                                 style={{ display: 'flex', alignItems: 'center' }}
                             />
                         }
+                        loading={button.link === '{{INCY_CRYPT1_LINK}}' && incyCryptLoading}
                         onClick={() => handleButtonClick(button)}
                         radius="md"
                         variant={variant}