How to enable custom authenticated users to upload files directly from their browsers

Hello everyone, I wanted to allow users to upload files directly from the browser using AWS SDK. In the documentation, it is referred that it would require a user identity pool ID to initiate a connection with the S3 client and send the file they want.

import {
  ListObjectsCommand,
  ListObjectsCommandOutput,
  S3Client,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";

useEffect(() => {
    const client = new S3Client({
      region: "us-east-1",
      credentials: fromCognitoIdentityPool({
        clientConfig: { region: "us-east-1" },
        identityPoolId: "<YOUR_IDENTITY_POOL_ID>",
      }),
    });
    const command = new ListObjectsCommand({ Bucket: "bucket-name" });
    client.send(command).then(({ Contents }) => setObjects(Contents || []));
  }, []);

Now, Instead of using AWS Cognito for user authentication, I want to use my custom authentication system that would get user email and password fields save them in the database, and provide them with a JWT token for future authorized requests. However, I was confused about how to enable authenticated users to upload directly from the browser to the S3 bucket. How would the general flow look like if I wanted to make a user signup with email and password but with my logic, i.e., the user enters their email and password in the browser, it would send the field data to the backend, backend saves the information in the database. Now I somehow want to wrap this saved user with an individual identity pool id so that only that specific user can make a request directly from the browser to upload video to the S3 bucket