[SOLVED] React Native WebView Vimeo Embedding bypassing Privacy Implementation

React Native WebView Vimeo Embedding bypassing Privacy Implementation

I'm using react-native-webview to embed Vimeo videos in my React Native app. The videos have privacy restrictions enabled on Vimeo and I'm struggling to authorise the videos so that they aren't 'private' in my app. According to my research, all I need to do is add the Authorization header as you can see later in my code.

I've tried every combination of the "headers" line, but I just can't seem to un-privatise them. To clarify, I own the videos, and the access_code is correct in my implementation.

I would like some clarity to know if I'm inputting the data correctly, or if I'm missing something?

My code:

import React from "react";
import {
Dimensions,
ActivityIndicator,
View
} from 'react-native';
import WebView from 'react-native-webview';
import urlParser from "js-video-url-parser";

const VimeoEmbed = (props) => {

const { url } = props;

const { width } = Dimensions.get("window");
const height = 0.5625 * width;

const Source = () => {
        return {
            headers: { 
                Authorization: 'bearer 0d1450gs4t853kgf3f6c09d1'
            },
            html: `
            <html>
                <head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
                <body>
                    <div>
                        <iframe src="https://player.vimeo.com/video/${url}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
                        <script src="https://player.vimeo.com/api/player.js"></script>
                    </div>
                </body>
            </html>
            `,
        }
    }

const VideoComponent =
    <>
        <WebView
            source={Source()}
            startInLoadingState={true}
            scrollEnabled={false}
            originWhitelist={['*']}
            allowsInlineMediaPlayback={true}
            style={{
                height: height,
                width: width,
                margin: 0,
                padding: 0,
            }}
        />
    </>

return VideoComponent;
}

export default VimeoEmbed;

Solution

  const [apiResponse, setApiResponse] = useState();

  useEffect(() => {
        axios.get(`https://api.vimeo.com/videos/${ParseUrl.id}`, {
            headers: {
                referer: "https://yourUrlHere.com",
                Authorization: `Bearer ${Token}`,
            }
        })
            .then((response) => {
                setApiResponse(response.data);
            });
    }, [])

    const Source = () => { // This is the source that you would insert into the WebView
            return {
                uri: apiResponse.player_embed_url,
                headers: {
                    referer: "https://yourUrlHere.com",
                    Authorization: `Bearer ${Token}`
                },
        }
    }