use-tokenpass

Hook for using TokenPass in react apps. Authenticates users via local TokenPass instance.

bsv-wasm dependency

Depending on your setup, it may be necessary to make some changes to your webpack config to get bsv-wasm to work corretly with your build process for the browser. The following is an example of how to replace the path module with path-browserify and bsv-wasm with bsv-wasm-web using the webpack-plugin-replace-npm plugin in a next.js project, but the same applies to any webpack project.

Install additional dev dependencies:

yarn add replace-module-webpack-plugin bsv-wasm-web --dev

Then add the plugin to your next.config.js:

const WebpackPluginReplaceNpm = require("replace-module-webpack-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    fallbackNodePolyfills: false,
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        dns: false,
        fs: false,
        module: false,
        crypto: false,
        os: false,
        stream: false,
        http: false,
        https: false,
        net: false,
      };
    }

    config.plugins = [
      ...config.plugins,
      new WebpackPluginReplaceNpm({
        rules: [
          {
            originModule: "path",
            replaceModule: "path-browserify",
          },
          {
            originModule: "bsv-wasm",
            replaceModule: "bsv-wasm-web",
          },
        ],
      }),
    ];

    return config;
  },
};

module.exports = nextConfig;

You may also need to add the "use client" directive to the top of any pages using the context provider:

"use client";

...

const { auth } = useTokenPass();

...

Usage

Import the useTokenPass hook

import { useTokenPass } from "use-tokenpass";

Add to your AppContext:

import React, { ReactNode } from "react";
import { Options, TokenPassProvider } from "./tokenpass";

interface Props {
  children: ReactNode;
}

const AppContext: React.FC<Props> = ({ children }) => {
  // tokenpass profiver config
  const tokenPassConfig = {
    host: "http://localhost:21000",
    loginMode: "auto",
  } as Options;

  return (
    <TokenPassProvider options={tokenPassConfig}>{children}</TokenPassProvider>
  );
};

export default AppContext;

Use in your component.

import { useTokenPass } from "use-tokenpass";

const { auth } = useTokenPass();

useEffect(() => {
  if (auth) {
    const { address, error, errorURL } = auth;

    if (error) {
      window.location.href = errorURL;
    } else {
      console.log({ address });
    }
  }
}, [auth]);

The auth object

Weather authenticated with TokenPass or not the auth object will be set upon calling the hook.

{
  address: string;
  message: string;
  sig: string;
  ts: string;
  error?: string;
  errorURL?: string;
}

useTokenPass also provides functions for getting/setting the user's profile, and logging out.

type ContextValue = {
    auth: Auth | undefined;
    getProfile: () => Promise<void>;
    saveProfile: (profile: Profile) => Promise<void>;
    profile: Profile | undefined;
    logout: () => Promise<boolean>;
};