I'm trying to understand how to configure AWS Amplify React Native projects so that the `` and `` components work properly. I thought I'd write a blog post with questions and then update it with the answers I get from the Amplify community. It's a simple Profile screen I'm trying to manage, with a list of all the recent uploads to the S3 bucket. I'd like to know I have the permission configured properly for upload and viewing, then explore how I should store the S3 Image pathways (or keys) in DataStore such that I have a foolproof way to display the current user's profile picture as well as any other profile's picture (even if they upload to a 'protected' directory) I've set this storage up with the amplify-cli but I'd like to know how to double check that CORS and the Bucket's policies are correctly assigned for access via the app's Amplify toolkit. ``` import React, { useState, useEffect } from 'react'; import { View, Text, Image, Button, ActivityIndicator } from 'react-native'; import Amplify from '@aws-amplify/core'; import Auth from '@aws-amplify/auth'; import { Storage } from 'aws-amplify' import { S3Image, S3Album } from 'aws-amplify-react-native' import config from '../../aws-exports'; Amplify.configure(config); import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; import defaultAvatar from '../assets/images/defaultAvatar.png' Amplify.configure({ Storage: { AWSS3: { bucket: 'XXXXXXXXXXX-staging', region: 'us-west-2', } }, Auth: { region: 'us-west-2', Region userPoolId: 'YYYYYYYYYYYY' }, Analytics: { disabled: true, } }) ``` ### Here is my main component below - and here are my questions * I'm able to print out my `currentAuthenticatedUser`'s attributes, but how is this user passed to the `S3Image` call and the `Storage` call? * I'm getting 403 errors for the most part, but I can see the images getting uploaded, just not shown on the `useEffect` retrieval * What are the checklists to run through to ensure CORS and Bucket Policy (json) is set correctly for access? * Should we be importing from @aws-amplify or 'aws-amplify' with deconstructors ({Auth}) * Lastly, if `Storage` is configured at `{level: 'protected'}` then how will other users be able to use the key I need to store in DataStore ``` const Profile = ({ navigation }) => { const [avatar, setAvatar] = useState(defaultAvatar); const [avatarFileName, setAvatarFileName] = useState('') const [allUploads, setAllUploads] = useState([]) const handlePicker = () => { launchImageLibrary({ mediaType: 'photo' }, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { setAvatar({ uri: response.uri }); setAvatarFileName(response.fileName); } }); }; const uploadImageAsync = async (pickerResult) => { try { console.log(avatar) const profileFile = await fetch(avatar.uri); const blob = await profileFile.blob(); console.log('*** gonna post ' + avatarFileName) Storage.put(avatarFileName, blob) .then(result => console.log(result)) .catch(err => console.log(err)) } catch (e) { console.log('Something errored ' + e) } } useEffect(() => { Storage.list('', { level: 'protected' }) .then(results => { console.log('s3 list callback') setAllUploads(results); console.log(results) }) Auth.currentAuthenticatedUser() .then(user => { console.log(user.attributes.phone_number) }) }, []) return ( <> {allUploads && allUploads.map((upload, i) => ( ))} } style={{ width: 400, height: 400 }} />

oristian

RN: Amplify Auth & Storage

Join Our Newsletter. No Spam, Only the good stuff.