# idmesh-react

> IDMesh sdk wrapped for react 16+

Latest version **0.9.1** (published 2023-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install idmesh-react
pnpm add idmesh-react
yarn add idmesh-react
bun add idmesh-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2023-07-13 |
| First published | 2023-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 74.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | sense-soft |
| Maintainers | 610946bafa25fa3e2417237e |

## Links

- npm: https://www.npmjs.com/package/idmesh-react
- Repository: https://github.com/sense-soft/idmesh-react
- Issues: https://github.com/sense-soft/idmesh-react/issues
- npm.io page: https://npm.io/package/idmesh-react

## Dependencies (1)

- [idmesh-spa-js](https://npm.io/package/idmesh-spa-js.md) >=0.9.1

## Recent versions

- 0.9.1 (latest) — 2023-07-13

## README

# idmesh-react

---

*idmesh-react* is a wrapper of idmesh-spa-js for React.

## Usage

### basic usage

install

``` shell
npm i idmesh-react --save
```

setup provider

``` jsx
import { IDMeshProvider } from 'idmesh-react';

const App = () => {
  return (
    <IDMeshProvider
      domain={YOUR_DOMAIN}
      clientId={YOUR_CLIENT_ID}
      authorizeTimeoutInSeconds={5}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      {/*  */}
    </IDMeshProvider>
  )
}
```

use hook

``` jsx
import { useIDMesh } from 'idmesh-react';

const MyComponent = () => {
  const { loginWithRedirect, logout, isAuthenticated, user, isLoading, getAccessTokenSilently } = useIDMesh();
  const onLogin = () => loginWithRedirect();
  const onLogout = () => logout({ logoutParams: { returnTo: window.location.origin } });
  const userInfoString = JSON.stringify(user, undefined, 4);
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const getToken = async () => {
      setAccessToken(await getAccessTokenSilently());
    };
    if (isAuthenticated) {
      getToken();
    } else {
      setAccessToken('');
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  return (
    <>
      <h1>
        Hello IDMesh
      </h1>
      <button onClick={onLogin} disabled={isLoading || isAuthenticated}>Login In</button>
      <button onClick={onLogout} style={{ marginLeft: '6px' }} disabled={isLoading || !isAuthenticated}>Log Out</button>
      { isLoading && <div>loading...</div>}
      {
        accessToken && (<>
         <h2>Access Token:</h2>
          <pre>{ accessToken }</pre>
        </>)
      }
      {
        isAuthenticated && (<>
         <h2>User Info:</h2>
          <pre>{ userInfoString }</pre>
        </>)
      }
    </>
  );
}
```

## API

TODO

## Example

TODO

## License

TODO

---
_Source: https://npm.io/package/idmesh-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._