https://serverless-stack.com/ logo
Join Slack
Powered by
What do I have to configure to be able to access p...
# help
a
What do I have to configure to be able to access public resources in a bucket from within react?
So far, I have this permission in my AuthStack:
Copy code
this.auth.attachPermissionsForAuthUsers([
         // Policy granting access to a specific folder in the bucket
         new PolicyStatement({
            actions: ["s3:*"],
            effect: Effect.ALLOW,
            resources: [
               bucket.bucketArn + "/private/${<http://cognito-identity.amazonaws.com:sub|cognito-identity.amazonaws.com:sub>}/*",
               bucket.bucketArn + "/public/*",
            ],
         }),
      ]);
However, when I try to access something in the public folder with 
Storage.vault.get("public/bla")
I always get an access denied, and I can see that it actually tried to access 
private/cognito-identity-etc/public/bla
Seems like I am missing some react config/setup maybe
in React, I just have this:
Copy code
Amplify.configure({
   Auth: {
      mandatorySignIn: false,
      region: config.cognito.REGION,
      userPoolId: config.cognito.USER_POOL_ID,
      identityPoolId: config.cognito.IDENTITY_POOL_ID,
      userPoolWebClientId: config.cognito.APP_CLIENT_ID
   },
   Storage: {
      region: config.s3.REGION,
      bucket: config.s3.BUCKET,
      identityPoolId: config.cognito.IDENTITY_POOL_ID
   },
   API: {
      endpoints: [
         {
            name: "main",
            endpoint: config.apiGateway.URL,
            region: config.apiGateway.REGION
         },
      ]
   }
});
and this:
Copy code
const config = {
   // Backend config
   s3: {
      REGION: process.env.REACT_APP_REGION,
      BUCKET: process.env.REACT_APP_BUCKET,
   },
   apiGateway: {
      REGION: process.env.REACT_APP_REGION,
      URL: process.env.REACT_APP_API_URL,
   },
   cognito: {
      REGION: process.env.REACT_APP_REGION,
      USER_POOL_ID: process.env.REACT_APP_USER_POOL_ID,
      APP_CLIENT_ID: process.env.REACT_APP_USER_POOL_CLIENT_ID,
      IDENTITY_POOL_ID: process.env.REACT_APP_IDENTITY_POOL_ID,
   },
};
I now managed to make it request the correct path with 
Storage.get(path, { level: "public"});
but unfortunately, I still get an Access Denied, or at least that's what's displayed when I click on the link that's output to the console when I log the result of this operation
hmmm, with 
download: true
I now get a CORS error
probably have to put localhost in the cors config, right?
didn't help
I've changed the cors config to allow origin *, and now the cors error is gone, but I still get a 403, and I'm also wondering how to deal with cors error on localhost
I managed to get it to work with allow origin * (URL was wrong), but how do i limit it to my domain and localhost?
f
Hey @Adrian Schweizer, you can configure the 
cors
props like this:
Copy code
new Bucket(this, "Bucket", {
  s3Bucket: {
    cors: [
      allowedMethods: [s3.HttpMethods.GET],
      allowedOrigins: ['<https://domain.com>'],
    ],
  },
});
Did you get a chance to get it to work?
a
@Frank Thanks for checking back. Yes, I figured out that it works with the protocol part. I originally had it set for my domain without the protocol part, which made me think it should work this way, but it turned out, I didn't even use S3 anymore in my app, so I kind of tricked myself again (as usual) 🙂
Open in Slack
PreviousNext
Powered by