# Implementation NextJS with Authorization Security

with NestJS Backend & Keycloak Authorization Server

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833007710/oqEtZhusx.gif)

### Summary

1.  Introduction
2.  Login Redirect to Keycloak
3.  Add Private Page
4.  NextJS Demo
5.  References

### 1\. Introduction

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833009619/FZw6AM3ig.png)

### Environment

*   Frontend — NextJS
*   Backend — NestJS
*   Authorization — Keycloak

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833011027/EdoZUJKa6.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833012269/VBUyt2NM7.png)

### Setup Client Next

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833013588/QrFqTnc9J.png)

### Keycloak Package for JavaScript

*   [https://www.npmjs.com/package/keycloak-js](https://www.npmjs.com/package/keycloak-js)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833014953/WF0hDQ2Ou.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833016291/V9cgJCSTm.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833017536/51lbe7V3A.png)

### React-Keycloak

*   [https://www.npmjs.com/package/react-keycloak](https://www.npmjs.com/package/react-keycloak)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833018790/KxRcWvf9m.png)

Container nest /app

**docker-compose exec app bash**

**npm install react-keycloak --save**

npm uninstall keycloak-js --save(retira)

**npm install @react-keycloak/ssr --save**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833020044/7CfOM-rw0.png)

npm install keycloak-js --save

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833021663/PbmDlBbbL.png)

### 2\. Login Redirect to Keycloak

*   login.tsx

import { useKeycloak } from "@react-keycloak/ssr";

import {KeycloakInstance} from 'keycloak-js';

import { useEffect } from "react";

const LoginPage = () => {

const { initialized, keycloak } = useKeycloak<KeycloakInstance>();

//keycloak?.authenticated

const {login = () => {}, authenticated} = keycloak || {};

useEffect( () => {

if(!initialized) {

return;

}

if(!authenticated){

login({

redirectUri: 'http:localhost:3001/private'

});

}

}, \[login,authenticated, initialized\])

return null;

};

export default LoginPage;

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833022934/GWRXp4jbF.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833024412/roL0E4oey.png)

*   [https://www.base64decode.org/](https://www.base64decode.org/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833026294/oi3hVu5Rb.png)

### Two Token

*   Authorization Token => IdToken / Authentication Token
*   Access Token => kxToken

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833027972/zXNY-uHu1.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833029586/GOFHEEPP4.png)

### 3\. Add Private Page

*   Install Json Web Token
*   [https://www.npmjs.com/package/jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)

  
docker-compose exec app bash

npm install jsonwebtoken --save

npm install @types/jsonwebtoken --save

*   /util/auth.ts

export type Payload = KeycloakTokenParsed &  
  KeycloakProfile;  
  
export type Token = { token: string; payload: Payload };  
  
type Request = { headers: { cookie?: any } };  
  
export function validateAuth(req?: Request): Token | boolean {  
  const cookies = parseCookies(req);  
  if (!cookies.kcToken) {  
    return false;  
  }  
  const token = Buffer.from(cookies.kcToken, "base64").toString("utf8");  
  const payloadOrFalse = verifyToken(token, process.env.JWT\_SECRET as string);  
  return payloadOrFalse  
    ? ({ token, payload: payloadOrFalse } as any)  
    : payloadOrFalse;  
}  
//verificação completa  
export function verifyToken(token: string, key: string): JwtPayload | false {  
  try {  
    return jwt.verify(token, key, { ignoreExpiration: false }) as JwtPayload;  
  } catch (e) {  
    console.error(e, token, key);  
    return false;  
  }  
}

### JWT\_SECRET GENERATE

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833031247/l4KfmSFBP0.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833033229/LivT-VDqu.png)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833034855/WKNKVhkn3.png)

### 4\. NextJS Demo

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1662833037200/acfUnRt7d.gif)

### 5\. References

*   [https://github.com/Backend-2030/ng-animated-login](https://github.com/Backend-2030/ng-animated-login)
*   [https://nextjs.org/](https://nextjs.org/)