feat(fronted): tenanted admin api credentials (#3213)

* feat(frontend): set api credentials on session

* chore(frontend): more details in todo comment

* refactor(frontend): move credentials form from modal to component on index

* chore(frontend): mark dialog for removal

- not removing yet because not sure if we might end up using it.
could be useful if we want to make global redirect if this is not set.

* feat(frontend): store api creds in server side session

* feat(frontend): POC for adding tenantId from session to headers for all apollo requests

Uses the assets and list asset query.
This POC passes the request to the listAsset function.
Which imports the apolloClient directly and passes
the cookie from request headers in the context.
To avoid having to set this on each query as we compose
it, my intention is to create a new getApolloClient
function and use that insteadof directly importing a
single client. This enables us to form a link to handle setting the headers per request (as opposed to static
links that are used across all requests as it is currently).

* feat(frontend): form apollo client per request

- enables authLink to get tenantId, apiSecret from cookie in request
- wondered if this was a performance concern
(maybe why we had single instance before?) but found
several things indicating this is OK and even recommended:
    - apollographql/apollo-client#9520 (comment)
    - https://www.apollographql.com/blog/how-to-use-apollo-client-with-remix

* fix(mock-ase): update seed script to pass tenant sig/id verifcation

* feat(frontend): block api cred form submit on invalid uuid

* feat(frontend): handle errors, WIP apollo client

- see TODOs in apollo client in frontend.
maybe need to remove some env vars and
verify how no tenantid/secret are handled

* feat(frontend): disable nav links

* docs(localenv): update readme to not say kratos is required

* chore(frontend): format

* chore(frontend): rm unused component

* chore(frontend): rm commented out code

* chore(frontend): formatting

* refactor(frontend): better error parsing

* chore(frontend): rm todo

* refactor(frontend): use session api for deletion, not manual

* fix(frontend): display error based on message

reverses previous commit to use apollo error. proved unreliable

* fix(frontend): rm SIGNATURE_SECRET, SIGNATURE_VERSION env vars

* feat(mock-ase): log operator/tenant details to streamline use of frontend

* feat(frontend): dont show nav items if api creds required and not set

* feat(frontend): move api credential set action to own endpoint

- removes the action from the index. the intention is to
expose the remix server port over docker and  call this
from the MASE to set the api credentials on start

* feat(frontend): prefill api credential form

* chore(frontend): format

* feat(frontend): auto submit form if values passed in

requires changing intent to be set as an input. submitting form bypasses the button so the action didnt have the intent  and
failed when auto submitting.

* fix: reinstate sig version env var

Author: BlairCurrey

localenv/README.md

@@ -121,7 +121,7 @@ The secondary Happy Life Bank docker compose file (`./happy-life-bank/docker-com
 data stores created by the primary Rafiki instance so it can't be run by itself.
 The `pnpm localenv:compose up` command starts both the primary instance and the secondary.
 
-See the `frontend` [README](../packages/frontend/README.md#ory-kratos) for more information regarding the Ory Kratos identity and user management system required for Admin UI.
+See the `frontend` [README](../packages/frontend/README.md#ory-kratos) for more information regarding the Ory Kratos identity and user management system for the Admin UI.
 
 #### Autopeering
 

localenv/cloud-nine-wallet/docker-compose.yml

@@ -25,6 +25,8 @@ services:
       IDP_SECRET: 2pEcn2kkCclbOHQiGNEwhJ0rucATZhrA807HTm2rNXE=
       DISPLAY_NAME: Cloud Nine Wallet
       DISPLAY_ICON: wallet-icon.svg
+      OPERATOR_TENANT_ID: 438fa74a-fa7d-4317-9ced-dde32ece1787
+      FRONTEND_PORT: 3010
     volumes:
       - ../cloud-nine-wallet/seed.yml:/workspace/seed.yml
       - ../cloud-nine-wallet/private-key.pem:/workspace/private-key.pem
@@ -166,9 +168,8 @@ services:
       GRAPHQL_URL: http://cloud-nine-wallet-backend:3001/graphql
       OPEN_PAYMENTS_URL: https://cloud-nine-wallet-backend/
       ENABLE_INSECURE_MESSAGE_COOKIE: true
-      AUTH_ENABLED: false      
+      AUTH_ENABLED: false
       SIGNATURE_VERSION: 1
-      SIGNATURE_SECRET: iyIgCprjb9uL8wFckR+pLEkJWMB7FJhgkvqhTQR/964=
     depends_on:
       - cloud-nine-backend
 

localenv/happy-life-bank/docker-compose.yml

@@ -21,6 +21,8 @@ services:
       IDP_SECRET: 2pEcn2kkCclbOHQiGNEwhJ0rucATZhrA807HTm2rNXE=
       DISPLAY_NAME: Happy Life Bank
       DISPLAY_ICON: bank-icon.svg
+      OPERATOR_TENANT_ID: cf5fd7d3-1eb1-4041-8e43-ba45747e9e5d
+      FRONTEND_PORT: 4010
     volumes:
       - ../happy-life-bank/seed.yml:/workspace/seed.yml
       - ../happy-life-bank/private-key.pem:/workspace/private-key.pem
@@ -136,7 +138,6 @@ services:
       ENABLE_INSECURE_MESSAGE_COOKIE: true
       AUTH_ENABLED: false
       SIGNATURE_VERSION: 1
-      SIGNATURE_SECRET: iyIgCprjb9uL8wFckR+pLEkJWMB7FJhgkvqhTQR/964=
     depends_on:
       - cloud-nine-admin
       - happy-life-backend

localenv/mock-account-servicing-entity/app/entry.server.tsx

@@ -30,6 +30,15 @@ async function callWithRetry(fn: () => any, depth = 0): Promise<void> {
 }
 
 if (!global.__seeded) {
+  const tenantId = process.env.OPERATOR_TENANT_ID
+  const apiSecret = process.env.SIGNATURE_SECRET
+
+  if (!tenantId || !apiSecret) {
+    throw new Error(
+      'Must set OPERATOR_TENANT_ID and SIGNATURE_SECRET environment variables'
+    )
+  }
+
   callWithRetry(async () => {
     console.log('setting up from seed...')
     return setupFromSeed(CONFIG, apolloClient, mockAccounts, {
@@ -39,6 +48,19 @@ if (!global.__seeded) {
   })
     .then(() => {
       global.__seeded = true
+      setTimeout(() => {
+        const url = new URL(`http://localhost:${process.env.FRONTEND_PORT}/`)
+        const params = new URLSearchParams({
+          tenantId,
+          apiSecret
+        })
+
+        url.search = params.toString()
+
+        console.log(
+          `Local Dev Setup:\nUse this URL to access the frontend with operator tenant credentials:\n${url}\n`
+        )
+      }, 2000)
     })
     .catch((e) => {
       console.log(

localenv/mock-account-servicing-entity/app/lib/apolloClient.ts

@@ -68,7 +68,8 @@ const authLink = setContext((request, { headers }) => {
   return {
     headers: {
       ...headers,
-      signature: `t=${timestamp}, v${version}=${digest}`
+      signature: `t=${timestamp}, v${version}=${digest}`,
+      ['tenant-id']: process.env.OPERATOR_TENANT_ID
     }
   }
 })

packages/frontend/app/components/ApiCredentialsForm.tsx

@@ -0,0 +1,113 @@
+import { Form, useActionData, useNavigation } from '@remix-run/react'
+import { useRef, useState, useEffect } from 'react'
+import { Input, Button } from '~/components/ui'
+import { validate as validateUUID } from 'uuid'
+
+interface ApiCredentialsFormProps {
+  showClearCredentials: boolean
+  defaultTenantId: string
+  defaultApiSecret: string
+}
+
+interface ActionErrorResponse {
+  status: number
+  statusText: string
+}
+
+export const ApiCredentialsForm = ({
+  showClearCredentials,
+  defaultTenantId,
+  defaultApiSecret
+}: ApiCredentialsFormProps) => {
+  const actionData = useActionData<ActionErrorResponse>()
+  const navigation = useNavigation()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const formRef = useRef<HTMLFormElement>(null)
+  const [tenantIdError, setTenantIdError] = useState<string | null>(null)
+
+  const isSubmitting = navigation.state === 'submitting'
+
+  const handleTenantIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const tenantId = event.target.value.trim()
+
+    if (tenantId === '') {
+      setTenantIdError('Tenant ID is required')
+    } else if (!validateUUID(tenantId)) {
+      setTenantIdError('Invalid Tenant ID (must be a valid UUID)')
+    } else {
+      setTenantIdError(null)
+    }
+  }
+
+  // auto submit form if values passed in
+  useEffect(() => {
+    if (defaultTenantId && defaultApiSecret && !tenantIdError) {
+      if (formRef.current) {
+        formRef.current.submit()
+      }
+    }
+  }, [defaultTenantId, defaultApiSecret, tenantIdError])
+
+  return (
+    <div className='space-y-4'>
+      {showClearCredentials ? (
+        <Form method='post' action='/api/set-credentials' className='space-y-4'>
+          <p className='text-green-600'>✓ API credentials configured</p>
+          <input hidden readOnly name='intent' value='clear' />
+          <Button
+            type='submit'
+            intent='danger'
+            aria-label='Clear API credentials'
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Submitting...' : 'Clear Credentials'}
+          </Button>
+        </Form>
+      ) : (
+        <Form
+          method='post'
+          action='/api/set-credentials'
+          className='space-y-4'
+          ref={formRef} // Reference for the credentials form
+        >
+          <Input
+            ref={inputRef}
+            required
+            type='text'
+            name='tenantId'
+            label='Tenant ID'
+            defaultValue={defaultTenantId}
+            onChange={handleTenantIdChange}
+            aria-invalid={!!tenantIdError}
+            aria-describedby={tenantIdError ? 'tenantId-error' : undefined}
+          />
+          {tenantIdError && (
+            <p id='tenantId-error' className='text-red-500 text-sm'>
+              {tenantIdError}
+            </p>
+          )}
+          <Input
+            required
+            type='password'
+            name='apiSecret'
+            label='API Secret'
+            defaultValue={defaultApiSecret}
+          />
+          <input hidden readOnly name='intent' value='save' />
+          <div className='flex justify-center'>
+            <Button
+              type='submit'
+              aria-label='Save API credentials'
+              disabled={!!tenantIdError || isSubmitting}
+            >
+              {isSubmitting ? 'Submitting...' : 'Save Credentials'}
+            </Button>
+          </div>
+        </Form>
+      )}
+      {actionData?.statusText && (
+        <div className='text-red-500'>{actionData.statusText}</div>
+      )}
+    </div>
+  )
+}

packages/frontend/app/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import { Button } from '~/components/ui'
 interface SidebarProps {
   logoutUrl: string
   authEnabled: boolean
+  hasApiCredentials: boolean
 }
 
 const navigation = [
@@ -38,9 +39,17 @@ const navigation = [
   }
 ]
 
-export const Sidebar: FC<SidebarProps> = ({ logoutUrl, authEnabled }) => {
+export const Sidebar: FC<SidebarProps> = ({
+  logoutUrl,
+  authEnabled,
+  hasApiCredentials
+}) => {
   const [sidebarIsOpen, setSidebarIsOpen] = useState(false)
 
+  const navigationToShow = hasApiCredentials
+    ? navigation
+    : navigation.filter(({ name }) => name === 'Home')
+
   return (
     <>
       <Transition.Root show={sidebarIsOpen} as={Fragment}>
@@ -81,7 +90,7 @@ export const Sidebar: FC<SidebarProps> = ({ logoutUrl, authEnabled }) => {
                 <div className='mt-5 h-0 flex-1 overflow-y-auto'>
                   <nav className='px-2'>
                     <div className='space-y-1'>
-                      {navigation.map(({ name, href }) => (
+                      {navigationToShow.map(({ name, href }) => (
                         <NavLink
                           key={name}
                           to={href}
@@ -140,7 +149,7 @@ export const Sidebar: FC<SidebarProps> = ({ logoutUrl, authEnabled }) => {
           {/* Desktop Navigation */}
           <div className='hidden w-full mt-5 flex-1 flex-col overflow-y-auto md:block'>
             <div className='space-y-2'>
-              {navigation.map(({ name, href }) => (
+              {navigationToShow.map(({ name, href }) => (
                 <NavLink
                   key={name}
                   to={href}

packages/frontend/app/lib/api/asset.server.ts

@@ -27,9 +27,10 @@ import type {
   WithdrawAssetLiquidity,
   WithdrawAssetLiquidityVariables
 } from '~/generated/graphql'
-import { apolloClient } from '../apollo.server'
+import { getApolloClient } from '../apollo.server'
 
-export const getAssetInfo = async (args: QueryAssetArgs) => {
+export const getAssetInfo = async (request: Request, args: QueryAssetArgs) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.query<
     GetAssetQuery,
     GetAssetQueryVariables
@@ -56,7 +57,11 @@ export const getAssetInfo = async (args: QueryAssetArgs) => {
   return response.data.asset
 }
 
-export const getAssetWithFees = async (args: QueryAssetArgs) => {
+export const getAssetWithFees = async (
+  request: Request,
+  args: QueryAssetArgs
+) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.query<
     GetAssetWithFeesQuery,
     GetAssetWithFeesQueryVariables
@@ -97,7 +102,8 @@ export const getAssetWithFees = async (args: QueryAssetArgs) => {
   return response.data.asset
 }
 
-export const listAssets = async (args: QueryAssetsArgs) => {
+export const listAssets = async (request: Request, args: QueryAssetsArgs) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.query<
     ListAssetsQuery,
     ListAssetsQueryVariables
@@ -130,11 +136,11 @@ export const listAssets = async (args: QueryAssetsArgs) => {
     `,
     variables: args
   })
-
   return response.data.assets
 }
 
-export const createAsset = async (args: CreateAssetInput) => {
+export const createAsset = async (request: Request, args: CreateAssetInput) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     CreateAssetMutation,
     CreateAssetMutationVariables
@@ -166,7 +172,8 @@ export const createAsset = async (args: CreateAssetInput) => {
   return response.data?.createAsset
 }
 
-export const updateAsset = async (args: UpdateAssetInput) => {
+export const updateAsset = async (request: Request, args: UpdateAssetInput) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     UpdateAssetMutation,
     UpdateAssetMutationVariables
@@ -198,7 +205,8 @@ export const updateAsset = async (args: UpdateAssetInput) => {
   return response.data?.updateAsset
 }
 
-export const setFee = async (args: SetFeeInput) => {
+export const setFee = async (request: Request, args: SetFeeInput) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     SetFeeMutation,
     SetFeeMutationVariables
@@ -226,8 +234,10 @@ export const setFee = async (args: SetFeeInput) => {
 }
 
 export const depositAssetLiquidity = async (
+  request: Request,
   args: DepositAssetLiquidityInput
 ) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     DepositAssetLiquidityMutation,
     DepositAssetLiquidityMutationVariables
@@ -250,8 +260,10 @@ export const depositAssetLiquidity = async (
 }
 
 export const withdrawAssetLiquidity = async (
+  request: Request,
   args: CreateAssetLiquidityWithdrawalInput
 ) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     WithdrawAssetLiquidity,
     WithdrawAssetLiquidityVariables
@@ -273,13 +285,13 @@ export const withdrawAssetLiquidity = async (
   return response.data?.createAssetLiquidityWithdrawal
 }
 
-export const loadAssets = async () => {
+export const loadAssets = async (request: Request) => {
   let assets: ListAssetsQuery['assets']['edges'] = []
   let hasNextPage = true
   let after: string | undefined
 
   while (hasNextPage) {
-    const response = await listAssets({ first: 100, after })
+    const response = await listAssets(request, { first: 100, after })
 
     if (!response.edges.length) {
       return []
@@ -295,7 +307,8 @@ export const loadAssets = async () => {
   return assets
 }
 
-export const deleteAsset = async (args: DeleteAssetInput) => {
+export const deleteAsset = async (request: Request, args: DeleteAssetInput) => {
+  const apolloClient = await getApolloClient(request)
   const response = await apolloClient.mutate<
     DeleteAssetMutation,
     DeleteAssetMutationVariables