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.
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.).
Reference
Complete API reference for the React SDK: provider props, useTideCloak() hook, guard components, token helpers, and E2EE utilities.
Using Next.js instead? See the Next.js SDK intro at Next.js-intro