Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@react-keycloak/web
Advanced tools
React bindings for Keycloak
React Keycloak requires:
keycloak-js
9.0.2 or lateryarn add @react-keycloak/web
or
npm install --save @react-keycloak/web
Create a keycloak.js
file in the src
folder of your project (where App.js
is located) with the following content
import Keycloak from 'keycloak-js'
// Setup Keycloak instance as needed
// Pass initialization options as required or leave blank to load from 'keycloak.json'
const keycloak = new Keycloak()
export default keycloak
Wrap your App inside ReactKeycloakProvider
and pass the keycloak
instance as prop
import { ReactKeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak'
// Wrap everything inside KeycloakProvider
const App = () => {
return <ReactKeycloakProvider authClient={keycloak}>...</ReactKeycloakProvider>
}
N.B. If your using other providers (such as react-redux
) it is recommended to place them inside ReactKeycloakProvider
.
ReactKeycloakProvider
automatically invokes keycloak.init()
method when needed and supports the following props:
initOptions
, contains the object to be passed to keycloak.init()
method, by default the following is used
{
onLoad: 'check-sso',
}
for more options see Keycloak docs.
LoadingComponent
, a component to be displayed while keycloak
is being initialized, if not provided child components will be rendered immediately. Defaults to null
isLoadingCheck
, an optional loading check function to customize LoadingComponent display condition. Return true
to display LoadingComponent, false
to hide it.
Can be implemented as follow
;(keycloak) => !keycloak.authenticated
onEvent
, an handler function that receives events launched by keycloak
, defaults to null
.
It can be implemented as follow
;(event, error) => {
console.log('onKeycloakEvent', event, error)
}
Published events are:
onReady
onInitError
onAuthSuccess
onAuthError
onAuthRefreshSuccess
onAuthRefreshError
onTokenExpired
onAuthLogout
onTokens
, an handler function that receives keycloak
tokens as an object every time they change, defaults to null
.
Keycloak tokens are returned as follow
{
"idToken": string,
"refreshToken": string,
"token": string
}
When a component requires access to Keycloak
, you can use the useKeycloak
Hook.
import { useKeycloak } from '@react-keycloak/web'
export default () => {
// Using Object destructuring
const { keycloak, initialized } = useKeycloak()
// Here you can access all of keycloak methods and variables.
// See https://www.keycloak.org/docs/latest/securing_apps/index.html#javascript-adapter-reference
return (
<div>
<div>{`User is ${
!keycloak.authenticated ? 'NOT ' : ''
}authenticated`}</div>
{!!keycloak.authenticated && (
<button type="button" onClick={() => keycloak.logout()}>
Logout
</button>
)}
</div>
)
}
If you need to access keycloak
instance from non-React
files (such as sagas
, utils
, providers
...), you can import the instance directly from the keycloak.js
file.
The instance will be initialized by react-keycloak
but you'll need to be carefull when using the instance and avoid setting/overriding any props, you can however freely access the exposed methods (such as refreshToken
, login
, etc...).
See inside examples
folder of @react-keycloak/react-keycloak-examples
repository for various demo implementing this library main features.
Migration guide for @react-keycloak/web
v2.x to v3.x
can be found here MIGRATION.md.
Secure React Routes & Component with Keycloak, a (slightly outdated) guide on how to setup Keycloak
and create secured contents in a React
app, thanks to @cagline for the detailed article.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
If you found this project to be helpful, please consider buying me a coffee.
FAQs
React bindings for Keycloak javascript adapter
We found that @react-keycloak/web demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.