Test App with Keycloak Authentication

This is a test application that demonstrates integration with Keycloak for authentication. The application consists of a React frontend, Node.js API, and Keycloak authentication server, all orchestrated with Docker Compose.

Prerequisites

• Docker and Docker Compose
• Node.js (v18 or later)
• npm (v8 or later)

Project Structure

test-app/
├── client/             # React frontend
├── src/               # Node.js API
├── nginx/             # Nginx configuration
└── docker-compose.yml # Docker services configuration

Setup Instructions

1. Clone the repository and navigate to the project directory:

   cd test-app

2. Install dependencies for the client:

   cd client
   npm install
   cd ..

3. Install dependencies for the API:

   cd src
   npm install
   cd ..

4. Start the application using Docker Compose:

   docker-compose up --build

5. Access the application:

   • Frontend: http://localhost
   • Keycloak Admin Console: http://localhost:8080/auth/admin
     • Username: admin
     • Password: admin

Keycloak Setup

1. Access the Keycloak Admin Console at http://localhost:8080/auth/admin

2. Create a new realm:

   • Click "Add realm"
   • Name: test-realm
   • Click "Create"

3. Create a new client:

   • Go to "Clients" → "Create client"
   • Client ID: test-client
   • Client Protocol: openid-connect
   • Root URL: http://localhost
   • Click "Save"
   • In the client settings:
     • Access Type: confidential
     • Valid Redirect URIs: http://localhost/*
     • Web Origins: http://localhost
     • Save the client secret (will be shown after saving)

4. Create a test user:

   • Go to "Users" → "Add user"
   • Username: testuser
   • Email: test@example.com
   • First Name: Test
   • Last Name: User
   • Click "Create"
   • Go to "Credentials" tab
   • Set password: password123
   • Turn OFF "Temporary"
   • Click "Set Password"

Environment Variables

Create a .env file in the root directory with the following variables:

KEYCLOAK_URL=http://keycloak:8080
KEYCLOAK_REALM=test-realm
KEYCLOAK_CLIENT_ID=test-client
KEYCLOAK_CLIENT_SECRET=your-client-secret

Features

• User authentication with Keycloak
• Protected routes
• Session management
• Token refresh
• Secure cookie handling
• Nginx reverse proxy

Available Endpoints

• Frontend: http://localhost
• API: http://localhost/api
• Keycloak: http://localhost/auth
• Keycloak Admin: http://localhost:8080/auth/admin

Development

• Frontend runs on port 5173 (Vite)
• API runs on port 3001
• Keycloak runs on port 8080
• Nginx runs on port 80

Troubleshooting

1. If you can't access the application:

   • Check if all containers are running: docker-compose ps
   • Check container logs: docker-compose logs

2. If authentication fails:

   • Verify Keycloak client settings
   • Check if the user exists and password is correct
   • Ensure environment variables are set correctly

3. If cookies are not working:

   • Check browser console for CORS errors
   • Verify Nginx configuration
   • Ensure all services are using the same domain