INTRODUCTION

This is a documentation of the processes and technologies used to develop an application using a microservice achitecture with keycloak IAM, krakenD api gateway, django for apis and nextjs as a frontend.

ARCHITECTURE

The architecture used in the MICROSERVICE ARCHTECTURE

read about this architecture

API ACCESS, AUTHENTICATION AND AUTHORIZATION

The above mentioned architecture calls for the use of a separate authentication service. In this project, KEYCLOAK is being used for that purpose.

Also KRAKEND is being used as an API gateway.

Together these two services complete the authentication and authorization architecture for this project.

Read more about this

COMPONENTS

This sample project is comprised of a sample service (a django rest api backend with sample endpoints) and a nextjs frontend application that should consume the api. We will be using docker to run the projects as it is in the /project/docker-compose.yml file. All configurations are in the /project/config/* folder.

Links to the repos of samples used in the projects

• django service => https://github.com/jackkweyunga/drf_oidc_example
• nextjs 13 frontent => https://github.com/jackkweyunga/nextjs-keycloack-example

RUN THE PROJECT

Make sure docker is installed in your machine Docker installation.

git clone
cd project
docker compose up -d

Setup Networking

Got to your system hosts files and add an entry to map keycloak as a local domain name that resolves to 127.0.0.1. Below is an example in windows.

Setup Keycloak

• Got to the keycloack instance at => http://localhost:8080 .

• Login with credentials below;

  • username: admin
  • password: admin

• Once inside, create a new real by importing a sample realm the-ream found in ./project/config/keycloak/realm-export.json

• After the import is successful, two clients [ms-frontend and svc1] will be available in a real called the-real.

• Within the real got to the client page for ms-frontend and svc1 and regenerate the client secrete. Copy the client secrets and replace with the ones in /project/config/frontend/.env and /project/config/service1/.env respectively.

  • Restart the project with command docker compose up -d to enact the changes.

• With in this realm, create a user with whom you will login in to the frontend. Remember to set the password for this user.

Test the project

Go to the frontend application at => http://localhost:4000 . Once there you'll see the request made to the public endpoint of the django service backed via the krakenD api gateway. Finally click the login link to be redirected to the kecloak instance for authentication. After authentication, the protected pages of the frontend will accessible.

If everything works correctly, you should be able to see the following in the frontend;