Hi, I'm struggling with a core concept I think and not helped by trying to bring together a few things from different examples across different SST versions. I'm trying to create a very basic proof of concept where I have a sign-in form in a react app to enable access to the "private" API route. My stack

// Create Api
   const api = new Api(stack, 'Api', {
      defaults: {
         authorizer: 'iam',
      },
      routes: {
         'GET /private': 'functions/private.handler',
         'GET /public': {
            function: 'functions/public.handler',
            authorizer: 'none',
         },
      },
   });

   // Create auth provider
   const auth = new Auth(stack, 'Auth', {
      login: ['email'],
   });

   // Allow authenticated users invoke API
   auth.attachPermissionsForAuthUsers([api]);

   // Create a React Static Site
   const site = new ViteStaticSite(stack, 'Site', {
      path: 'frontend',
      environment: {
         VITE_APP_API_URL: api.url,
         VITE_APP_USER_POOL_ID: auth.userPoolId,
         VITE_APP_IDENTITY_POOL_ID: auth.cognitoIdentityPoolId || '',
         VITE_APP_USER_POOL_CLIENT_ID: auth.userPoolClientId,
         VITE_APP_REGION: app.region,
      },
   });

I'm managing the login with Amplify and again using Amplify to call the API as such.

API.get("my-api", "/private")
            .then((response) => console.log(response))
            .catch((e) => console.log(e));

But I'm getting 403 errors when I call the endpoint. I thought that by using the Amplify 'API' class it what use the logged in user, is this not the case? Am I bound to using the API class or can I achieve the same with using the fetch API?

how are you initialising amplify on frontend?

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: import.meta.env.VITE_APP_REGION,
    userPoolId: import.meta.env.VITE_APP_USER_POOL_ID,
    identityPoolId: import.meta.env.VITE_APP_IDENTITY_POOL_ID,
    userPoolWebClientId: import.meta.env.VITE_APP_USER_POOL_CLIENT_ID
  },
  API: {
    endpoints: [
      {
        name: "my-api",
        endpoint: import.meta.env.VITE_APP_API_URL,
        region: import.meta.env.VITE_APP_REGION
      },
    ]
  }
});

Calling the public API endpoint returns correctly, so I guess that tells me that it's all connected up.

weird, you don’t need to pass anything extra while using API from amplify. It auto detects auth

That's what I would have thought. This is really doing my head in, spent far too long now trying to get my head around what should be a very basic concept. This is my log in, FWIW.

async function handleSubmit(event) {
        try {
            await Auth.signIn(email, password);
            userHasAuthenticated(true);
            console.log("Logged in successfully");
        } catch (e) {
            console.log(e.message);
        }
    }

@Neil Balcombe are you checking for session before doing the request?

Yep, I have been using that repo as a reference. I do the same here.

async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      if (e !== "No current user") {
        alert(e);
      }
    }

    setIsAuthenticating(false);
  }