POC Oauth2 Code Flow (Keycloak)

🎯 What is it?

A front-end built with Next.js, powered by 99% Vibe Coding 😂, and visualized with a sequence diagram.

📚 Purpose

To learn and demonstrate the OAuth2 Authorization Code Flow using Keycloak.

🛠️ Features

• Login with Keycloak
• Retrieve Authorization Code
• Exchange Code for Access Token
• Call a protected API
• Logout

---

🚀 Getting Started

1. Create a .env.local file with the following variables:

NEXT_PUBLIC_KEYCLOAK_BASE_URL=
NEXT_PUBLIC_KEYCLOAK_REDIRECT_URI=
NEXT_PUBLIC_KEYCLOAK_REALM=
NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=
NEXT_PUBLIC_KEYCLOAK_CLIENT_SECRET=
NEXT_PUBLIC_RESOURCE_API_URL=

**You can use drf-keycloak-poc as api server.

2. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser.

🖼️ Example