Implementation NextJS with Authorization Security

with NestJS Backend & Keycloak Authorization Server

Summary

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

1. Introduction

Environment

• Frontend — NextJS
• Backend — NestJS
• Authorization — Keycloak

Setup Client Next

Keycloak Package for JavaScript

• https://www.npmjs.com/package/keycloak-js

React-Keycloak

• https://www.npmjs.com/package/react-keycloak

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

npm install keycloak-js --save

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://www.base64decode.org/

Two Token

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

3. Add Private Page

• Install Json Web Token
• 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

4. NextJS Demo

5. References

• https://github.com/Backend-2030/ng-animated-login
• https://nextjs.org/