dtect Security API
Status PageDashboard
Status PageDashboard
  1. Frontend SDK
  • Getting Started
    • Introduction
    • Security Features
    • Security Request
    • API Credentials
    • Adding to Survey Platforms
  • Frontend SDK
    • Introduction
    • Quality Questions & AI Detection
    • React
    • JavaScript
    • Error List
  • Security Token
    • Introduction
    • Retrieve Security Result using Security Token
      GET
Status PageDashboard
Status PageDashboard
  1. Frontend SDK

React

The dtect Security API provides a React SDK to simplify integration with our API.
We recommend reading the general Frontend SDK Introduction to understand the core concepts before proceeding with the React SDK installation.

Installing the React SDK#

Now that you're familiar with the fundamentals of our Frontend SDKs, you can add the React SDK to your application by following these steps:
1
Install our npm package
You can add it to your application running the following command in the root of your application code:
2
Wrap your application with our SDK
You need to wrap your application with our <SecurityAPIProvider> and add the following props to your component:
clientId: You can get a Client ID under the Public Keys section by accessing the credentials page on dtect API dashboard
apiKey: You can get an API Key from your chosen Client under the Public Keys section
You can learn more about the values you can use checking our Security Request page.
3
Use our hooks
Now that your application is wrapped by our <SecurityAPIProvider>, you can use our hook useSecurityApi() anywhere to get data about your visitor and retrieve a Security Result or a Security Token.
getSecurityToken() – Recommended
getSecurityResult()
4
Optional: Quality Questions & AI Detection
These methods are optional add-ons. For full details (respondent types, languages, responses), see Quality Questions & AI Detection. You can import them from our useSecurityApi() hook:
getQualityQuestions
checkQualityQuestions
isAIUsageDetected
Set includeResults: true on <SecurityAPIProvider> if you want checkQualityQuestions and isAIUsageDetected to return their result object directly.
5
Optional: Combined Flow
You can chain calls in the same session. Only the first billable call will create a charge.

Error Handling#

We export an enum that provides access to all of our error codes. You can use this enum to add error handling in your integration.
Please refer to our Error List to view possible errors that may occur during implementation.
Previous
Quality Questions & AI Detection
Next
JavaScript