# Integrate SDK for React application

Mount, manage, and control Revolut ID authentication buttons in React applications.

## React button component

Basic React component with button mounting:

```typescript
import { useEffect, useRef, useState } from 'react'
import { RevolutIdLoader, ButtonClient, ButtonStyle } from '@revolut/id'

type Props = {
  buttonStyle: ButtonStyle
}

export function RevolutAuthButton({ buttonStyle }: Props) {
  const containerRef = useRef<HTMLDivElement>(null)
  const buttonClientRef = useRef<ButtonClient | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  // const revolutId

  useEffect(() => {
    async function mountButton() {
      if (!containerRef.current) return

      try {
        const revolutId = await RevolutIdLoader({ mode: 'production' })

        const { mountButton } = revolutId.initialise({
          clientId: 'your-client-id',
          redirectUri: window.location.origin + '/auth/callback',
          scope: ['profile', 'email'],
          displayMode: 'popup', // Explicit popup mode
          onAuthSuccess: ({ code, codeVerifier }) => {
            // exchange code for user token on your BE side
          },
          onAuthFailure: (e) => {
            console.error('Authentication failed:', e.error)
          },
        })

        buttonClientRef.current = mountButton(
          containerRef.current,
          buttonStyle
        )
        setIsLoading(false)
      } catch (e) {
        setError('Failed to load revolut-id-sdk')
        setIsLoading(false)
      }
    }

    mountButton()

    // Cleanup on unmount
    return () => {
      if (buttonClientRef.current) {
        buttonClientRef.current.unmount()
      }
    }
  }, [buttonStyle])

  if (isLoading) return <div>Loading authentication...</div>
  if (error) return <div>Error: {error}</div>

  return <div ref={containerRef} />
}
```

### API reference

Revolut ID Web SDK provide interface RevolutId that can be returned by RevolutIdLoader (NPM installation) or be available in global window scope via `window.revolut.id`.

```typescript
export interface ButtonClient {
  mount: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  unmount: () => void
}

export interface RevolutId {
  initialise: (config: Config) => {
    mountButton: (container: HTMLElement, params?: ButtonStyle) => ButtonClient
  }

  processRedirectParams: () => SuccessResult | ErrorResult | null
}
```

#### Config - initialisation parameters (required)

| Parameter       | Type                               | Description                             | Required                      |
| --------------- | ---------------------------------- | --------------------------------------- | ----------------------------- |
| `clientId`      | `string`                           | Your Revolut application client ID      | Yes                           |
| `redirectUri`   | `string`                           | URI to redirect to after authentication | Yes                           |
| `scope`         | `OpenIdScope[]`                    | Array of requested OpenID scopes        | Yes                           |
| `displayMode`   | <code>popup \| redirect</code>     | Authentication display mode             | No                            |
| `mode`          | <code>production \| sandbox</code> | Environment mode                        | No (defaults to 'production') |
| `colorScheme`   | `ColorScheme`                      | UI theme preference                     | No                            |
| `countryCodes`  | `string[]`                         | Array of allowed country codes          | No                            |
| `locale`        | `string`                           | Language/locale code                    | No                            |
| `onAuthSuccess` | `(result: SuccessResult) => void`  | Success callback function               | Yes (popup mode only)         |
| `onAuthFailure` | `(result: ErrorResult) => void`    | Error callback function                 | No (popup mode only)          |

For complete configuration documentation and advanced options, see [Config API reference](/docs/sdks/revolut-id-sdk/web/api-reference/revolut-id#config-parameters).

#### ButtonStyle - button styling parameters (optional)


| Parameter | Type                                                          | Description             | Default               | Required |
| --------- | ------------------------------------------------------------- | ----------------------- | --------------------- | -------- |
| `kind`    | <code>continue \| sign_in \| sign_up \| verify \| icon</code> | Button text and purpose | <code>continue</code> | No       |
| `size`    | <code>large \| small</code>                                   | Button size             | <code>large</code>    | No       |
| `variant` | <code>dark \| light \| light-outlined</code>                  | Visual style            | <code>dark</code>     | No       |
| `radius`  | <code>none \| default \| round</code>                         | Corner rounding         | <code>default</code>  | No       |

For complete button styling documentation and usage examples, see [ButtonStyle API reference](/docs/sdks/revolut-id-sdk/web/api-reference/button-style).

:::tip[Environment setup]
The environment you use **must** match your client environment configuration.

- Use `production` mode with your production client ID for live applications
- Use `sandbox` mode with your sandbox client ID for development and testing

See [environment configuration](/docs/sdks/revolut-id-sdk/web/configure-client#environment-configuration) for more details.
:::

:::tip[React integration best practices]

- **Use useEffect cleanup**: Always return cleanup functions from useEffect
- **Manage refs properly**: Use useRef for DOM elements and button clients
- **Handle loading states**: Show loading indicators while the SDK Initialises
- **Error boundaries**: Wrap components in error boundaries to catch SDK failures
- **Memoize callbacks**: Use useCallback for functions passed to useEffect dependencies
- **Custom hooks**: Create reusable hooks for common authentication patterns
- **TypeScript**: Use proper typing for better development experience
  :::

## Next steps

Learn how to exchange code for user ID token - [code exchange](/docs/sdks/revolut-id-sdk/web/code-exchange).