Add a React + Vite front end integrating the Castle browser SDK#4
Merged
Conversation
Add a React + Vite + TypeScript app under react/ that demonstrates a proper Castle browser SDK integration: a CastleProvider configures @castleio/castle-js once and a useCastle() hook exposes createRequestToken() and custom-event tracking. A login form mints a fresh request token on submit and evaluates it through the existing Express backend (proxied via Vite in development). - typed fetch + result panel rendering the verdict, signals and raw payloads - shared dark-theme Tailwind tokens for a consistent look - CI job to type-check and build the React app - README documenting the setup
vite.config.ts reads process.env, which requires the Node type definitions during the tsc build step in CI.
Bump react/react-dom to 19, their type definitions, and the Vite toolchain (vite, @vitejs/plugin-react) to current majors.
Restructure the demo around the complete Castle user lifecycle. Every action mints a fresh request token in the browser (castle.js) and forwards it to the backend. - add sign up ($registration -> risk/filter) as a server-rendered page - add logout ($logout) via the non-blocking log endpoint - the post-login React /account page now hosts profile update ($profile_update -> risk), a custom event, and logout — and is served by Express, mounted into a Pug shell that injects the publishable key and current user - move the custom event out of the login page (it is post-login only) - drop the Events (monitoring) API demo - guard the server against unhandled rejections from the fire-and-forget log, so a failed background log can't crash the process - tests for the new endpoints; readmes updated for the new flow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Adds a React + Vite + TypeScript front end under
react/that shows the idiomatic way to integrate the Castle browser SDK (@castleio/castle-js) in a React app, talking to the existing Express demo backend. The server-rendered Pug pages remain; this is an additional, self-contained example for SPA-style integrations.How the integration works
CastleProvidercallsCastle.configure({ pk })a single time, guarded against React StrictMode's double mount, and exposes a typed API through auseCastle()hook.createRequestToken()on submit and forwards it toPOST /evaluate_login, which sends it to Castle'srisk/filterendpoint.VITE_CASTLE_PKthe hook still resolves (empty token) and the UI surfaces a clear notice.trackCustom()wrapsCastle.custom(...).Changes
react/Vite app:CastleProvider/useCastle, aLoginForm, aResultPanelthat renders the verdict/signals/raw payloads, and a typed API helper.VITE_BACKEND_URL, defaulthttp://localhost:4006).react/README.mdplus a pointer from the main readme.Known limitations
castle_pk/castle_api_secret(otherwise the panel shows the API error, as expected).