Skip to main content

Discussion: Understanding TideCloak Authentication in React

Concepts, best practices, and end‑to‑end flows for using TideCloak in a React SPA.

🧠 How it works (deep dive)​

Below are the core flows you’ll see in a React app that integrates TideCloak.

Project layout (typical React + Vite)​

react-app/
├── public/
│   └── silent-check-sso.html
├── src/
│   ├── App.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   └── auth/
│   │       └── RedirectPage.tsx
│   └── main.tsx
├── tidecloakAdapter.json
└── package.json

🔑 Why use TideCloak?​

TideCloak simplifies secure auth by:

  • Handling OIDC and robust JWT verification.
  • Providing tag‑based E2EE helpers (doEncrypt, doDecrypt).
  • Enabling RBAC at realm and client levels.
  • Working cleanly with React Router or any router pattern.

🧩 Router guard vs client‑side checks​

Router guard (recommended): protect routes centrally with a wrapper component.Client‑side checks: refine UX (show or hide buttons/cards) without changing navigation.

Best practice: use both. Guard routes to prevent access; adjust UI with Authenticated / Unauthenticated and role checks for great UX.

🛠️ Best practices for redirect URIs​

  • The default is "/auth/redirect". Create that route if you use the default.
  • If you set a custom redirectUri, ensure the route exists in your router for all environments.

📦 How roles work​

Two levels:

  • Realm roles — global to the realm (e.g., admin).
  • Client roles — specific to a client/app (e.g., editor).

Check them in the app with hasRealmRole and hasClientRole.

🚨 Common pitfalls​

  • Missing public/silent-check-sso.html.
  • No route for the default "/auth/redirect".
  • Encrypting objects instead of string or Uint8Array.
  • Checking a role that the user never received from the realm or client.