How to keep client credentials for a third party platform safe

import { storage } from '@wasp/storage';

// Sets 'value' at 'key'
storage.set('key', 'value')

// Gets value at 'key'
storage.get('key')

// Removes 'key'
storage.remove('key')

// Clears only things that were set by `storage.set`
storage.clear() 

import { storage } from '@wasp/storage';

// Sets 'value' at 'key'
storage.set('key', 'value')

// Gets value at 'key'
storage.get('key')

// Removes 'key'
storage.remove('key')

// Clears only things that were set by `storage.set`
storage.clear() 

storage.setPrivate('key', 'userSpecificData')

storage.setPrivate('key', 'userSpecificData')

Get values from the user -> encrypt them with a key that's defined in the env vars -> store the encrypted values in the DB

Get values from the user -> encrypt them with a key that's defined in the env vars -> store the encrypted values in the DB

const adminEmails = process.env.ADMIN_EMAILS?.split(',') || [];

const adminEmails = process.env.ADMIN_EMAILS?.split(',') || [];

import CryptoJS from 'crypto-js';

const secretKey = import.meta.env.REACT_APP_ENCRYPTION_KEY || 'your-default-key';
export const encrypt = (text: string): string => {
    console.log(secretKey)
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext: string): string => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

import CryptoJS from 'crypto-js';

const secretKey = import.meta.env.REACT_APP_ENCRYPTION_KEY || 'your-default-key';
export const encrypt = (text: string): string => {
    console.log(secretKey)
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext: string): string => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

import CryptoJS from 'crypto-js';

const secretKey = process.env.REACT_APP_ENCRYPTION_KEY || 'your-default-key';
export const encrypt = (text: string): string => {
    console.log(secretKey)
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext: string): string => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

import CryptoJS from 'crypto-js';

const secretKey = process.env.REACT_APP_ENCRYPTION_KEY || 'your-default-key';
export const encrypt = (text: string): string => {
    console.log(secretKey)
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext: string): string => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

encryption.ts:3 Uncaught ReferenceError: process is not defined
    at encryption.ts:3:19

encryption.ts:3 Uncaught ReferenceError: process is not defined
    at encryption.ts:3:19

console.log(import.meta.env.REACT_APP_SOME_VAR_NAME)

console.log(import.meta.env.REACT_APP_SOME_VAR_NAME)

console.log(process.env.SOME_VAR_NAME)

console.log(process.env.SOME_VAR_NAME)

// server/encryption.js
import CryptoJS from 'crypto-js';

const secretKey = process.env.ENCRYPTION_KEY || 'your-default-key';

export const encrypt = (text) => {
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext) => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

// server/encryption.js
import CryptoJS from 'crypto-js';

const secretKey = process.env.ENCRYPTION_KEY || 'your-default-key';

export const encrypt = (text) => {
  const ciphertext = CryptoJS.AES.encrypt(text, secretKey).toString();
  return ciphertext;
};

export const decrypt = (ciphertext) => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  const originalText = bytes.toString(CryptoJS.enc.Utf8);
  return originalText;
};

ENCRYPTION_KEY=your-encryption-key

ENCRYPTION_KEY=your-encryption-key

// main.wasp
action Encrypt {
  fn: import { encrypt } from "@server/encryption.js"
}

// main.wasp
action Encrypt {
  fn: import { encrypt } from "@server/encryption.js"
}

// YourComponent.tsx
import { useMutation } from '@wasp/queries'
import { Encrypt } from '@wasp/actions'

const YourComponent = () => {
  const [encrypt] = useMutation(Encrypt)

  const handleSubmit = async (event) => {
    event.preventDefault()
    const inputString = event.target.elements.inputString.value
    const encryptedString = await encrypt({ inputString })
    console.log(encryptedString)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="inputString" type="text" />
      <button type="submit">Encrypt</button>
    </form>
  )
}

// YourComponent.tsx
import { useMutation } from '@wasp/queries'
import { Encrypt } from '@wasp/actions'

const YourComponent = () => {
  const [encrypt] = useMutation(Encrypt)

  const handleSubmit = async (event) => {
    event.preventDefault()
    const inputString = event.target.elements.inputString.value
    const encryptedString = await encrypt({ inputString })
    console.log(encryptedString)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="inputString" type="text" />
      <button type="submit">Encrypt</button>
    </form>
  )
}

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  // Check if the user is authenticated
  if (!context.user) {
    throw new HttpError(401)  // 401 Unauthorized
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  // Check if the client credentials belong to the currently logged-in user
  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)  // 403 Forbidden
  }

  // Decrypt the client credentials before returning them
  const decryptedClientCredentials = {
    ...clientCredentials,
    clientId: decrypt(clientCredentials.clientId),
    clientSecret: decrypt(clientCredentials.clientSecret),
  }

  return decryptedClientCredentials
}

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  // Check if the user is authenticated
  if (!context.user) {
    throw new HttpError(401)  // 401 Unauthorized
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  // Check if the client credentials belong to the currently logged-in user
  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)  // 403 Forbidden
  }

  // Decrypt the client credentials before returning them
  const decryptedClientCredentials = {
    ...clientCredentials,
    clientId: decrypt(clientCredentials.clientId),
    clientSecret: decrypt(clientCredentials.clientSecret),
  }

  return decryptedClientCredentials
}

// Check if the client credentials belong to the currently logged-in user
if (clientCredentials.userId !== context.user.id) {{
  throw new HttpError(403)  // 403 Forbidden
}}

// Check if the client credentials belong to the currently logged-in user
if (clientCredentials.userId !== context.user.id) {{
  throw new HttpError(403)  // 403 Forbidden
}}

// main.wasp
entity ClientCredentials {=psl
  id            Int    @id @default(autoincrement())
  clientId      String
  clientSecret  String
  userId        Int
  user          User   @relation(fields: [userId], references: [id])
psl=}

// main.wasp
entity ClientCredentials {=psl
  id            Int    @id @default(autoincrement())
  clientId      String
  clientSecret  String
  userId        Int
  user          User   @relation(fields: [userId], references: [id])
psl=}

// server/actions.js
import { prisma } from 'wasp/server'
import { encrypt } from './encryption.js'

export const storeClientCredentials = async ({ clientId, clientSecret, userId }) => {
  const encryptedClientId = encrypt(clientId)
  const encryptedClientSecret = encrypt(clientSecret)

  const clientCredentials = await prisma.clientCredentials.create({
    data: {
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
      userId: userId,
    },
  })

  return clientCredentials
}

// server/actions.js
import { prisma } from 'wasp/server'
import { encrypt } from './encryption.js'

export const storeClientCredentials = async ({ clientId, clientSecret, userId }) => {
  const encryptedClientId = encrypt(clientId)
  const encryptedClientSecret = encrypt(clientSecret)

  const clientCredentials = await prisma.clientCredentials.create({
    data: {
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
      userId: userId,
    },
  })

  return clientCredentials
}

 import { encrypt } from '../server/encryption';
import { StoreClientCreds } from 'wasp/server/operations'
import { ClientCredentials } from 'wasp/entities';

type StoreClientCredsPayload = Pick<ClientCredentials, 'userId' | 'clientId' | 'clientSecret'>

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {
  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.args.clientId);
  return context.entities.ClientCredentials.create({
    data: {
      userId: ????,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    },
  });
};

 import { encrypt } from '../server/encryption';
import { StoreClientCreds } from 'wasp/server/operations'
import { ClientCredentials } from 'wasp/entities';

type StoreClientCredsPayload = Pick<ClientCredentials, 'userId' | 'clientId' | 'clientSecret'>

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {
  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.args.clientId);
  return context.entities.ClientCredentials.create({
    data: {
      userId: ????,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    },
  });
};

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {
  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.clientId);
  return context.entities.ClientCredentials.create({
    data: {
      userId: args.userId,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    },
  });
};

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {
  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.clientId);
  return context.entities.ClientCredentials.create({
    data: {
      userId: args.userId,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    },
  });
};

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {{
  if (!context.user) {
    throw new Error('User is not authenticated')
  }

  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.clientId);
  return context.entities.ClientCredentials.create({{
    data: {{
      userId: context.user.id,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    }},
  }});
}};

export const storeClientCreds: StoreClientCreds<StoreClientCredsPayload, ClientCredentials> = async (
  args,
  context
) => {{
  if (!context.user) {
    throw new Error('User is not authenticated')
  }

  const encryptedClientSecret = encrypt(args.clientSecret);
  const encryptedClientId = encrypt(args.clientId);
  return context.entities.ClientCredentials.create({{
    data: {{
      userId: context.user.id,
      clientId: encryptedClientId,
      clientSecret: encryptedClientSecret,
    }},
  }});
}};

import { encrypt, decrypt } from 'wasp/client/operations'; 

import { encrypt, decrypt } from 'wasp/client/operations'; 

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

// src/queries.js
import { HttpError } from 'wasp/server'

export const getClientCredentials = async (args, context) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

query getClientCredentials {
  fn: import { getClientCredentials } from "@src/queries/clientCredentials.js"
  entities: [ClientCredentials]
}

query getClientCredentials {
  fn: import { getClientCredentials } from "@src/queries/clientCredentials.js"
  entities: [ClientCredentials]
}

// src/queries.js
import {{ HttpError }} from 'wasp/server'

export const getClientCredentials = async (args, context) => {{
  if (!context.user) {{
    throw new HttpError(401)
  }}

  const clientCredentials = await context.entities.ClientCredentials.findUnique({{
    where: {{ id: args.id }},
  }})

  if (clientCredentials.userId !== context.user.id) {{
    throw new HttpError(403)
  }}

  return clientCredentials
}}

// src/queries.js
import {{ HttpError }} from 'wasp/server'

export const getClientCredentials = async (args, context) => {{
  if (!context.user) {{
    throw new HttpError(401)
  }}

  const clientCredentials = await context.entities.ClientCredentials.findUnique({{
    where: {{ id: args.id }},
  }})

  if (clientCredentials.userId !== context.user.id) {{
    throw new HttpError(403)
  }}

  return clientCredentials
}}

// src/queries.ts
import { HttpError } from 'wasp/server'
import { type GetClientCredentials } from 'wasp/server/operations'
import { type ClientCredentials } from 'wasp/entities'

export const getClientCredentials: GetClientCredentials<{ id: number }, ClientCredentials> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

// src/queries.ts
import { HttpError } from 'wasp/server'
import { type GetClientCredentials } from 'wasp/server/operations'
import { type ClientCredentials } from 'wasp/entities'

export const getClientCredentials: GetClientCredentials<{ id: number }, ClientCredentials> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(401)
  }

  const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
  })

  if (clientCredentials.userId !== context.user.id) {
    throw new HttpError(403)
  }

  return clientCredentials
}

// src/actions.ts
import { type Task } from 'wasp/entities'
import { type CreateTask } from 'wasp/server/operations'
import { HttpError } from 'wasp/server'

type CreateTaskPayload = Pick<Task, 'description'>

export const createTask: CreateTask<CreateTaskPayload, Task> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(403)
  }

  const Task = context.entities.Task
  return Task.create({
    data: {
      description: args.description,
      user: {
        connect: { id: context.user.id },
      },
    },
  })
}

// src/actions.ts
import { type Task } from 'wasp/entities'
import { type CreateTask } from 'wasp/server/operations'
import { HttpError } from 'wasp/server'

type CreateTaskPayload = Pick<Task, 'description'>

export const createTask: CreateTask<CreateTaskPayload, Task> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(403)
  }

  const Task = context.entities.Task
  return Task.create({
    data: {
      description: args.description,
      user: {
        connect: { id: context.user.id },
      },
    },
  })
}

import React, { useState } from 'react'
import { storeClientCreds } from 'wasp/client/operations'

export const SomeComponent = () => {
  const [clientId, setClientId] = useState('')
  const [clientSecret, setClientSecret] = useState('')

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    try {
      await storeClientCreds({ clientId, clientSecret })
      // Handle success (e.g., show a success message, redirect, etc.)
    } catch (error) {
      // Handle error (e.g., show an error message)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={clientId}
        onChange={(e) => setClientId(e.target.value)}
        placeholder="Client ID"
      />
      <input
        type="password"
        value={clientSecret}
        onChange={(e) => setClientSecret(e.target.value)}
        placeholder="Client Secret"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

import React, { useState } from 'react'
import { storeClientCreds } from 'wasp/client/operations'

export const SomeComponent = () => {
  const [clientId, setClientId] = useState('')
  const [clientSecret, setClientSecret] = useState('')

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    try {
      await storeClientCreds({ clientId, clientSecret })
      // Handle success (e.g., show a success message, redirect, etc.)
    } catch (error) {
      // Handle error (e.g., show an error message)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={clientId}
        onChange={(e) => setClientId(e.target.value)}
        placeholder="Client ID"
      />
      <input
        type="password"
        value={clientSecret}
        onChange={(e) => setClientSecret(e.target.value)}
        placeholder="Client Secret"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export const getClientCredentials = async (args: any, context: any) => {
    if (!context.user) {{
    throw new HttpError(401)
}}

const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
})

if (clientCredentials.userId !== context.user.id) {{
    throw new HttpError(403)
}}

return clientCredentials
}

export const getClientCredentials = async (args: any, context: any) => {
    if (!context.user) {{
    throw new HttpError(401)
}}

const clientCredentials = await context.entities.ClientCredentials.findUnique({
    where: { id: args.id },
})

if (clientCredentials.userId !== context.user.id) {{
    throw new HttpError(403)
}}

return clientCredentials
}

import React, { useEffect, useState } from 'react'
import { getClientCredentials } from 'wasp/client/operations'

export const SomeComponent = () => {
  const [clientCredentials, setClientCredentials] = useState(null)

  useEffect(() => {
    const fetchClientCredentials = async () => {
      try {
        const credentials = await getClientCredentials({ id: 1 }) // Replace 1 with the actual ID
        setClientCredentials(credentials)
      } catch (error) {
        // Handle error (e.g., show an error message)
      }
    }

    fetchClientCredentials()
  }, [])

  // Render the client credentials or a loading message
  return clientCredentials ? (
    <div>
      <p>Client ID: {clientCredentials.clientId}</p>
      <p>Client Secret: {clientCredentials.clientSecret}</p>
    </div>
  ) : (
    <p>Loading...</p>
  )
}

import React, { useEffect, useState } from 'react'
import { getClientCredentials } from 'wasp/client/operations'

export const SomeComponent = () => {
  const [clientCredentials, setClientCredentials] = useState(null)

  useEffect(() => {
    const fetchClientCredentials = async () => {
      try {
        const credentials = await getClientCredentials({ id: 1 }) // Replace 1 with the actual ID
        setClientCredentials(credentials)
      } catch (error) {
        // Handle error (e.g., show an error message)
      }
    }

    fetchClientCredentials()
  }, [])

  // Render the client credentials or a loading message
  return clientCredentials ? (
    <div>
      <p>Client ID: {clientCredentials.clientId}</p>
      <p>Client Secret: {clientCredentials.clientSecret}</p>
    </div>
  ) : (
    <p>Loading...</p>
  )
}