Update api and configure supported environment variables

lib/ApiStack.ts

@@ -3,6 +3,8 @@ import * as sst from '@serverless-stack/resources'
 import { MultiStackProps } from '.'
 
 export class ApiStack extends sst.Stack {
+  readonly api: sst.Api
+
   constructor(scope: sst.App, id: string, props: MultiStackProps) {
     super(scope, id, props)
 

lib/WebStack.ts

@@ -14,6 +14,7 @@ export class WebStack extends sst.Stack {
         props?.auth?.cognitoUserPoolClient?.userPoolClientId || '',
       NEXT_PUBLIC_USER_POOL_ID: props?.auth?.cognitoUserPool?.userPoolId || '',
       NEXT_PUBLIC_MULTI_TENANT_TABLE_NAME: props.table?.tableName || '',
+      NEXT_PUBLIC_API_URL: props.api?.url || '',
     }
 
     const nextJsSite = new StaticSite(this, 'NextJSSite', {

lib/index.ts

@@ -7,6 +7,7 @@ import { ApiStack } from './ApiStack'
 export interface MultiStackProps extends sst.StackProps {
   auth?: sst.Auth
   table?: sst.Table
+  api?: sst.Api
 }
 
 export default function main(app: sst.App): void {
@@ -20,13 +21,14 @@ export default function main(app: sst.App): void {
     auth: authStack.auth,
   })
 
-  new WebStack(app, 'WebStack', {
+  const apiStack = new ApiStack(app, 'ApiStack', {
     table: dataStack.table,
     auth: authStack.auth,
   })
 
-  new ApiStack(app, 'ApiStack', {
+  new WebStack(app, 'WebStack', {
     table: dataStack.table,
     auth: authStack.auth,
+    api: apiStack.api,
   })
 }

src/frontend/contexts/user-provider.tsx

@@ -43,8 +43,6 @@ export const UserContextProvider = (props: Props): ReactElement => {
   const [authState, setAuthState] = useState<AuthState>(AuthState.SignedOut)
   const [user, setUser] = useState<User>({})
 
-  console.info('Current User', { user })
-
   return (
     <UserStore.Provider
       value={{

src/frontend/env.example

@@ -0,0 +1,6 @@
+  NEXT_PUBLIC_REGION
+  NEXT_PUBLIC_USER_POOL_ID
+  NEXT_PUBLIC_IDENTITY_POOL_ID
+  NEXT_PUBLIC_USER_POOL_CLIENT_ID
+  NEXT_PUBLIC_MULTI_TENANT_TABLE_NAME
+  NEXT_PUBLIC_API_URL

src/frontend/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "sst-env -- next dev",
+    "dev": "next dev",
     "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@aws-amplify/ui-components": "^1.7.1",
     "@aws-amplify/ui-react": "^1.2.8",
-    "@aws-sdk/client-apigatewayv2": "^3.25.0",
     "@aws-sdk/util-dynamodb": "^3.25.0",
     "@next/bundle-analyzer": "^11.1.0",
     "aws-amplify": "^4.2.2",
@@ -25,7 +24,6 @@
     "@aws-sdk/client-dynamodb": "^3.25.0",
     "@aws-sdk/credential-provider-cognito-identity": "^3.25.0",
     "@aws-sdk/lib-dynamodb": "^3.25.0",
-    "@serverless-stack/static-site-env": "^0.45.2",
     "@types/aws4": "^1.5.2",
     "@types/react": "17.0.15",
     "@typescript-eslint/eslint-plugin": "^4.28.5",

src/frontend/utils/aws/request.ts

@@ -1,64 +1,34 @@
-import { SignatureV4 } from '@aws-sdk/signature-v4'
-import { Sha256 } from '@aws-crypto/sha256-js'
-import { HttpRequest } from '@aws-sdk/protocol-http'
-import { REGION } from './base'
 import { cognitoCredentialProvider } from './cognito'
 import * as aws4 from 'aws4'
 
-const apiSigner = (idToken: string) =>
-  new SignatureV4({
-    region: REGION,
-    credentials: cognitoCredentialProvider(idToken),
-    service: 'execute-api',
-    sha256: Sha256,
-  })
-
 export const awsApiGatewayRequest = async <T>(
   path: string,
   idToken: string
 ): Promise<T> => {
+  const url = new URL(String(process.env.NEXT_PUBLIC_API_URL))
+
+  // TODO: Getting temporary credentials for every API call should not be
+  // necessary. We should get from cache or refresh.
+  //
+  // Potentially just use Amplify API support to avoid this stuff.
   const credentials = cognitoCredentialProvider(idToken)
   const creds = await credentials()
-  console.info('Credentials', creds)
 
   const opts = {
     path,
     method: 'GET',
-    hostname: '027zjwioj3.execute-api.eu-west-2.amazonaws.com',
-    protocol: 'https',
+    hostname: url.host,
+    protocol: url.protocol,
     body: '',
     headers: {},
   }
 
   aws4.sign(opts, creds)
 
-  console.info('Signed opts', opts)
-
-  const signer = apiSigner(idToken)
-
-  console.info('Signer', signer)
-
-  const request = await signer.sign(
-    new HttpRequest({
-      path,
-      method: 'GET',
-      hostname: '027zjwioj3.execute-api.eu-west-2.amazonaws.com',
-      protocol: 'https',
-      body: '',
-    })
-  )
-
-  console.info('Signed aws request', request)
-
-  return fetch(
-    `https://027zjwioj3.execute-api.eu-west-2.amazonaws.com${path}`,
-    {
-      headers: opts.headers,
-    }
-  ).then(async (response) => {
-    console.info(response)
+  return fetch(`${url.origin}${path}`, {
+    headers: opts.headers,
+  }).then(async (response) => {
     const json = await response.json()
-    console.info(json)
     return json
   })
 }