@ic-reactor/react 0.4.1 → 0.4.3

package/README.md

@@ -37,11 +37,12 @@ import { createReActor } from "@ic-reactor/react"
 
 type Actor = typeof actor
 
-export const { useActorStore, useQueryCall } = createReActor<Actor>({
-  canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
-  idlFactory,
-  host: "https://localhost:4943",
-})
+export const { useActorStore, useAuthClient, useQueryCall } =
+  createReActor<Actor>({
+    canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
+    idlFactory,
+    host: "https://localhost:4943",
+  })
 ```
 
 Then, use the `useQueryCall` hook to call your canister method:
@@ -54,7 +55,11 @@ const Balance = ({ principal }) => {
   const { call, data, loading, error } = useQueryCall({
     functionName: "get_balance",
     args: [principal],
-    callOnMount: true,
+    refetchInterval: 1000,
+    refetchOnMount: true,
+    onLoading: () => console.log("Loading..."),
+    onSuccess: (data) => console.log("Success!", data),
+    onError: (error) => console.log("Error!", error),
   })
 
   return (
@@ -72,6 +77,61 @@ const Balance = ({ principal }) => {
 export default Balance
 ```
 
+## Authentication
+
+`@ic-reactor/react` provides a custom hook for managing authentication with the IC blockchain. To use it, first create an authentication declaration file:
+
+```jsx
+// Login.tsx
+import { useAuthClient } from "./store"
+
+const Login = () => {
+  const {
+    login,
+    logout,
+    loginLoading,
+    loginError,
+    identity,
+    authenticating,
+    authenticated,
+  } = useAuthClient()
+
+  return (
+    <div>
+      <h2>Login:</h2>
+      <div>
+        {loginLoading && <div>Loading...</div>}
+        {loginError ? <div>{JSON.stringify(loginError)}</div> : null}
+        {identity && <div>{identity.getPrincipal().toText()}</div>}
+      </div>
+      {authenticated ? (
+        <div>
+          <button onClick={() => logout()}>Logout</button>
+        </div>
+      ) : (
+        <div>
+          <button
+            onClick={() =>
+              login({
+                identityProvider:
+                  process.env.DFX_NETWORK === "ic"
+                    ? "https://identity.ic0.app/#authorize"
+                    : "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize",
+              })
+            }
+            disabled={authenticating}
+          >
+            Login
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Login
+```
+
 ## API Reference
 
 The library provides various hooks and utilities for interacting with IC actors:

package/dist/hooks/auth.d.ts

@@ -1,10 +1,11 @@
 import type { AuthClientLoginOptions } from "@dfinity/auth-client";
 import type { AgentManager } from "@ic-reactor/store";
+import { AuthArgs } from "../types";
 export type AuthHooks = ReturnType<typeof getAuthHooks>;
 export declare const getAuthHooks: (agentManager: AgentManager) => {
     useAgentManager: () => AgentManager;
     useAuthStore: () => import("@ic-reactor/store").AgentAuthState;
-    useAuthClient: () => {
+    useAuthClient: ({ onAuthentication, onAuthenticationSuccess, onAuthenticationFailure, onLogin, onLoginSuccess, onLoginError, onLoggedOut, }?: AuthArgs) => {
         authClient: import("@dfinity/auth-client").AuthClient | null;
         authenticated: boolean;
         authenticating: boolean;

package/dist/hooks/auth.js

@@ -13,7 +13,7 @@ exports.getAuthHooks = void 0;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const getAuthHooks = (agentManager) => {
-    const { authenticate, authStore } = agentManager;
+    const { authenticate: authenticator, authStore, isLocalEnv } = agentManager;
     const useAgentManager = () => {
         return agentManager;
     };
@@ -21,35 +21,63 @@ const getAuthHooks = (agentManager) => {
         const authState = (0, zustand_1.useStore)(authStore, (state) => state);
         return authState;
     };
-    const useAuthClient = () => {
+    const useAuthClient = ({ onAuthentication, onAuthenticationSuccess, onAuthenticationFailure, onLogin, onLoginSuccess, onLoginError, onLoggedOut, } = {}) => {
         const [loginLoading, setLoginLoading] = (0, react_1.useState)(false);
         const [loginError, setLoginError] = (0, react_1.useState)(null);
         const { authClient, authenticated, authenticating, identity } = useAuthStore();
-        const login = (options) => __awaiter(void 0, void 0, void 0, function* () {
+        const authenticate = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+            onAuthentication === null || onAuthentication === void 0 ? void 0 : onAuthentication();
+            authenticator()
+                .then((identity) => {
+                onAuthenticationSuccess === null || onAuthenticationSuccess === void 0 ? void 0 : onAuthenticationSuccess(identity);
+            })
+                .catch((e) => {
+                onAuthenticationFailure === null || onAuthenticationFailure === void 0 ? void 0 : onAuthenticationFailure(e);
+            });
+        }), [
+            authenticator,
+            onAuthentication,
+            onAuthenticationSuccess,
+            onAuthenticationFailure,
+        ]);
+        const login = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
             setLoginLoading(true);
             setLoginError(null);
+            onLogin === null || onLogin === void 0 ? void 0 : onLogin();
             try {
-                yield (authClient === null || authClient === void 0 ? void 0 : authClient.login(Object.assign(Object.assign({}, options), { onSuccess: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (!authClient) {
+                    throw new Error("Auth client not initialized");
+                }
+                yield authClient.login(Object.assign(Object.assign({ identityProvider: isLocalEnv
+                        ? "https://identity.ic0.app/#authorize"
+                        : "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize" }, options), { onSuccess: () => __awaiter(void 0, void 0, void 0, function* () {
                         var _a;
                         setLoginLoading(false);
                         yield authenticate();
                         (_a = options === null || options === void 0 ? void 0 : options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options);
+                        onLoginSuccess === null || onLoginSuccess === void 0 ? void 0 : onLoginSuccess();
                     }), onError: (e) => {
                         var _a;
                         setLoginError(e);
                         setLoginLoading(false);
                         (_a = options === null || options === void 0 ? void 0 : options.onError) === null || _a === void 0 ? void 0 : _a.call(options, e);
-                    } })));
+                        onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(e);
+                    } }));
             }
             catch (e) {
                 setLoginLoading(false);
                 setLoginError(e);
+                onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(e);
             }
-        });
-        const logout = (options) => __awaiter(void 0, void 0, void 0, function* () {
-            yield (authClient === null || authClient === void 0 ? void 0 : authClient.logout(options));
+        }), [authClient, onLogin, onLoginSuccess, onLoginError, isLocalEnv]);
+        const logout = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
+            if (!authClient) {
+                throw new Error("Auth client not initialized");
+            }
+            yield authClient.logout(options);
             yield authenticate();
-        });
+            onLoggedOut === null || onLoggedOut === void 0 ? void 0 : onLoggedOut();
+        }), [authClient, onLoggedOut]);
         (0, react_1.useEffect)(() => {
             if (!authClient && !authenticating) {
                 authenticate();

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export * from "./context/actor";
 export declare const createReActor: <A extends unknown>({ isLocalEnv, ...options }: CreateReActorOptions) => ActorHooks<A> & {
     useAgentManager: () => import("@ic-reactor/store").AgentManager;
     useAuthStore: () => import("@ic-reactor/store").AgentAuthState;
-    useAuthClient: () => {
+    useAuthClient: ({ onAuthentication, onAuthenticationSuccess, onAuthenticationFailure, onLogin, onLoginSuccess, onLoginError, onLoggedOut, }?: import("./types").AuthArgs) => {
         authClient: import("@dfinity/auth-client").AuthClient | null;
         authenticated: boolean;
         authenticating: boolean;

package/dist/types.d.ts

@@ -1,6 +1,15 @@
-import type { ExtractActorMethodArgs, ExtractActorMethodReturnType, ServiceMethodType } from "@ic-reactor/store";
+import type { ExtractActorMethodArgs, ExtractActorMethodReturnType, Identity, ServiceMethodType } from "@ic-reactor/store";
 export type * from "@ic-reactor/store";
 export type * from "@ic-reactor/store/dist/actor/types";
+export type AuthArgs = {
+    onAuthentication?: () => void;
+    onAuthenticationSuccess?: (identity: Identity) => void;
+    onAuthenticationFailure?: (error: Error | unknown | null) => void;
+    onLoginSuccess?: () => void;
+    onLoginError?: (error: Error | unknown | null) => void;
+    onLogin?: () => void;
+    onLoggedOut?: () => void;
+};
 export type ActorCallArgs<A, M extends keyof A> = {
     functionName: M & string;
     args?: ExtractActorMethodArgs<A[M]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "A React library for interacting with Dfinity actors",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,7 +35,7 @@
     "node": ">=10"
   },
   "dependencies": {
-    "@ic-reactor/store": "^0.4.1",
+    "@ic-reactor/store": "^0.4.3",
     "zustand-utils": "^1.3"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
     "react": ">=16.8",
     "zustand": "4.4"
   },
-  "gitHead": "1086988151f4b52e95db045856a125b847d66639"
+  "gitHead": "b7de729b76ac8e1db098bf2eadf975cfb4a57fa2"
 }