How to correctly include and reference secret environment variables (AWS Amplify, process.env.secrets)

I have set up an AWS amplify app and imported my github project (a web app using Vue and Supabase as a database).

To protect my supabase address and key I stored both values in secret environment variables as described here: Official documentation

I used the AMPLIFY_SIWA_CLIENT_ID and AMPLIFY_SIWA_PRIVATE_KEY variables and put in the respective values for my supabase project.

When I build the project the build runs through successfully and I see the terminal message during the Backend process:

[INFO]: # Retrieving environment cache...
[INFO]: # Retrieved environment cache
[INFO]: ---- Setting Up SSM Secrets ----
[INFO]: SSM params {"Path":"/amplify/[MY_PROJECT_ID]/staging/","WithDecryption":true}
[INFO]: No live updates for this build run

Issue

Following the end of the build however, in my app, where I try to import the variables this does not work.

import { createClient } from '@supabase/supabase-js'

interface Secrets {
  AMPLIFY_SIWA_CLIENT_ID?: string;
  AMPLIFY_SIWA_PRIVATE_KEY?: string;
}

let secrets: Secrets = {};
if (process.env.secrets) {
  secrets = JSON.parse(process.env.secrets);
}

const supabaseUrl = secrets.AMPLIFY_SIWA_CLIENT_ID;
const supabaseAnonKey = secrets.AMPLIFY_SIWA_PRIVATE_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

The website loads but then crashes with the error message that the value for supabaseUrl is not found.

Question

My question is if this is maybe related to my build settings - do I have to make the secret key call explicit there or do I need to modify my github files/the variable call within my supabase.ts file in my project to allow this to run through?

Many thanks for the help