I’m running a project with several docker containers.
Web is a Next.js React application that does Server Side Rendering,
API serves GraphQL for
Web to consume and I have a Keycloak server.
Right now I am using the NPM module
keycloak-js to send signed out people to the Keycloak service login page and then back to where they came from.
There is one problem: SSR (Server Side Rendering).
keycloak-js uses the
window object a lot and this is not available on SSR.
I want a different solution. I want
Web to render it’s own login page and to no longer redirect to the Keycloak service. This means that inside SSR I need to query my
API service to fetch the current User and issue a 302 redirect response if there is no current user.
- Can I use the Keycloak server as a REST API instead of using the
keycloak-js NPM module?
- Where can I find documentation on this?
- Is there an example of logging in, fetching the user data and logging out by using CURL instead of
technically, yes, there’s an “API” you can use. It’s the so called “Resource Owner Password Credentials Flow”, where you can pass the username and password and receive a token for the user.
BUT this is considered an anti-pattern in terms of SSO and security.
You won’t get SSO, because you just get a token for your user. If there are other applications in the same realm, they won’t recognize this user as already logged-in, as there is no session registered in Keycloak with this user.
In terms of security, it’s an anti-pattern, as your application get in touch with user credentials. Only the authenticating party (here: Keycloak) should get in touch with user credentials. In that way, MITM scenarios can be mitigated/minimized.
Use your application and Keycloak with the standard “Authorization Code Flow” if possible. This will yield in redirects from your application to Keycloak and back, handling all in a most secure way. Some server-side OIDC libs will help you with this, perhaps this one from the Keycloak project: https://github.com/keycloak/keycloak-nodejs-connect (docs: https://www.keycloak.org/docs/latest/securing_apps/index.html#_nodejs_adapter)
I don’t need SSO, since i only have 1 app. I only want Authentication for my app.
I don’t want to use the Keycloak Login page because I am making a React App. I don’t want to leave this react app and be forwarded to some
/realm/this/that/long/url/noone/wants/to/see in order to sign in. The URL should be
/signin. My Next.js app should render this page. It should interact with the Keycloak Service through the API service, which is the only point of communication for the Web service.
- How is using CURL to do a series of requests more dangerous then using
keycloak-js? They are both HTTP clients right?
I don’t want… I don’t want… I don’t want…
Seems that you don’t want a secure environment and just care about short urls that doesn’t matter at all.
Sorry, but I don’t want to give good advice to such people.
I too have the same issue. while using the keycloak-js in SSR(Server Side Rendering). can anyone give the solution to solve this issue?
This is the Following error I am getting:
})( window );
ReferenceError: window is not defined
at Object. (D:\Gradsiren\sso_keycloak_angular\node_modules\keycloak-js\dist\keycloak.js:1556:5)
at Module._compile (module.js:653:30)
at Object.Module._extensions…js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.setPrototypeOf. (D:\Gradsiren\sso_keycloak_angular\node_modules\keycloak-angular\bundles\keycloak-angular.umd.js:2:161)
at Object. (D:\Gradsiren\sso_keycloak_angular\node_modules\keycloak-angular\bundles\keycloak-angular.umd.js:5:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! firstname.lastname@example.org serve:ssr:
npm ERR! Exit status 1
npm ERR! Failed at the email@example.com serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Emphyd12118vkum1\AppData\Roaming\npm-cache_logs\2019-12-30T12_54_34_199Z-debug.log
keycloak-js IS A FRONTEND LIB!!!
Try to use the Keycloak Node adapter, as already above mentioned…
yes but my application is a single page application(Front End Application). but your suggested library is a back-end library. how it will gonna work in Front end.
Browser = Frontend
Server = Backend
You render your resources on the server and thus in the backend. That’s what Server-Side-Rendering is.
And on the server, there’s no
window object, obviously. And as
keycloak-js ist a browser-only and no universal lib, you can’t use it for SSR / in the backend.
Deal with it.
this is resolved now. by declaring the window object in the back-end.
I dealt with it by implementing Passport.js for authentication and not using Keycloak at all.
is passport.js also is like an sso provider?
Passport.js does authentication only. It supports local (username passport) and oauth. It does not provide authorization, sso, ldap, etc.
Thanks for the information