# @keycloak-react/nextjs > NextJS bindings for Keycloak javascript adapter Latest version **2.0.0-beta.9** (published 2020-04-29) · MIT license · 0 weekly downloads ## Install ```sh npm install @keycloak-react/nextjs pnpm add @keycloak-react/nextjs yarn add @keycloak-react/nextjs bun add @keycloak-react/nextjs ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0-beta.9 | | Published | 2020-04-29 | | First published | 2020-04-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 46.3 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Jeff Tian | | Maintainers | jeff-tian | | Keywords | react, nextjs, keycloak, keycloak-js | ## Links - npm: https://www.npmjs.com/package/@keycloak-react/nextjs - Repository: https://github.com/jeff-tian/keycloak-react - Homepage: https://github.com/jeff-tian/keycloak-react#readme - Issues: https://github.com/jeff-tian/keycloak-react/issues - Funding: https://www.patreon.com/reactkeycloak - npm.io page: https://npm.io/package/@keycloak-react/nextjs ## Dependencies (7) - [base-64](https://npm.io/package/base-64.md) ^0.1.0 - [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [detect-node](https://npm.io/package/detect-node.md) ^2.0.4 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.9.0 - [@keycloak-react/core](https://npm.io/package/@keycloak-react/core.md) ^4.0.1 - [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.0-beta.9 (latest) — 2020-04-29 ## README ![React Keycloak](/art/react-keycloak-logo.png?raw=true 'React Keycloak Logo') # React Keycloak > [NextJS](https://nextjs.org) bindings for [Keycloak](https://www.keycloak.org/) [![NPM (scoped)](https://img.shields.io/npm/v/@keycloak-react/nextjs?label=npm%20%7C%20nextjs)](https://www.npmjs.com/package/@keycloak-react/nextjs) [![License](https://img.shields.io/github/license/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react/blob/master/LICENSE.md) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Contributors](https://img.shields.io/badge/contributors-2-orange.svg)](#contributors) [![Gitter](https://img.shields.io/gitter/room/react-keycloak/community)](https://gitter.im/react-keycloak/community) [![Dependencies](https://img.shields.io/david/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react) [![Build Status](https://travis-ci.com/jeff-tian/keycloak-react.svg?branch=master)](https://travis-ci.com/jeff-tian/keycloak-react) [![Coverage Status](https://coveralls.io/repos/github/jeff-tian/keycloak-react/badge.svg?branch=master)](https://coveralls.io/github/jeff-tian/keycloak-react?branch=master) [![Github Issues](https://img.shields.io/github/issues/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react/issues) --- ## Table of Contents - [Install](#install) - [Support](#support) - [Getting Started](#getting-started) - [Setup NextApp](#setup-nextapp) - [HOC Usage](#hoc-usage) - [Hook Usage](#hook-usage) - [Examples](#examples) - [Other Resources](#other-resources) - [Securing NextJS API](#securing-nextjs-api) - [Contributors](#contributors) --- ## Install React Keycloak requires: - React **16.0** or later - NextJS **9** or later - `keycloak-js` **9.0.2** or later ```shell yarn add @keycloak-react/nextjs ``` or ```shell npm install --save @keycloak-react/nextjs ``` ## Support | version | keycloak-js version | | ------- | ------------------- | | v2.0.0+ | 9.0.2+ | | v1.x | >=8.0.2 <9.0.2 | ## Getting Started ### Setup NextApp Create the `_app.tsx` file under `pages` folder and wrap your App inside `SSRKeycloakProvider` component and pass `keycloakConfig` and a `TokenPersistor`. **Note:** `@keycloak-react/nextjs` provides a default `TokenPersistor` which works with `cookies` (exported as `Persistors.Cookies`). The following examples will be based on that. ```tsx import cookie from 'cookie' import * as React from 'react' import type { IncomingMessage } from 'http' import type { AppProps, AppContext } from 'next/app' import { SSRKeycloakProvider, Persistors } from '@keycloak-react/nextjs' import type { KeycloakCookies } from '@keycloak-react/nextjs' const keycloakCfg = { realm: '', url: '', clientId: '' } interface InitialProps { cookies: KeycloakCookies } function MyApp({ Component, pageProps, cookies }: AppProps & InitialProps) { return ( ) } function parseCookies(req?: IncomingMessage) { if (!req || !req.headers) { return {} } return cookie.parse(req.headers.cookie || '') } MyApp.getInitialProps = async (context: AppContext) => { // Extract cookies from AppContext return { cookies: parseCookies(context?.ctx?.req) } } export default MyApp ``` `SSRKeycloakProvider` also accepts all the properties of [`KeycloakProvider`](https://github.com/jeff-tian/keycloak-react/blob/master/packages/web/README.md#setup-keycloakprovider). ### HOC Usage When a page requires access to `Keycloak`, wrap it inside the `withKeycloak` HOC. **Note:** When running server-side not all properties and method of the `keycloak` instance might be available (`token`, `idToken` and `refreshToken` are available if persisted and `authenticated` is set accordingly). ```tsx import { withKeycloak } from '@keycloak-react/nextjs' const IndexPage: NextPage = ({ keycloak }) => { const loggedinState = keycloak?.authenticated ? ( logged in ) : ( not logged in ) const welcomeMessage = keycloak ? `Welcome back user!` : 'Welcome visitor. Please login to continue.' return (

Hello Next.js + Keycloak 👋

This is an example of a Next.js site using Keycloak.

You are: {loggedinState}

{welcomeMessage}

 ) } export default withKeycloak(IndexPage) ``` ### Hook Usage Alternately, when a component requires access to `Keycloak`, you can also use the `useKeycloak` Hook. ## Examples See inside `examples/nextjs-app` for a sample implementation. ## Other Resources ### Securing NextJS API Whilst `@keycloak-react/nextjs` can help you secure the Frontend part of a `NextJS` app if you also want to secure `NextJS`-exposed APIs you can follow the sample in [this issue](https://github.com/jeff-tian/keycloak-react/issues/44#issuecomment-579877959). Thanks to [@webdeb](https://github.com/webdeb) for reporting the issue and helping develop a solution. ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

Mattia Panzeri
🤔 💻 📖 🐛 🚧 📦 💬 👀 ⚠️ 💡
JannesD
🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! --- If you found this project to be helpful, please consider buying me a coffee. [![buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoff.ee/4f18nT0Nk) --- _Source: https://npm.io/package/@keycloak-react/nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._