React Integration

⚛️ Integrating the form with React

You can also use a wrapper around the AuthArmor form that allows you to use it as an ordinary React component without worrying about optimizing your SDK usage to avoid memory leaks or controlling it through complex ref-based mechanisms.

🔖Storybook

You can visit our Storybook demo for an interactive showcase of how you can customize the wrapper's fields and stylize it to fit in with the rest of your site's UI/UX

Installation

You can install the wrapper to your React project using either NPM or Yarn:

# Using NPM
npm i --save autharmor-sdk-react

# Using Yarn
yarn add autharmor-sdk-react

Usage

You can easily mount the Form in your React app by simply importing and using the SDK wrapper plugin:

<AuthArmorSDK
    clientSdkApiKey="..."
    webauthnClientId="..."
    registerRedirectUrl={`<URL added through the Dashboard>`}
    authenticationRedirectUrl={`<URL added through the Dashboard>`}
    onAuthSuccess={() => console.log("Login success!")}
    onRegisterSuccess={() => console.log("Register success!")}
/>

Did this page help you?