React native Image component getting 401 even though it's authorized

Viewed 98

I'm having a very bizarre problem when trying to get images from my API (Express with Passport using JWT strategy). The component I'm trying to load the image in is this:

function ImagePreview(props) {
    const imageId = props.imageId;
    const [token, setToken] = useState(null);

    useEffect(() => {
        SecureStore.getItemAsync('accessToken').then(jwt => {
            setToken(JSON.parse(jwt));
        });
    },[]);

    return(
        <View>
            { !token ? <Text>Loading...</Text> : (
                <Image
                    style={styles.imagePreview}
                    source={{
                        uri: config.apiURI + "/media/" + imageId,
                        headers: { authorization: token }}
                    }
                />
            )}
        </View>
    )
}

But, when I run the app I get a 401 error on my API indicating I'm not authorized to use the resource. You'd think this might be because my token isn't being set correctly but I have the same problem even if I hard code a valid token into the auth header. Another weird thing is that I've actually got it to work on occasion but it (seemingly) randomly stops working. When I make a get request using Postman I never have that problem.

0 Answers
Related