{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs"]},"redocly_category":"SDK Reference","type":"markdown"},"seo":{"title":"Overview","description":"Everything about Mosaic Journeys, SDKs, and APIs","siteUrl":"https://developer.transmitsecurity.com/"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"overview","__idx":0},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Fraud Prevention library for React (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@transmitsecurity/riskid-reactjs-ts"]},") is a wrapper of the Mosaic ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/sdk-ref/platform/modules/drs_overview"},"children":["Fraud Prevention JavaScript SDK"]},". Once integrated, the library automatically collects device and behavioral telemetry and submits it to Mosaic for analysis. When specific user actions occur (such as login or account registration), you can report those events to receive risk-based recommendations via the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/openapi/risk/recommendations.openapi"},"children":["Recommendations"]}," backend API."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"capabilities","__idx":1},"children":["Capabilities"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Collects device and behavioral data automatically in the background"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Reports user action events (login, registration, transaction, etc.) for risk assessment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Provides action tokens for correlating client-side and backend events"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["React context provider and hook-based API"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"installation","__idx":2},"children":["Installation"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"npm","key":"npm"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"npm","header":{"controls":{"copy":{}}},"source":"  npm i @transmitsecurity/riskid-reactjs-ts\n","lang":"npm"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"yarn","key":"yarn"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yarn","header":{"controls":{"copy":{}}},"source":"  yarn add @transmitsecurity/riskid-reactjs-ts\n","lang":"yarn"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"initialization","__idx":3},"children":["Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Import the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TSAccountProtectionProvider"]}," and wrap your application:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"import { TSAccountProtectionProvider } from '@transmitsecurity/riskid-reactjs-ts';\n\n<TSAccountProtectionProvider\n  clientId=\"CLIENT_ID\"\n  options={{ serverUrl: 'https://api.transmitsecurity.io/risk-collect/' }}\n>\n  <App />\n</TSAccountProtectionProvider>\n","lang":"jsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure the server URL based on your region:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Region"},"children":["Region"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Server URL"},"children":["Server URL"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["US"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["EU"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.eu.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Canada"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.ca.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Australia"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.au.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Japan"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.gasne1-ts01.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sandbox"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.sbx.transmitsecurity.io/risk-collect/"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom domain"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://<your_custom_domain>/risk-collect/"]}," (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/deployment/custom_domains"},"children":["Custom domains"]},")"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":4},"children":["Usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useTSAccountProtection"]}," hook to access the library methods:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"import { useTSAccountProtection } from '@transmitsecurity/riskid-reactjs-ts';\n\nfunction InnerComponent() {\n  const { triggerActionEvent, setAuthenticatedUser, clearUser } = useTSAccountProtection();\n\n  const handleLogin = async () => {\n    const actionResponse = await triggerActionEvent('login');\n    // Send actionResponse.actionToken to your backend\n  };\n}\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":5},"children":["Next steps"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/risk/quick_start_react"},"children":["React quickstart"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/openapi/risk/recommendations.openapi"},"children":["Recommendations API"]}]}]}]},"headings":[{"value":"Overview","id":"overview","depth":1},{"value":"Capabilities","id":"capabilities","depth":2},{"value":"Installation","id":"installation","depth":2},{"value":"Initialization","id":"initialization","depth":2},{"value":"Usage","id":"usage","depth":2},{"value":"Next steps","id":"next-steps","depth":2}],"frontmatter":{"title":"Fraud Prevention SDK for React","markdown":{"toc":{"depth":2}},"seo":{"title":"Overview"}},"lastModified":"2026-08-12T11:57:11.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/sdk-ref/react/fraud_prevention_overview","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}