feat: request grant confirmation for config updates (#39)

* add open payments library

* required grant in api response

* OP env vars

* wallet ownership modal and grant confirmation

* add finalizeValidationPayment

* remove query params from form

Co-authored-by: darian <darian410@gmail.com>
Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>

Author: 3 people

backend/package.json

@@ -21,10 +21,14 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.645.0",
+    "@remix-run/node": "^2.14.0",
     "@smithy/node-http-handler": "^3.2.3",
+    "@types/express-session": "^1.18.1",
     "@types/underscore": "^1.11.15",
+    "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
+    "express-session": "^1.18.1",
     "he": "^1.2.0",
     "module-alias": "^2.2.3",
     "sanitize-html": "^2.14.0",

backend/src/controllers/tools.ts

@@ -16,6 +16,7 @@ import {
   SanitizedFields,
   SaveUserConfigRequest
 } from './types.js'
+import { getSession } from '@/services/session.js'
 
 export const getDefault = async (_: Request, res: Response) => {
   try {
@@ -33,15 +34,24 @@ export const createUserConfig = async (req: Request, res: Response) => {
     const data: CreateConfigRequest = req.body
     const tag = data.version || data.tag
 
-    if (!data.walletAddress) {
+    if (!data?.walletAddress) {
       throw 'Wallet address is required'
     }
+    const walletAddress = decodeURIComponent(`https://${data.walletAddress}`)
+
+    const cookieHeader = req.headers.cookie
+    const session = await getSession(cookieHeader)
+
+    const validForWallet = session?.get('validForWallet')
+
+    if (!session || validForWallet !== walletAddress) {
+      throw 'Grant confirmation is required'
+    }
+
     const defaultData = await getDefaultData()
     const defaultDataContent: ConfigVersions['default'] =
       JSON.parse(defaultData).default
-    defaultDataContent.walletAddress = decodeURIComponent(
-      `https://${data.walletAddress}`
-    )
+    defaultDataContent.walletAddress = walletAddress
 
     sanitizeConfigFields({ ...defaultDataContent, tag })
 
@@ -51,6 +61,7 @@ export const createUserConfig = async (req: Request, res: Response) => {
     try {
       // existing config
       const s3data = await s3.send(new GetObjectCommand(params))
+
       // Convert the file stream to a string
       fileContentString = await streamToString(
         s3data.Body as NodeJS.ReadableStream
@@ -97,10 +108,17 @@ export const createUserConfig = async (req: Request, res: Response) => {
 export const saveUserConfig = async (req: Request, res: Response) => {
   try {
     const data: SaveUserConfigRequest = req.body
+    const cookieHeader = req.headers.cookie
+    const session = await getSession(cookieHeader)
+
+    const validForWallet = session?.get('validForWallet')
 
     if (!data.walletAddress) {
       throw 'Wallet address is required'
     }
+    if (!session || validForWallet !== data.walletAddress) {
+      throw 'Grant confirmation is required'
+    }
 
     const { s3, params } = getS3AndParams(data.walletAddress)
 
@@ -132,19 +150,22 @@ export const getUserConfig = async (req: Request, res: Response) => {
     if (!id) {
       throw new S3FileNotFoundError('Wallet address is required')
     }
+    const walletAddress = decodeURIComponent(`https://${id}`)
 
     // ensure we have all keys w default values, user config will overwrite values that exist in saved json
     const defaultData = await getDefaultData()
+    const parsedDefaultData = JSON.parse(defaultData)
+    parsedDefaultData.default.walletAddress = walletAddress
 
-    const { s3, params } = getS3AndParams(id)
+    const { s3, params } = getS3AndParams(walletAddress)
     const data = await s3.send(new GetObjectCommand(params))
     // Convert the file stream to a string
     const fileContentString = await streamToString(
       data.Body as NodeJS.ReadableStream
     )
 
     let fileContent = Object.assign(
-      JSON.parse(defaultData),
+      parsedDefaultData,
       ...[JSON.parse(fileContentString)]
     )
     fileContent = filterDeepProperties(fileContent)

backend/src/server.ts

@@ -2,7 +2,9 @@ import https from 'https'
 import http from 'http'
 import fs from 'fs'
 import express, { Express } from 'express'
+import session from 'express-session'
 import routes from './routes/index.js'
+import { SESSION_COOKIE_SECRET_KEY } from './services/session.js'
 
 const router: Express = express()
 
@@ -21,10 +23,24 @@ if (isDevelopment) {
 router.use(express.urlencoded({ extended: true }))
 router.use(express.json())
 
+// Session middleware
+router.use(
+  session({
+    secret: SESSION_COOKIE_SECRET_KEY,
+    resave: false,
+    saveUninitialized: true, // Only save the session if it is modified
+    cookie: {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'none'
+    }
+  })
+)
+
 router.use((req, res, next) => {
   // set the CORS policy
   res.header('Access-Control-Allow-Origin', '*')
-  // set the CORS headers
+  res.header('Access-Control-Allow-Credentials', 'true')
   res.header(
     'Access-Control-Allow-Headers',
     'origin,X-Requested-With,Content-Type,Accept,Authorization'

backend/src/services/session.ts

@@ -0,0 +1,17 @@
+import { createCookieSessionStorage } from '@remix-run/node'
+
+export const SESSION_COOKIE_SECRET_KEY =
+  process.env.SESSION_COOKIE_SECRET_KEY || 'supersecretilpaystring'
+
+const { getSession, commitSession, destroySession } =
+  createCookieSessionStorage({
+    cookie: {
+      name: 'wmtools-session',
+      httpOnly: true,
+      secure: true,
+      sameSite: 'none',
+      secrets: [SESSION_COOKIE_SECRET_KEY]
+    }
+  })
+
+export { getSession, commitSession, destroySession }

backend/src/types/index.ts

@@ -0,0 +1,7 @@
+import 'express-session'
+
+declare module 'express-session' {
+  interface Session {
+    validForWallet?: string
+  }
+}

backend/tsconfig.json

@@ -10,5 +10,6 @@
     }
   },
   "include": ["src/**/*", "tests/**/*"],
-  "exclude": ["node_modules", "**/node_modules/*"]
+  "exclude": ["node_modules", "**/node_modules/*"],
+  "files": ["src/types/index.ts"]
 }

docker/dev/.env.example

@@ -5,6 +5,11 @@ SCRIPT_FRONTEND_URL=https://localhost:5100/
 SCRIPT_ILPAY_URL=https://interledgerpay.com/extension/
 SCRIPT_EMBED_URL=https://localhost:5100/
 
+OP_KEY_ID=
+OP_PRIVATE_KEY=
+OP_WALLET_ADDRESS=
+OP_REDIRECT_URL=
+
 # BACKEND
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=

docker/dev/docker-compose.yml

@@ -50,6 +50,10 @@ services:
       ILPAY_URL: ${SCRIPT_ILPAY_URL}
       FRONTEND_URL: ${SCRIPT_FRONTEND_URL}
       INIT_SCRIPT_URL: ${SCRIPT_EMBED_URL}
+      OP_KEY_ID: ${OP_KEY_ID}
+      OP_PRIVATE_KEY: ${OP_PRIVATE_KEY}
+      OP_WALLET_ADDRESS: ${OP_WALLET_ADDRESS}
+      OP_REDIRECT_URL: ${OP_REDIRECT_URL}
     networks:
       - wm-tools
     command: pnpm run dev

frontend/Dockerfile

@@ -44,10 +44,12 @@ RUN pnpm --filter frontend build
 ARG VITE_SCRIPT_API_URL
 ARG VITE_SCRIPT_FRONTEND_URL
 ARG VITE_SCRIPT_ILPAY_URL
+ARG VITE_INIT_SCRIPT_URL
 
 ENV VITE_SCRIPT_API_URL=$VITE_SCRIPT_API_URL \
     VITE_SCRIPT_FRONTEND_URL=$VITE_SCRIPT_FRONTEND_URL \
-    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL
+    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL \
+    VITE_INIT_SCRIPT_URL=$VITE_INIT_SCRIPT_URL
 
 RUN pnpm --filter frontend build:init
 

frontend/Dockerfile.dev

@@ -31,10 +31,12 @@ EXPOSE 5100
 ARG VITE_SCRIPT_API_URL
 ARG VITE_SCRIPT_FRONTEND_URL
 ARG VITE_SCRIPT_ILPAY_URL
+ARG VITE_INIT_SCRIPT_URL
 
 ENV VITE_SCRIPT_API_URL=$VITE_SCRIPT_API_URL \
     VITE_SCRIPT_FRONTEND_URL=$VITE_SCRIPT_FRONTEND_URL \
-    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL
+    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL \
+    VITE_INIT_SCRIPT_URL=$VITE_INIT_SCRIPT_URL
 
 WORKDIR /app/frontend