Send user from NeynarContext

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",

src/components/NeynarAuthButton/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState, useRef } from "react";
 import { styled } from "@pigment-css/react";
 import PlanetBlackIcon from "./icons/PlanetBlackIcon";
-import { useNeynar } from "../../contexts";
+import { useNeynarContext } from "../../contexts";
 import { useAuth } from "../../contexts/AuthContextProvider";
 import { useLocalStorage } from "../../hooks";
 import { ToastType } from "../Toast";
@@ -80,23 +80,15 @@ export const NeynarAuthButton: React.FC<ButtonProps> = ({
   children,
   ...rest
 }) => {
-  const { client_id, showToast } = useNeynar();
-  const { setIsAuthenticated, isAuthenticated } = useAuth();
+  const { client_id, showToast, user } = useNeynarContext();
+  const { setIsAuthenticated, isAuthenticated, setUser } = useAuth();
   const [
-    neynarAuthenticatedUser,
+    _,
     setNeynarAuthenticatedUser,
     removeNeynarAuthenticatedUser,
   ] = useLocalStorage<INeynarAuthenticatedUser>("neynar_authenticated_user");
-  const [user, setUser] = useState<INeynarAuthenticatedUser | null>(null);
   const [showModal, setShowModal] = useState(false);
 
-  useEffect(() => {
-    if (neynarAuthenticatedUser) {
-      setUser(neynarAuthenticatedUser);
-      setIsAuthenticated(true);
-    }
-  }, [neynarAuthenticatedUser]);
-
   // Using useRef to store the authWindow reference
   const authWindowRef = useRef<Window | null>(null);
   const neynarLoginUrl = `${process.env.NEYNAR_LOGIN_URL ?? "https://app.neynar.com/login"}?client_id=${client_id}`;
@@ -149,6 +141,7 @@ export const NeynarAuthButton: React.FC<ButtonProps> = ({
           pfp_url: user.pfp_url,
         };
         setNeynarAuthenticatedUser(_user);
+        setUser(_user);
       }
     },
     [client_id, setIsAuthenticated]

src/contexts/AuthContextProvider.tsx

@@ -6,33 +6,56 @@ import React, {
   useMemo,
   useEffect,
 } from "react";
-import { SetState } from "../types/common";
+import { INeynarAuthenticatedUser, SetState } from "../types/common";
+import { useLocalStorage } from "../hooks";
 
 interface IAuthContext {
   isAuthenticated: boolean;
   setIsAuthenticated: SetState<boolean>;
+  user: INeynarAuthenticatedUser | null;
+  setUser: SetState<INeynarAuthenticatedUser | null>;
 }
 
 const AuthContext = createContext<IAuthContext | undefined>(undefined);
 
 export interface AuthContextProviderProps {
   children: ReactNode;
   _setIsAuthenticated: (_isAuthenticated: boolean) => void;
+  _setUser: (_user: INeynarAuthenticatedUser | null) => void;
 }
 
 export const AuthContextProvider: React.FC<AuthContextProviderProps> = ({
   children,
   _setIsAuthenticated,
+  _setUser,
 }) => {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [user, setUser] = useState<INeynarAuthenticatedUser | null>(null);
+  const [neynarAuthenticatedUser] = useLocalStorage<INeynarAuthenticatedUser>(
+    "neynar_authenticated_user"
+  );
 
   useEffect(() => {
     _setIsAuthenticated(isAuthenticated);
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    if (neynarAuthenticatedUser) {
+      setUser(neynarAuthenticatedUser);
+      setIsAuthenticated(true);
+    } else {
+      setUser(null);
+      setIsAuthenticated(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    _setUser(user);
+  }, [user]);
+
   const value = useMemo(
-    () => ({ isAuthenticated, setIsAuthenticated }),
-    [isAuthenticated]
+    () => ({ isAuthenticated, user, setIsAuthenticated, setUser }),
+    [isAuthenticated, user]
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

src/contexts/NeynarContextProvider.tsx

@@ -7,7 +7,7 @@ import React, {
   useEffect,
 } from "react";
 import { Theme } from "../enums";
-import { SetState } from "../types/common";
+import { INeynarAuthenticatedUser, SetState } from "../types/common";
 import { AuthContextProvider } from "./AuthContextProvider";
 import { ToastContainer, ToastItem, ToastType } from "../components/Toast";
 
@@ -17,6 +17,7 @@ interface INeynarContext {
   setTheme: SetState<Theme>;
   isAuthenticated: boolean;
   showToast: (type: ToastType, message: string) => void;
+  user: INeynarAuthenticatedUser | null;
 }
 
 const NeynarContext = createContext<INeynarContext | undefined>(undefined);
@@ -36,6 +37,9 @@ export const NeynarContextProvider: React.FC<NeynarContextProviderProps> = ({
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [theme, setTheme] = useState<Theme>(defaultTheme);
   const [toasts, setToasts] = useState<{ type: string; message: string }[]>([]);
+  const [user, setUser] = useState<INeynarAuthenticatedUser | null>(null);
+
+
 
   const showToast = (type: ToastType, message: string) => {
     const newToast = { type, message };
@@ -63,17 +67,21 @@ export const NeynarContextProvider: React.FC<NeynarContextProviderProps> = ({
   }, [theme]);
 
   const value = useMemo(
-    () => ({ client_id, theme, isAuthenticated, setTheme, showToast }),
+    () => ({ client_id, theme, isAuthenticated, user, setTheme, showToast }),
     [client_id, theme, isAuthenticated]
   );
 
   const _setIsAuthenticated = (_isAuthenticated: boolean) => {
     setIsAuthenticated(_isAuthenticated);
   };
 
+  const _setUser = (_user: INeynarAuthenticatedUser | null) => {
+    setUser(_user);
+  };
+
   return (
     <NeynarContext.Provider value={value}>
-      <AuthContextProvider {...{ _setIsAuthenticated }}>
+      <AuthContextProvider {...{ _setIsAuthenticated, _setUser }}>
         {children}
         <ToastContainer>
           {toasts.map((toast, index) => (
@@ -87,10 +95,12 @@ export const NeynarContextProvider: React.FC<NeynarContextProviderProps> = ({
   );
 };
 
-export const useNeynar = () => {
+export const useNeynarContext = () => {
   const context = useContext(NeynarContext);
   if (!context) {
-    throw new Error("useNeynar must be used within a NeynarContextProvider");
+    throw new Error(
+      "useNeynarContext must be used within a NeynarContextProvider"
+    );
   }
   return context;
 };

src/contexts/index.tsx

@@ -1 +1,4 @@
-export { NeynarContextProvider, useNeynar } from "./NeynarContextProvider";
+export {
+  NeynarContextProvider,
+  useNeynarContext,
+} from "./NeynarContextProvider";