Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brakmic/angular-bff-keycloak
Angular frontend + Express.js BFF + Keycloak IAM implementation
https://github.com/brakmic/angular-bff-keycloak
angular bff expressjs keycloak oidc pkce
Last synced: 4 days ago
JSON representation
Angular frontend + Express.js BFF + Keycloak IAM implementation
- Host: GitHub
- URL: https://github.com/brakmic/angular-bff-keycloak
- Owner: brakmic
- License: mit
- Created: 2025-01-25T23:57:59.000Z (5 days ago)
- Default Branch: main
- Last Pushed: 2025-01-26T00:29:33.000Z (5 days ago)
- Last Synced: 2025-01-26T01:23:01.716Z (5 days ago)
- Topics: angular, bff, expressjs, keycloak, oidc, pkce
- Language: TypeScript
- Homepage:
- Size: 273 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Secure BFF Authentication System
Modern authentication implementation using [Angular, Express.js BFF, and Keycloak](https://blog.brakmic.com/keycloak-angular-and-the-bff-pattern/) with complete client-side token isolation.
## Components
- **Frontend**: Angular 19 SPA (port 4200)
- **BFF**: Express.js backend (port 3000)
- **Keycloak**: v26 IAM server (port 8443)
- **Docker**: Compose setup with network isolation
## Prerequisites
- Docker 20.10+
- Node.js 18.x
- OpenSSL (for certificate generation)
## Quick Start
```bash
git clone https://github.com/brakmic/Angular-BFF-Keycloak
cd Angular-BFF-Keycloak
# Generate certificates (optional)
./scripts/setup_ssl.sh
# Start services
docker-compose up -d
# Install frontend dependencies
cd frontend && npm install
```
## Configuration
### Environment Variables
`.env` (BFF):
```ini
KEYCLOAK_REALM=TestRealm
KEYCLOAK_AUTH_SERVER_URL=https://keycloak:8443
KEYCLOAK_CLIENT_ID=angular-public-client
KEYCLOAK_CALLBACK_URL=https://localhost:3000/auth/keycloak/callback
```
`proxy.conf.json` (Angular):
```json
{
"/api": {
"target": "https://localhost:3000",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
},
"/auth": {
"target": "https://localhost:3000",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
```
### Certificates (for manual certificate imports)
1. Place server certificates in `/certs`
2. Trust root CA certificate:
```bash
sudo cp certs/your-ca.cert.pem /usr/local/share/ca-certificates/
sudo update-ca-certificates
```
## Keycloak Setup (for manual realm imports)
1. Access admin console: `https://localhost:8443`
2. Import `your-realm.json`
3. Create user: `your-user` / `your-password`
## Usage
1. Start services: `docker-compose up -d`
2. Launch Angular: `npm start` (from frontend dir)
3. Access: `https://localhost:4200`
**Authentication Flow**:
1. Click Login -> Secure popup opens
2. Complete Keycloak authentication
3. Session established via HTTP-only cookies
4. Access protected routes
## Development
```bash
# BFF hot-reload
npm run dev
# Frontend build
npm run build
# Keycloak realm update
docker-compose restart keycloak
```
## Customization
- Modify `docker-compose.yml` ports
- Update Angular routes in `app.routes.ts`
- Extend BFF endpoints in `index.ts`
- Customize Keycloak theme in `/keycloak/themes`
## Troubleshooting
**Certificate Errors**:
```bash
# Reinstall CA certificate
sudo trust anchor --remove certs/ca.cert.pem
sudo trust anchor certs/ca.cert.pem
```
**Clean Reset**:
```bash
docker-compose down -v
rm -rf node_modules
```
## License
[MIT](./LICENSE)