A React SDK that enables frontend React applications to seamlessly integrate with the Connect Auth product.
npm install @connect-xyz/auth-reactA React SDK that enables frontend React applications to seamlessly integrate with the Connect Auth product.
Connect Auth provides a secure, customizable authentication flow for crypto deposits. Learn more in the Connect Auth documentation.
- React 18.0.0 or higher
- React DOM 18.0.0 or higher
``bash`
npm install @connect-xyz/auth-react
Follow these simple steps to integrate Connect Auth into your React application:
`tsx`
import { Auth } from '@connect-xyz/auth-react';
`tsx
function App() {
const jwt = 'your-jwt-token'; // Obtain this from your backend authentication
return (
env="production" // or "sandbox" for testing
theme="auto" // 'auto' (default), 'light', or 'dark'
/>
);
}
`
Listen to events from the Auth SDK to handle user interactions:
`tsx
function App() {
const jwt = 'your-jwt-token';
const handleError = ({ errorCode, reason }) => {
console.log('Auth error occurred:', errorCode, 'Reason:', reason);
};
const handleClose = () => {
console.log('Auth widget closed');
};
const handleDeposit = ({ data }) => {
console.log('Deposit data:', data);
};
const handleEvent = ({ type, data }) => {
console.log('Auth event:', type, 'Data:', data);
};
return (
env="production"
theme="auto" // 'auto' (default), 'light', or 'dark'
onError={handleError}
onClose={handleClose}
onDeposit={handleDeposit}
onEvent={handleEvent}
/>
);
}
`
For detailed information about callback events and their payloads, see the Auth SDK Callbacks documentation.
Here's a full example of integrating Connect Auth into your React application:
`tsx
import React from 'react';
import { Auth } from '@connect-xyz/auth-react';
function App() {
// JWT token should be obtained from your backend
const jwt = 'your-jwt-token';
// Choose environment: "production" for live apps, "sandbox" for testing
const environment = 'production';
return (
env={environment}
theme="auto" // 'auto' (default), 'light', or 'dark'
onError={({ errorCode, reason }) => {
console.log('Error:', errorCode, 'Reason:', reason);
}}
onClose={() => {
console.log('Auth widget closed');
}}
onDeposit={({ data }) => {
console.log('Deposit successful:', data);
}}
onEvent={({ type, data }) => {
console.log('Event type:', type, 'Event data:', data);
}}
/>
export default App;
`
| Prop | Type | Required | Default | Description |
| ----------- | --------------------------------- | -------- | -------------- | ---------------------------------------------- |
| jwt | string | Yes | - | JWT token for authentication with Connect Auth |env
| | "production" \| "sandbox" | No | "production" | Target environment |theme
| | "auto" \| "light" \| "dark" | No | "auto" | Theme mode for the interface |onError
| | ({ errorCode, reason }) => void | No | - | Callback for error events |onClose
| | () => void | No | - | Callback when the widget is closed |onDeposit
| | ({ data }) => void | No | - | Callback for deposit received |onEvent
| | ({ type, data }) => void` | No | - | Callback for general events |
For comprehensive documentation or support about Connect Auth, visit our Documentation Page.