@us3r-network/auth-with-rainbowkit

The @us3r-network/auth-with-rainbowkit package is a react component, that create authenticated sessions for users with rainbowKit.

Install

npm install @us3r-network/auth-with-rainbowkit

This library bundles some polyfills, but you should still understand what additional settings are required for rainbowkit in different frameworks and build tools.

Usage

Wrap providers

Wrap your application with Us3rAuthWithRainbowkitProvider.

import { Us3rAuthWithRainbowkitProvider } from "@us3r-network/auth-with-rainbowkit";

const App = () => {
  return (
    <Us3rAuthWithRainbowkitProvider>
      <YourApp />
    </Us3rAuthWithRainbowkitProvider>
  );
};

Hooks

useAuthentication

// Return Value

{
  // did-session
  session: DIDSession;
  // authorization status
  status: "loading" | "unauthenticated" | "authenticated";
  // session ready
  ready: boolean;
  // sign in action
  signIn: () => Promise<void>;
  // sign out action
  signOut: () => void;
}

useSession

// Return Value

DIDSession | undefined;

Typical usage pattern

SignButton.tsx

import {
  useAuthentication,
  useSession,
} from "@us3r-network/auth-with-rainbowkit";

function SignButton() {
  const { ready, status, signIn, signOut } = useAuthentication();
  const session = useSession();

  const clickAction = useCallback(() => {
    if (session) {
      signOut();
    } else {
      signIn();
    }
  }, [session, signIn, signOut]);

  return (
    <button disabled={!ready} onClick={clickAction}>
      {(() => {
        if (!ready) {
          return "Initializing session...";
        }
        return session ? "SignOut" : "SignIn";
      })()}
    </button>
  );
}

ProfilePage.tsx

import {
  useAuthentication,
  useSession,
} from "@us3r-network/auth-with-rainbowkit";
import SignButton from "your-path/SignButton";

function ProfilePage() {
  const { ready } = useAuthentication();
  const session = useSession();
  return (
    <div>
      <div>
        {(() => {
          if (!ready) {
            return "Initializing session...";
          }
          if (session) {
            return (
              <>
                <p>UserName: ...</p>
                <p>UserBio: ...</p>
                <p>OtherInfo: ...</p>
              </>
            );
          }
          return "Please click the button to authorize login";
        })()}
      </div>
      <SignButton />
    </div>
  );
}

export default App;