open-index/open-npm huggingface dataset:
npm package: @nft-portal/providers
Description: Portal React context providers
Author: Portal
Latest version: 0.2.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/18316594/159810202-2b70920c-7fe1-4689-a1d5-e6571433395e.png" />
</p>

<p align="right">
  <i>If you use this repo, star it ✨</i>
</p>

---

<h2 align="center">Portal React Context Providers</h2>
<p align="center">🔐 <b>Interact with Portal protocols and canisters</b></p>

---

<p align="center">
  <b>Please note that this project is under active development. APIs might change before version 1 is released.</b>
</p>

## Introduction

This package exposes context providers to simplify working with the Portal video APIs.

## Getting Started: Authorization

Working with the Portal API requires an identity to perform actions. You may use any identity provider you like though we provide a Authorization context provider that makes it easy to use Internet Identity and NFID.

To begin you must configure the Authorization provider and wrap your app in it.

```tsx
import { AuthenticationProvider, buildNFID } from '@nft-portal/providers';

const root = ReactDOM.createRoot(document.getElementById('root'));

// Configure App specific properties
const identityProvider = buildNFID({
  appName: 'Portal',
  appLogo: 'https://yjp7w-nqaaa-aaaag-aaejq-cai.raw.ic0.app/portal.png',
});

root.render(
  <React.StrictMode>
    <AuthenticationProvider
      maxTimeToLive={36_000_000n}
      identityProvider={identityProvider}
      width={525}
      height={705}>
      <App />
    </AuthenticationProvider>
  </React.StrictMode>,
);
```

Now you can use the provider to login or logout users:

```tsx
import { useAuthentication } from '@nft-portal/providers';
import React from 'react';

import { SolidButton } from './Buttons';

export const LoginButton = () => {
  const { isAuthed, login, logout } = useAuthentication();
  return (
    <SolidButton
      onClick={isAuthed ? logout : login}
      label={isAuthed ? 'Logout' : 'Login'}
    />
  );
};
```

Once the user is logged in you can use the authenticated agent to make calls on their behalf:

```tsx
import { useAuthentication } from '@nft-portal/providers';
import React from 'react';

const cid = 'your_channel_canister_id';

export const App = () => {
  const { isAuthed, agent } = useAuthentication();

  useEffect(() => {
    // getInterfaces does not require any special
    // privileges so you can leave out the agent
    // and a default one will be created
    const getInterfaces = async () => {
      const client = PI.client(cid);
      const res = await client.getInterfaces_PI();
      console.log(res);
    };

    // getAdmin requires admin privileges
    // so an agent must be authorized and
    // provided
    const getAdmin = async () => {
      const client = PIAdmin.client(cid, agent);
      const res = await client.getAdmin_PIAdmin();
      console.log(res);
    };

    getInterfaces();

    if (isAuthed) {
      getAdmin();
    }
  }, [agent, isAuthed]);

  return <p>Do something with data...</p>;
};
```