@krashnakant/next-keycloak
v1.0.0
Published
An authentication library based on Keycloak for NextJs applications
Downloads
87
Maintainers
krashnakantReadme
Next Keycloak
An authentication library based on Keycloak for NextJs applications
Next Keycloak powered by Typescript, React and keycloak Use it as a react provider to authenticate keycloak users
Features
- Support Keycloak public client
- Access user information and token in both client & server side
Requirements
- Keycloak.js version 20 or above
- React version 17 or above
- NextJs version 13 or above
Installation
Install package with this command
npm i @krashnakant/nextjs-keycloak
or
yarn add @krashnakant/nextjs-keycloakMake a config file in _app.tsx or _app.jsx and wrap your component with NextKeycloakAuthProvider like this:
const config:KeycloakConfig = {
realm: process.env.NEXT_PUBLIC_KEYCLOAK_REAM,
url: process.env.NEXT_PUBLIC_KEYCLOAK_URL,
clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID,
};
const initOption :KeycloakInitOptions = {
onLoad: 'check-sso',
silentCheckSsoRedirectUri:
'http://localhost:3000/silent-check-sso.html',
}
function MyApp({ Component, pageProps }: AppProps) {
return (
<NextKeycloakAuthProvider config={config} initOption={initOption}>
<Component {...pageProps} />
</NextKeycloakAuthProvider>
);
}
export default MyApp;Also you can provide initialOption based on keycloak documentation and pass it to the provider. Note that the above example supports "silent check sso" and needs an HTML in your public folder. Create the silent-check-sso.html file in the public folder and put the below content into it.
<html>
<body>
<script>
parent.postMessage(location.href, location.origin)
</script>
</body>
</html>And that's it... now you can use useNextKeycloakAuth in your pages and components like this:
const {authenticated, loading } = useNextKeycloakAuth();See this example for full example.
Authors
Krashna @krashnakant
License
MIT