feat(frontend, mock-ase): secure admin API with Hydra #2466

njlie · 2024-03-01T23:05:31Z

Changes proposed in this pull request

Adds a Hydra image to the list of docker containers that are spun up
Adds a middleware to the admin API in backend that verifies the token with a request to the Hydra container.
- Returns 401 if invalid token, continues to next() if valid
Adds a boilerplate login/consent screen to the Admin UI, to be replaced with ORY Kratos or something more sophisticated with design auth mechanism for admin UI #2200
Implements a basic Hydra authorization flow with the login & consent screens
- Captures the authorization from this flow in a new session storage instance in the Remix app
Re-initializes the Admin UI Apollo Client each time it makes a request, so that it may pass in an auth token once one has been acquired
Uses updated error handling to handle & communicate Unauthorized responses from the Apollo client

Context

Fixes #2218 and #2497.
Adds a Hydra container, a basic authorization flow for it, and a middleware in the API to check for a valid authorization token for a given API request.

Checklist

netlify · 2024-03-13T22:46:17Z

✅ Deploy Preview for brilliant-pasca-3e80ec canceled.

Name	Link
🔨 Latest commit	`44e4c95`
🔍 Latest deploy log	https://app.netlify.com/sites/brilliant-pasca-3e80ec/deploys/65fc5cfe55ffff0008067085

njlie · 2024-03-13T23:22:26Z

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

@@ -284,13 +284,15 @@ export async function createWalletAddress(
    })
 }

-export async function createWalletAddressKey({


Just formatting in this file

njlie · 2024-03-13T23:22:39Z

localenv/mock-account-servicing-entity/app/lib/run_seed.server.ts

 export async function setupFromSeed(config: Config): Promise<void> {
  const assets: Record<string, Asset> = {}
  for (const { code, scale, liquidity, liquidityThreshold } of config.seed
    .assets) {
-    const { asset } = await createAsset(code, scale, liquidityThreshold)


Just formatting in this file as well

njlie · 2024-03-13T23:32:57Z

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

@@ -24,251 +24,300 @@ import type {
  WithdrawAssetLiquidity,


This, and other files with the path /frontend/app/lib/api/*.server.ts, will have messy diffs but all follow the same change: the query is now nested inside of a try-catch block, and the catch block will catch the error, and if it is an Unauthenticated Apollo Error, it will throw an error formatted for Remix instead.

njlie · 2024-03-13T23:33:22Z

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

@@ -21,195 +21,238 @@ import {
  type GetOutgoingPaymentVariables,


See https://github.com/interledger/rafiki/pull/2466/files#r1524030144

njlie · 2024-03-13T23:33:34Z

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

@@ -22,202 +22,246 @@ import type {
  WithdrawPeerLiquidity,


See https://github.com/interledger/rafiki/pull/2466/files#r1524030144

njlie · 2024-03-13T23:33:44Z

packages/frontend/app/lib/api/wallet-address.server.ts

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'


See https://github.com/interledger/rafiki/pull/2466/files#r1524030144

njlie · 2024-03-13T23:33:54Z

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

@@ -1,51 +1,60 @@
 import { gql } from '@apollo/client'


See https://github.com/interledger/rafiki/pull/2466/files#r1524030144

njlie · 2024-03-13T23:34:33Z

packages/frontend/app/lib/apollo.server.ts

@@ -16,8 +13,8 @@ BigInt.prototype.toJSON = function (this: bigint) {
  return this.toString()
 }

-if (!global.__apolloClient) {
-  global.__apolloClient = new ApolloClient({
+export function getApolloClient(token?: string) {


We need to re-instantiate the Apollo Client each time a request is made now, so that it is able to pick up whether or not an authorization token is present. Normal stuff for React apps, in those cases it just happens inside of a React element whenever the app state changes.

njlie · 2024-03-13T23:46:45Z

packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx

@@ -4,6 +4,7 @@ import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'


This file, and other files in /app/routes/*.tsx all generally involve modifying the Remix loader and/or action to retrieve the API auth token from the session and passing it to whatever API call it's making.

njlie · 2024-03-13T23:46:55Z

packages/frontend/app/routes/assets.$assetId.tsx

@@ -18,19 +18,25 @@ import { Button, ErrorPanel, Input } from '~/components/ui'
 import { FeeType } from '~/generated/graphql'
