Invisible Protect
We're excited to introduce a groundbreaking feature—Invisible Protect. It seamlessly secures your application without interrupting the user experience.
Benefits include:
- Seamless Integration: The feature operates undetected in the background.
- Zero User Interaction: Eliminates the need for authentication pop-ups or additional user steps.
- Design Freedom: No adjustments needed for styling prompts or dialogs.
info
Invisible Absinthe Protect is a premium Absinthe Protect feature.
Follow these updated steps to integrate Invisible Protect into your application.
Integration Steps
1. Reach out to get the API key and context_id​
2. Install the Invisible Absinthe Protect React Package​
Begin by installing the absinthe-protect-invisible npm package.
npm i absinthe-protect-invisible # or yarn add absinthe-protect-invisible
Next, encapsulate your <App/> component with <AbsintheInvisibleProtector> in the main.tsx file, ensuring it's the first component within the hierarchy.
Supply appName with the name of your project.
main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { AbsintheInvisibleProtector } from 'absinthe-protect-invisible';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<AbsintheInvisibleProtector appName="<MY_APP_NAME>">
<App />
</AbsintheInvisibleProtector>
</React.StrictMode>
);
3. Send an AuxData Request​
After wallet connection, link the identification with the EOA address by sending an AuxData request. Utilize the sendAuxData method provided.
jsx
// Import useContext and relevant functions
import React, { useContext } from "react";
import { AbsintheContext, sendAuxRequest } from "absinthe-protect-invisible";
// Retrieve the requestId from AbsintheContext
const requestId = useContext(AbsintheContext);
// ...
// Utilize the placeholders to input your specific details
const eoaAddress = "<GET_CONNECTED_EOA_ADDRESS>";
const contextId = "<YOUR_CREATED_CONTEXTID>";
const originSiteUrl = "<YOUR_PROJECTS_URL>";
try {
sendAuxRequest(requestId, eoaAddress, contextId, originSiteUrl);
} catch (e) {
console.error("Failed to send aux request:", e);
}
// ...