# Auth57 React Components

Drop-in React components for teams embedding Auth57 Core API results in their own products.

These components are intentionally product-facing, not demo toys. They render real prior authorization results, source links, confidence, verification dates, and compare summaries from Auth57 API responses.

## Files

- `Auth57Core.jsx`: React components for lookup, compare, result cards, confidence, and PA badges.
- `auth57-core.css`: Auth57 visual language for embedded customer apps.
- `index.js`: package export surface for `@auth57/react`.
- `examples/nextjs`: backend proxy route examples for Next.js App Router.

## Install

Until the npm package is published, use the downloadable kit or copy this folder into your app:

```txt
https://auth57labs.com/developer-kit/auth57-react-kit.zip
```

After npm publication:

```bash
npm install @auth57/react
```

```jsx
import { Auth57PALookup } from '@auth57/react';
import '@auth57/react/styles.css';
```

## Security

Do not expose a production Auth57 API key in browser code.

Use one of these patterns:

- Preferred: call your own backend route, and have that backend attach `x-api-key` before forwarding to Auth57.
- Acceptable for internal tools only: pass `apiKey` directly to the component.

## Lookup Example

```jsx
import { Auth57PALookup } from '@auth57/react';
import '@auth57/react/styles.css';

export function PriorAuthLookup() {
  return (
    <Auth57PALookup
      endpoint="/api/auth57/pa-lookup"
      defaultState="TX"
      defaultProgram="medicaid_mco"
    />
  );
}
```

Your backend route should proxy to:

```txt
GET https://auth57labs.com/api/pa-lookup
```

with:

```txt
x-api-key: auth57_live_or_customer_key
```

For a ready-to-copy Next.js App Router proxy, see:

```txt
examples/nextjs/app/api/auth57/pa-lookup/route.js
examples/nextjs/app/api/auth57/compare/route.js
```

## Compare Example

```jsx
import { Auth57ComparePanel } from '@auth57/react';
import '@auth57/react/styles.css';

export function MarketCompare() {
  return (
    <Auth57ComparePanel
      endpoint="/api/auth57/compare"
      defaultStates={['TX', 'CA', 'OH']}
      defaultProgram="medicaid_mco"
      defaultServiceCategory="outpatient_surgery"
    />
  );
}
```

## Result Card Example

```jsx
import { Auth57RuleCard } from '@auth57/react';

export function ExistingWorkflowResult({ rule }) {
  return <Auth57RuleCard rule={rule} title="Prior auth check" />;
}
```

The `rule` object should match the Auth57 Core API response shape:

```json
{
  "state": "TX",
  "program": "medicaid_mco",
  "lookup_type": "service",
  "service_category": "outpatient_surgery",
  "requires_prior_auth": true,
  "pa_type": "full",
  "confidence": 0.9,
  "last_verified": "2026-04-02",
  "source_url": "https://www.hhs.texas.gov/agencies/programs/medicaid/managed-care/star"
}
```