upcx-auth

A React TypeScript library providing authentication context provider and common utility functions for UPCX-based projects.

Installation

Install via npm:

npm install upcx-auth

or via yarn:

yarn add upcx-auth

Usage

1. Wrap Your App with UPCXAuthProvider

To enable authentication context and modal functionality, wrap your application with the UPCXAuthProvider:

import React from "react";
import { UPCXAuthProvider } from "upcx-auth";

const App = () => (
  <UPCXAuthProvider>{/* your app components */}</UPCXAuthProvider>
);

export default App;

2. Access Auth Context

You can access authentication state and helper methods using the useUPCXAuthContext hook:

import { useUPCXAuthContext } from "upcx-auth";

const MyComponent = () => {
  const {
    account,
    accountID,
    pubKey,
    accountIconType,
    authLoaded,
    handleShowLoading,
    handleShowAuthModal,
    setHandleSignInSuccessed,
    setHandleSignInFailed,
    setHandleError,
    handleDisconnect,
    handleTransfer,
    handleSignMessage,
    handleExecuteContract,
  } = useUPCXAuthContext();

  // Example usage
  return (
    <div>
      {account ? (
        <span>Welcome, {account}</span>
      ) : (
        <button onClick={() => handleShowAuthModal(true)}>Sign In</button>
      )}
    </div>
  );
};

UPCXAuthContext Values & Methods

The context provides the following values and methods:

| Name | Type | Description | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | account | string \| undefined | Current account name (if signed in) | | accountID | string \| undefined | Current account ID | | pubKey | string \| undefined | Public key | | accountIconType | number | Account icon type | | authLoaded | boolean | Whether authentication is loaded | | handleShowLoading | (show: boolean) => void | Show or hide loading indicator | | handleShowAuthModal | (show: boolean) => void | Show or hide authentication modal | | setHandleSignInSuccessed | (callback: () => void) => void | Set callback for successful sign-in | | setHandleSignInFailed | (callback: (err: Error) => void) => void | Set callback for failed sign-in | | setHandleError | (callback: (err: Error) => void) => void | Set callback for general errors | | handleDisconnect | () => void | Disconnect the current session | | handleTransfer | (toAccount: string, amount: number, tokenName: string, precision: number, onSuccess: () => void, onFailed: (err: Error) => void) => Promise<void> | Transfer tokens to another account | | handleSignMessage | (message: string, onSuccess: (signedMessage: string) => void, onFailed: (err: Error) => void) => void | Sign a message | | handleExecuteContract | (contractName: string, funcName: string, params: any, onSuccess: () => void, onFailed: (err: Error) => void) => Promise<void> | Execute a smart contract |

Utility Functions

The library also exports common utility functions:

import {
  recoverPrivateKey,
  saveAuthData,
  getAccountName,
  getPublicKey,
  signOut,
} from "upcx-auth";

// Example usage:
recoverPrivateKey().then((key) => console.log(key));

Demo

A demo website using this library is available at UPCX-Auth-Demo-Web.
Refer to this project for a full integration example.

Assets

SVG and image assets (such as Google, Facebook, X icons) are included and imported as modules.
Note: Ensure your build process copies the asset directory to your output (dist) directory.

License

MIT License.