CODEWITHSUNDEEP
reactjsreduxsingle-sign-onreact-reduxkeycloak
Hawkes
Hawkes

Reputation: 467

Implementing SSO on React-Redux app

I'm trying to implement SSO on a React-Redux app using Keycloak as an external Identity Provider. The intent is to redirect to the IdP's login page if the user is not authenticated and after successful authentication use the access_token to access protected resources on another REST API microservice.

I tried to use Keycloak's NodeJS adapter (https://keycloak.gitbooks.io/documentation/securing_apps/topics/oidc/nodejs-adapter.html) and it is able to redirect me to the IdP for logging in and I can get the access_token but this all happens in the express-session and uses the MemoryStore. I was wondering if this is okay? Saving JWTs in the express store and retrieving them from the store while making an API call?

Or should I try doing something like saving the authentication status (JWT token) in Redux's store? Would it be better when compared with session cookies? Session cookies might be more secure but would involve accessing the store every time, right?

Above all, how can I achieve the approach where Redux store has the JWT?

Any help would be much appreciated.

Thanks in advance.

Upvotes: 1

Views: 11624

Answers (2)

craftsmannadeem
craftsmannadeem

Reputation: 2953

Here is an react app which demonstrate how we can integrate SSO with React Applications.

  • Uses Keycloak as IDP
  • OAuth 2 for SSO
  • JWT as Auth Token (Which can be stored in Redux, instead of Authprovider state)
  • React UI
  • Node Js (Express) backend

Disclaimer : I am the owner of the repo

Upvotes: 2

Hawkes
Hawkes

Reputation: 467

For all those who are interested, I managed to implement it in the following way:

  • Load Keycloak.js (Keycloak's JS adapter) from the keycloak server
  • Initialize the Keycloak Script using the configuration parameters of the client.
  • Create a Reducer to fetch JWT tokens by invoking the Keycloak script when the main React component is about to be rendered.
  • Add the token to the state.

Anyways, we now believe that dynamically loading Keycloak.js from the server wouldn't be a good idea and above all, this would tightly couple our app to Keycloak. We are now looking for a more generic OIDC implementation.

As for storing the token, we've thought that the Redux store might not be the best place for JWTs. We're considering saving tokens in the localStorage instead.

Hope this helps someone!

Upvotes: 7

Related Questions