AuthenticatedWebview.tsx

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { WebView } from 'react-native-webview';
import { AuthHeaders, getCognitoHeaders } from '@root/cognito/cognitoSessionInfo';
import { useAppSelector } from '@hooks/hooks';

export interface IAuthenticatedWebviewProps {
  url: string;
  injectedJavaScript?: any;
  onShouldStartLoadWithRequest: any;
}

const AuthenticatedWebview: React.FC<IAuthenticatedWebviewProps> = ({
  onShouldStartLoadWithRequest,
  url,
  injectedJavaScript,
}) => {
  const app = useAppSelector((state) => state.app);
  const env = useAppSelector((state) => state.app?.env);

  const [headers, setHeaders] = useState<AuthHeaders | null>(null);
  useEffect(() => {
    async function getHeaders() {
      setHeaders(
        await getCognitoHeaders(app.cognitoUserPoolId, app.cognitoClientId, env, '', true)
      );
    }
    getHeaders();
  }, []);

  if (!headers) return null;

  const source = {
    uri: url,
    headers,
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        useWebKit={false}
        source={source}
        sharedCookiesEnabled={true}
        incognito={true}
        startInLoadingState={true}
        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest || (() => true)}
        renderLoading={() => (
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <ActivityIndicator animating={true} color="rgb(249,100,75)" size="large" />
          </View>
        )}
        injectedJavaScript={injectedJavaScript || ''}
      />
    </View>
  );
};

export default AuthenticatedWebview;