Support `keycloak-js` v17.0.0 #180

fredriklindell · 2022-02-12T15:24:34Z

Describe the bug
Unhandled Runtime Error
TypeError: Keycloak is not a constructor

When using @react-keycloak/ssr together with the latest version of keycloak-js.

To Reproduce
Steps to reproduce the behavior:

React or NextJS application, in this case NextJS
Install keycloak.js v17.0.0
Install @react-keycloak/ssr v3.3.0
Build and start application
Go to http://localhost:3000
See error

Expected behavior
Page should render without error as when same config but for earlier version of keycloak-js (v16.1.1).

Desktop (please complete the following information):

OS: Arch linux
Browser: chromium
Version: 98.0.4758.80 (Official Build) Arch Linux (64-bit)

Additional context
Unhandled Runtime Error
TypeError: Keycloak is not a constructor

Call Stack
getKeycloakInstance
node_modules/@react-keycloak/ssr/lib/internals/keycloak.js (25:0)
new SSRKeycloakProvider
node_modules/@react-keycloak/ssr/lib/SSRKeycloakProvider.js (63:41)

The text was updated successfully, but these errors were encountered:

bnopacheco · 2022-02-20T22:14:41Z

same problem here

OS: macOS 10.14.6
Browser: Chrome
Version: 98.0.4758.102 (Versão oficial) (x86_64)

irhamputra · 2022-02-22T18:34:39Z

any update? otherwise with keycloak-js@^16.1.1 is still working like a charm

fredriklindell · 2022-03-18T06:41:11Z

FYI!

I found that Next-Auth now has a Keycloak provider. I migrated my app to use Next-Auth and it works really good.

irhamputra · 2022-03-18T07:27:20Z

@fredriklindell wow thats nice. But can you show me the workaround how do you implement?

nouman91 · 2022-04-12T21:48:43Z

Any update on this will be really appreciated

milosrs · 2022-04-19T23:31:57Z

I have the same issue. Also, I'm getting a linter error on these lines stating:

<SSRKeycloakProvider
      keycloakConfig={keycloakCfg}
      initOptions={keycloakInitOptions}
      persistor={SSRCookies(cookies)}
      LoadingComponent={<Loader/>}
      autoRefreshToken={true}
    >
        <Component {...pageProps}/>
    </SSRKeycloakProvider>

Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SSRKeycloakProvider> & Readonly<SSRKeycloakProviderProps<SSRAuthClient>>

tobiasfrei · 2022-05-04T12:40:44Z

it affects also 'keycloak v18.0.0', change needed in node_modules/@react-keycloak/ssr/lib/internals/keycloak.js

Line 20 (import default):
var Keycloak = !isServer() ? require('keycloak-js').default : null;

Line 25 (remove constructor):
keycloakInstance = Keycloak(keycloakConfig);

You are able to manage this package locally by resolving webpack modules, because it has become really quiet here.
resolve: { modules: ["node_modules", ROOT_PATH.resolve(__dirname, "dir/to/local/packages")], },

rybkowskigrzegorz · 2022-05-04T13:59:21Z

Have the same issue, reverting to previous versions on the other hand create a loop of log-in log-out. Any updates on where this can be fixed?

SIMULATAN · 2022-05-07T10:20:22Z

I just noticed that using the keycloak.logout() method, it redirects you to the correct URL but with the query parameter redirect_uri instead of the correct redirect_url, is this also caused by the old keycloak-js version?

EDIT: I modified the keycloak.js file according to tobias and it FINALLY works now!
I also had to change the algorithm to HS256 tho, the server returned a HTTP 431 because the token in the request url was too long.

tobiasfrei · 2022-05-07T19:01:20Z

I've forked an updated package with Keycloak >=17 support until this one is back, you can use npm i @react-keycloak-fork/web --save and npm i @react-keycloak-fork/ssr --save

@react-keycloak-fork/web
@react-keycloak-fork/ssr

tobiasfrei · 2022-06-07T15:25:06Z

I've forked an updated package with Keycloak >=17 support until this one is back, you can use npm i @react-keycloak-fork/web --save and npm i @react-keycloak-fork/ssr --save

@react-keycloak-fork/web @react-keycloak-fork/ssr

Don't use this package or fork anymore, just use an openId connecter (oidc) and get rid of cookies and all that. Keycloak is in change.
https://www.keycloak.org/docs/latest/securing_apps/index.html#_modern_browsers

SIMULATAN · 2022-06-07T15:26:52Z

Please don't delete the package, I have a project using it due in 3 days and don't have the time to upgrade. (It's only a "testing"-project with no real issues with loosing things)

tobiasfrei · 2022-06-07T15:28:12Z

Please don't delete the package, I have a project using it due in 3 days and don't have the time to upgrade. (It's only a "testing"-project with no real issues with loosing things)

I would never delete any package for sure. Just in case if you build big prod projects, use openid and only bearer. Otherwise you got a hard time to impersonate users role based.

stephane-segning · 2022-07-12T12:07:49Z

So after some researches I came across this library here https://www.npmjs.com/package/react-oidc-context which is doing the same job.

giovannalinda · 2022-07-13T19:37:20Z

hey @milosrs

did you manage to solve the problem? I have the same issue

milosrs · 2022-07-13T19:40:49Z

hey @milosrs

did you manage to solve the problem? I have the same issue

I have switched to NextAuth

bitpickle · 2022-07-20T03:52:36Z

@milosrs

can you show me how you implemented with NextAuth?

pecataToshev · 2022-07-20T21:59:02Z

@milosrs
If it's possible I also would like to take a look in your implementation 😃

milosrs · 2022-07-20T22:03:41Z

@pecataToshev
@bitpickle
@giovannalinda
Due to multiple requests, I'm making my example public. See my profile and look for marketing bots frontend.
https://github.com/milosrs/marketing-bots-frontend

bitpickle · 2022-07-27T18:57:44Z

@pecataToshev @bitpickle @giovannalinda Due to multiple requests, I'm making my example public. See my profile and look for marketing bots frontend. https://github.com/milosrs/marketing-bots-frontend

Thank you <3

Sup3r-Us3r · 2022-08-06T15:17:03Z

@milosrs

can you show me how you implemented with NextAuth?

I also chose to use NextAuth in Next.js, and I also created a Backend in Node.js with the implementation of keycloak-connect to simulate a real case, in which we need to consume a service that requires Keycloak authentication, the process is all documented step by step, the implementation in Next.js still has a Refresh Token, if you want to see it here it is:

https://github.com/Sup3r-Us3r/keycloak-nextjs-nodejs

milosrs · 2022-08-06T15:19:33Z

@Sup3r-Us3r
Look at my comment above.

Sup3r-Us3r · 2022-08-06T15:23:19Z

@milosrs Yes I saw your comment, it's just another implementation I wanted to share, both are valid, thanks!

milosrs · 2022-08-06T15:24:53Z

@Sup3r-Us3r
Oooh sorry, I didn't understand it at first. Great job!

Shovan1016 · 2022-11-01T10:48:29Z

npm i keycloak-js@12.0.3 -----this is the solution

adibamine · 2022-11-19T10:26:38Z

https://github.com/milosrs/marketing-bots-frontend

I wanted to switch to nextauth, but i can t understand why does it need client secret for the configuration.
react-keycloak-ssr requires the client id only.
Any idea?

lcanavesio · 2023-02-03T05:44:05Z

Hello.
I ended up creating a simple project. You can use it and tell me if it worked for you.
npm install react-keycloak-js --save

rsevalueserve · 2023-03-13T18:03:00Z

I have the same issue. Also, I'm getting a linter error on these lines stating:
<SSRKeycloakProvider
      keycloakConfig={keycloakCfg}
      initOptions={keycloakInitOptions}
      persistor={SSRCookies(cookies)}
      LoadingComponent={<Loader/>}
      autoRefreshToken={true}
    >
        <Component {...pageProps}/>
    </SSRKeycloakProvider>
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SSRKeycloakProvider> & Readonly<SSRKeycloakProviderProps<SSRAuthClient>>

I solve using the fork version https://www.npmjs.com/package/@react-keycloak-fork/web

schereradi mentioned this issue May 7, 2022

Not working with keycloak-js v18.0.0 #188

Closed

tobiasfrei mentioned this issue Jun 1, 2022

Is this project abandoned? #190

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support `keycloak-js` v17.0.0 #180

Support `keycloak-js` v17.0.0 #180

fredriklindell commented Feb 12, 2022

bnopacheco commented Feb 20, 2022 •

edited

irhamputra commented Feb 22, 2022 •

edited

fredriklindell commented Mar 18, 2022

irhamputra commented Mar 18, 2022

nouman91 commented Apr 12, 2022

milosrs commented Apr 19, 2022 •

edited

tobiasfrei commented May 4, 2022 •

edited

rybkowskigrzegorz commented May 4, 2022

SIMULATAN commented May 7, 2022 •

edited

tobiasfrei commented May 7, 2022

tobiasfrei commented Jun 7, 2022

SIMULATAN commented Jun 7, 2022

tobiasfrei commented Jun 7, 2022 •

edited

stephane-segning commented Jul 12, 2022

giovannalinda commented Jul 13, 2022 •

edited

milosrs commented Jul 13, 2022

bitpickle commented Jul 20, 2022

pecataToshev commented Jul 20, 2022

milosrs commented Jul 20, 2022 •

edited

bitpickle commented Jul 27, 2022

Sup3r-Us3r commented Aug 6, 2022

milosrs commented Aug 6, 2022

Sup3r-Us3r commented Aug 6, 2022

milosrs commented Aug 6, 2022

Shovan1016 commented Nov 1, 2022

adibamine commented Nov 19, 2022

lcanavesio commented Feb 3, 2023

rsevalueserve commented Mar 13, 2023

Support keycloak-js v17.0.0 #180

Support keycloak-js v17.0.0 #180

Comments

fredriklindell commented Feb 12, 2022

bnopacheco commented Feb 20, 2022 • edited

irhamputra commented Feb 22, 2022 • edited

fredriklindell commented Mar 18, 2022

irhamputra commented Mar 18, 2022

nouman91 commented Apr 12, 2022

milosrs commented Apr 19, 2022 • edited

tobiasfrei commented May 4, 2022 • edited

rybkowskigrzegorz commented May 4, 2022

SIMULATAN commented May 7, 2022 • edited

tobiasfrei commented May 7, 2022

tobiasfrei commented Jun 7, 2022

SIMULATAN commented Jun 7, 2022

tobiasfrei commented Jun 7, 2022 • edited

stephane-segning commented Jul 12, 2022

giovannalinda commented Jul 13, 2022 • edited

milosrs commented Jul 13, 2022

bitpickle commented Jul 20, 2022

pecataToshev commented Jul 20, 2022

milosrs commented Jul 20, 2022 • edited

bitpickle commented Jul 27, 2022

Sup3r-Us3r commented Aug 6, 2022

milosrs commented Aug 6, 2022

Sup3r-Us3r commented Aug 6, 2022

milosrs commented Aug 6, 2022

Shovan1016 commented Nov 1, 2022

adibamine commented Nov 19, 2022

lcanavesio commented Feb 3, 2023

rsevalueserve commented Mar 13, 2023

Support `keycloak-js` v17.0.0 #180

Support `keycloak-js` v17.0.0 #180

bnopacheco commented Feb 20, 2022 •

edited

irhamputra commented Feb 22, 2022 •

edited

milosrs commented Apr 19, 2022 •

edited

tobiasfrei commented May 4, 2022 •

edited

SIMULATAN commented May 7, 2022 •

edited

tobiasfrei commented Jun 7, 2022 •

edited

giovannalinda commented Jul 13, 2022 •

edited

milosrs commented Jul 20, 2022 •

edited