@nft-portal/providers

If you use this repo, star it ✨

---

Portal React Context Providers

🔐 Interact with Portal protocols and canisters

---

Please note that this project is under active development. APIs might change before version 1 is released.

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.

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:

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:

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>;
};