Integration with keycloak and react running into errors

Question

I followed a tutorial from following link,

https://blog.logrocket.com/implement-keycloak-authentication-react/

and developed the react app with integrations to keycloak server.

But when I run the react app using npm start, it gives me following errors on console,

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:\learn\keycloakreact eactkc ode_modules@react-keycloak\core\lib@react-keycloak\core\context.ts' file: Error: ENOENT: no such file or directory, open 'D:\learn\keycloakreact eactkc ode_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:\learn\keycloakreact eactkc ode_modules@react-keycloak\core\lib@react-keycloak\core\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\learn\keycloakreact eactkc ode_modules@react-keycloak\core\lib@react-keycloak\core\index.ts'

... and more such errors and this weird path (D:\learn\keycloakreact eactkc ode_modules@react-keycloak\core\lib@react-keycloak\core\context.ts) doesn't exist in my drive.

And when I open the page at http://localhost:3000 the page keeps auto refreshing repeatedly with following url and doesn't stop. The url on browser looks like following,

http://localhost:3000/#state=15a4ae98-7357-4877-8c49-90cbd944e3b1&session_state=05b3d7e2-76e0-42d5-94ef-9ae7d658df8f&code=7eaaf97e-4813-4ceb-8d38-5a9bab3f5df8.05b3d7e2-76e0-42d5-94ef-9ae7d658df8f.3b9bb609-5578-4c03-bb7c-fa15fd59fc16

In developer console window, I see several errors appearing saying below text,

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute. Attaching a screenshot for same.

I am using node version v14.20.0

Keycloak server version 18.0.2

Following is the dependencies section of my package.json file of my react keycloak project.

"dependencies": {
    "@react-keycloak/web": "^3.4.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "keycloak-js": "^18.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Any help is deeply appreciated on this.

Integration with keycloak and react running into errors

0 Answers