TideCloak React SDK Documentation

Welcome to the TideCloak SDK documentation for React. This guide helps you add secure authentication, session management, role-based access, and client-side encryption to React apps using TideCloak.

TideCloak builds on Keycloak and adds developer-friendly primitives: a lightweight React provider, silent SSO, automatic token refresh, and tag-based end-to-end encryption (E2EE) backed by Tide’s Cybersecurity Fabric.

---

🔐 Key Features

• 1-line setup with <TideCloakContextProvider>
• Login/logout + silent SSO (via public/silent-check-sso.html)
• Automatic & manual token refresh
• Tag-based E2EE: doEncrypt() / doDecrypt()
• Role-aware UI with guard components
• Simple hooks for claims/roles (useTideCloak())

---

📘 Tutorials

Start here to scaffold a React (Vite) app, wire the provider, and complete a full auth flow in minutes.

• 5 min Tutorial: Build a TideCloak + React App (Vite)
• Tutorial: Add TideCloak Auth to an Existing React App

---

🛠 How-to Guides

Copy-paste recipes for common tasks: install, wrap the provider, set a redirect URI, read token claims, check roles, refresh tokens, and encrypt/decrypt data. Includes a checklist for silent-check-sso.html and React Router protected routes.

• How-to Guide: Common Tasks with TideCloak in React

---

💬 Discussions

Conceptual deep-dives with flow diagrams: normal login, silent SSO, protected routes, API verification patterns, token refresh, and E2EE (encrypt/decrypt in the browser with no server-held keys). Includes best practices and common pitfalls (missing redirect route, missing E2EE roles, etc.).

• Discussion: Understanding TideCloak Auth in React

---

📚 Reference

Complete API reference for the React SDK: provider props, useTideCloak() hook, guard components, token helpers, and E2EE utilities.

• Reference: TideCloak React SDK

---

Using Next.js instead? See the Next.js SDK intro at Next.js-intro