aws-amplify
Storage/S3Image not downloading/displaying with InvalidToken The provided token is malformed or otherwise invalid error
Before opening, please confirm:
- [X] I have searched for duplicate or closed issues and discussions.
- [X] I have read the guide for submitting bug reports.
- [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
React Native
Amplify APIs
Storage
Amplify Categories
storage
Environment information
# Put output below this line
System:
OS: macOS 12.3
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 226.38 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.1 - /usr/local/bin/node
Yarn: 1.22.15 - /usr/local/bin/yarn
npm: 8.5.0 - /usr/local/bin/npm
Watchman: 2022.01.31.00 - /usr/local/bin/watchman
Browsers:
Chrome: 99.0.4844.84
Firefox: 91.7.1
Safari: 15.4
npmPackages:
@babel/core: ^7.12.9 => 7.17.8
@react-native-async-storage/async-storage: ~1.15.0 => 1.15.17
@react-native-community/netinfo: 7.1.3 => 7.1.3
@react-native-picker/picker: 2.2.1 => 2.2.1
@types/react: ~17.0.21 => 17.0.43
@types/react-native: ~0.64.12 => 0.64.24
HelloWorld: 0.0.1
aws-amplify: ^4.3.19 => 4.3.19
aws-amplify-react-native: ^6.0.4 => 6.0.4
expo: ~44.0.0 => 44.0.6
expo-image-picker: ~12.0.1 => 12.0.2
expo-status-bar: ~1.2.0 => 1.2.0
hermes-inspector-msggen: 1.0.0
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
typescript: ~4.3.5 => 4.3.5
npmGlobalPackages:
@aws-amplify/cli: 7.6.26
@expo/ngrok: 4.1.0
@gridsome/cli: 0.3.4
@vercel/ncc: 0.33.0
amplify: 0.0.11
aws-cdk: 2.2.0
corepack: 0.10.0
depcheck: 1.4.2
eas-cli: 0.48.2
expo-cli: 5.3.0
http-server: 14.0.0
jest: 27.4.7
json-stable-stringify: 1.0.1
npm: 8.5.0
nx: 13.2.2
sharp-cli: 1.15.0
typescript: 4.5.4
yarn: 1.22.15
Describe the bug
I am trying to use S3Image to upload/download image to be stored in s3. It uploads the image, but it doesn't appear to display anything on the download. If I enabled Amplify LOG_LEVEL debug, I can see the presigned url it is generating. And if I try to open that presigned url in a browser, i am getting the following error:
InvalidToken
Not sure if this is the real error. I am just trying to get that S3Image to display the uploaded image
Expected behavior
I expect the image that was uploaded to be displayed
Reproduction steps
- npm install -g @aws-amplify/cli
- npm install --global expo-cli
- expo init s3-test (chose blank Typescript)
- amplify configure
- npm install aws-amplify aws-amplify-react-native @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker
- amplify init
- amplify add storage (Content, add Auth default)
- expo install expo-image-picker
- npm i --save-dev @types/aws-amplify-react-native
- expo doctor --fix-dependencies
Code Snippet
// Put your code below this line.
import { StatusBar } from 'expo-status-bar';
import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { Amplify } from 'aws-amplify'
import awsExports from './src/aws-exports'
import * as ImagePicker from 'expo-image-picker';
import { S3Image, withAuthenticator } from 'aws-amplify-react-native';
import React, { useState } from 'react';
Amplify.configure({
...awsExports,
Analytics: {
disabled: true,
},
});
Amplify.Logger.LOG_LEVEL = 'WARN';
const App = () => {
const key = 'myImage';
const [image, setImage] = useState<Blob | null>(null);
const fetchResourceFromURI = async (uri: string) => {
const response = await fetch(uri);
const blob = await response.blob();
return blob;
};
const pickImage = async () => {
// No permissions request is necessary for launching the image library
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
const blob = await fetchResourceFromURI(result.uri);
setImage(blob);
}
};
return (
<SafeAreaView>
<Button onPress={pickImage} title="Select Image" />
<S3Image
level="public"
imgKey={key}
body={image}
style={{ width: 100, height: 100 }}
/>
</SafeAreaView>
);
};
export default withAuthenticator(App);
Log output
// Put your logs below this line
didn't see any errors or warnings in the log
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
Using MAC Iphone 13 simulator for expo/metro packages
Is there any time between when the URL is logged and when you are trying it in the browser. I think these signed url's are only valid for 15 minutes and a time interval could explain the behavior you're seeing. If it's not this, we'll need to follow your repro steps to determine what is causing this issue.
Thanks, Aaron
getting the same issue. for me there is no time between trying to use url and when I receive it.
Hi @dkhunt27 - following up here. Looks like you are using the <S3Image /> component from the older version of Amplify UI (aws-amplify-react-native). Could you try using the the Image component from react-native to verify that the image URL returned from S3 is valid and help isolate if this issue is specific to the UI component?
cc @Spaceage1217
@Spaceage1217 @dkhunt27 following up here again. Let me know if the above helps.
Thanks 🙂