Skip to main content

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);
}

// ...

Contact Us to request more specific metrics about the account address