React Example with Ory Kratos & Hydra

This project demonstrates a React application integrated with Ory Kratos (identity management) and Ory Hydra (OAuth2 / OpenID Connect provider).
It includes a frontend, backend API, and BFF layer, all orchestrated via Docker.

---

🚀 Project Overview

• Frontend (front) – React app demonstrating protected routes and login flows.
• BFF (bff) – Backend-for-frontend service handling login redirects, session checks, and bridging frontend with Hydra/Kratos.
• Backend (backend) – Example API that requires OAuth2 access token validation.
• Ory Kratos (kratos) – Identity and user management.
• Ory Hydra (hydra) – OAuth2 / OpenID Connect server.
• PostgreSQL (postgres) – Database used by Kratos and Hydra.

This project is intended as a learning and experimentation environment to understand how Kratos + Hydra + React integrate.

---

📦 Services (from docker-compose.yml)

1. Postgres

   • Image: postgres:15
   • Stores data for Kratos and Hydra.
   • Ports: 5432:5432

2. Hydra Migrate

   • Runs database migrations for Hydra.
   • Depends on Postgres.

3. Hydra

   • OAuth2 / OIDC provider.
   • Ports: 4444 (public), 4445 (admin).
   • URLs configured:
     • URLS_SELF_ISSUER: http://localhost:3000/
     • URLS_LOGIN: http://localhost:4000/login
     • URLS_CONSENT: http://localhost:4000/consent
   • Depends on hydra-migrate.

4. Kratos Migrate

   • Runs database migrations for Kratos.
   • Depends on Postgres.

5. Kratos

   • Identity management server.
   • Ports: 4433 (public), 4434 (admin).
   • Configuration mounted from ./kratos/config.
   • Depends on kratos-migrate.

6. BFF

   • Handles login, consent, and token management for the frontend.
   • Port: 4000.
   • Depends on hydra, kratos, and backend.

7. Backend

   • Example API server.
   • Port: 5000.
   • Environment variable HYDRA_ISSUER_URL points to Hydra service.

8. Frontend (front)

   • React app demonstrating protected routes.
   • Port: 3000.
   • Depends on kratos, hydra, backend, and bff.
   • Environment variables:
     • KRATOS_HOST – Kratos host for login.
     • HYDRA_HOST – Hydra host.
     • BFF_HOST – Backend-for-frontend host.
     • BACKEND_HOST – Backend API host.

---

⚡ Prerequisites

• Docker & Docker Compose installed
• Node.js / npm (if you want to run frontend or backend locally)

---

🛠️ Running the Project

# Clone the repository
git clone <repo-url>
cd <repo>

Before start

• first

-- Create 'ory' database if missing
-- Create Kratos schema inside 'ory'
CREATE SCHEMA kratos;

-- Grant all privileges to user 'ory'
CREATE USER ory WITH PASSWORD 'ory';
GRANT ALL PRIVILEGES ON DATABASE ory TO ory;
GRANT USAGE, CREATE ON SCHEMA kratos TO ory;

• and second

curl -X GET http://localhost:4445/clients \
  -H "Content-Type: application/json" \
  -d '{
    "client_id": "react-spa",
    "client_secret": "",
    "grant_types": ["authorization_code","refresh_token"],
    "response_types": ["code"],
    "scope": "openid profile email offline_access",
    "callbacks": ["http://localhost:3000/callback"],
    "post_logout_redirect_uris": ["http://localhost:3000"]
  }'

Start all services

docker-compose --env-file .env up --build