0

I have authenticated users in a react expo typescript application with keycloak version 22.0.1, but whenever I run the app with "npx expo start --web", I am getting the following errors although the user is getting authenticated:

WARNING in ./node_modules/@react-keycloak/core/lib/context.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\context.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\context.ts'

WARNING in ./node_modules/@react-keycloak/core/lib/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\index.ts'

WARNING in ./node_modules/@react-keycloak/core/lib/provider.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\provider.tsx' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\provider.tsx'

WARNING in ./node_modules/@react-keycloak/core/lib/types.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\types.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\core\lib\@react-keycloak\core\types.ts'

WARNING in ./node_modules/@react-keycloak/web/lib/context.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\context.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\context.ts'

WARNING in ./node_modules/@react-keycloak/web/lib/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\index.ts'

WARNING in ./node_modules/@react-keycloak/web/lib/provider.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\provider.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\provider.ts'

WARNING in ./node_modules/@react-keycloak/web/lib/useKeycloak.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\useKeycloak.ts' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\useKeycloak.ts'

WARNING in ./node_modules/@react-keycloak/web/lib/withKeycloak.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\withKeycloak.tsx' file: Error: ENOENT: no such file or directory, open 'D:\Projects\VehicleImporters-front-keycloak\node_modules\@react-keycloak\web\lib\@react-keycloak\web\withKeycloak.tsx'

I am using keycloak-js and react-keycloak/web: I have a file called keycloak.js as follows:


import Keycloak from "keycloak-js";

const keycloak = new Keycloak({
  url: "https://keycloakserverurl/auth/",
  clientId: "xyzclient",
  realm: "...",
  onLoad: 'check-sso',
  KeycloakResponseType: 'code',
});

export default keycloak;

and in app.tsx I have the following:


import { ReactKeycloakProvider } from "@react-keycloak/web";
import AuthUsageKeycloakJs from './src/pages/keycloak-js-web/auth-usage-keycloak-js';
import keycloak from './src/keycloak';


const App = () => {
    const [keycloakInitialized, setKeycloakInitialized] = React.useState(false);
    
    
    const eventLogger = (event: unknown, error: unknown) => {
        console.log('onKeycloakEvent', event, error)
      }
      
      const tokenLogger = (tokens: unknown) => {
        console.log('onKeycloakTokens', tokens)
      }

    React.useEffect(() => {
        const initializeKeycloak = async () => {
            try {
                await keycloak.init(
                    {
                        onLoad: "check-sso",
                        pkceMethod: "S256",
                        silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
                        checkLoginIframe: false
                    }
                );
                //   console.log('finished init');
                setKeycloakInitialized(true);
            } catch (error) {
                console.error("Keycloak initialization error:", error);
            }
        };
        initializeKeycloak();
    }, []);

    function callBackend() {
        callApiAddressesWithBearer();
    }
 
    return (
        <ReactKeycloakProvider initOptions={{ onLoad: 'login-required' }} authClient={keycloak} onEvent={eventLogger} onTokens={tokenLogger}>
            
            <Container className='main-container'>
                <NavBarComponent />
                <Row>
                    <AuthUsageKeycloakJs />
                </Row>
                <Row>
                    <Col>
                        <h1>React Multi Level Dropdown Menu With Mobile responsive</h1>
                        <Button onPress={callBackend} title="call api" />

                    </Col>
                </Row>
            </Container>
        </ReactKeycloakProvider>
    );
};

export default App;

I want to resolve the errors mentioned earlier, and if there are more guidance and instructions considering the usage and best practices I will happy to hear from you.

Galilo Galilo
  • 519
  • 5
  • 22

0 Answers0