Hi @Awais_Sabir, To authenticate from a client-side application (like React, Angular, etc.) to access the Camunda 8.6 Self-Managed Tasklist REST API, you’ll use OAuth2/OpenID Connect via Keycloak, since Camunda Identity (based on Keycloak) is the default auth system.
1. Identity & Keycloak Setup
Assuming default Camunda 8.6 setup:
- Keycloak is at: http://localhost:18080
- Realm: camunda-platform
- Clients:
- tasklist (preconfigured public client)
- Users: e.g., demo / demo
2. Client-Side Login Flow (Authorization Code Flow with PKCE)
Because this is a browser-based client (SPA), use PKCE flow (secure for public clients without secrets).
Steps in Your Client App:
- Redirect user to Keycloak login page:
GET http://localhost:18080/realms/camunda-platform/protocol/openid-connect/auth ?client_id=tasklist&redirect_uri=http://localhost:3000/callback &response_type=code &scope=openid &code_challenge=HASHED_CODE_VERIFIER &code_challenge_method=S256
- User logs in → redirected to your app with code in query param.
- Exchange the code for tokens (in backend or frontend depending on architecture):
POST http://localhost:18080/realms/camunda-platform/protocol/openid-connect/token- grant_type=authorization_code- client_id=tasklist- code=THE_CODE- redirect_uri=http://localhost:3000/callback- code_verifier=YOUR_ORIGINAL_VERIFIER
- Get the access_token → use it in your REST API calls to Tasklist.
3. Call Tasklist REST API with Token
GET http://localhost:8080/tasklist/v1/tasks
Authorization: Bearer <access_token>
4. Optional: Use Keycloak JS Adapter
If you want to simplify auth in the frontend, use Keycloak’s JS SDK:
npm install keycloak-js
import Keycloak from 'keycloak-js';
const keycloak = new Keycloak({
url: 'http://localhost:18080',
realm: 'camunda-platform',
clientId: 'tasklist'
});
keycloak.init({ onLoad: 'login-required' }).then(authenticated => {
if (authenticated) {
console.log("Authenticated!");
const token = keycloak.token;
fetch("http://localhost:8080/tasklist/v1/tasks", {
headers: {
Authorization: `Bearer ${token}`
}
})
.then(res => res.json())
.then(data => console.log(data));
}
});
Security Notes
• The tasklist client in Keycloak must be configured as a public client.
• Make sure CORS is properly configured on the Tasklist REST API.
• Use HTTPS in production.