Amplify Hub.listen immediately calls signOut after signIn when user put in React Context - react-native

Question

I'm having an issue implementing SSO with AWS Amplify into my React Native app. I have SSO working fine, however, when trying to put the cognito user object in my authentication context, Hub.listen calls a signout and the user is immediately signed out.
Here is my code where user is signed up:
SignUp.js
...
useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
console.log("event", event);
console.log("data", data);
switch (event) {
case "signIn":
console.log("data from signup: ",data)
setUserInContext(data);
break;
case "signOut":
setUserInContext(null);
break;
case "customOAuthState":
setCustomState(data);
}
})
return unsubscribe;
}, []);
...
return (
...
<Button
onPress={() => Auth.federatedSignIn({provider: "Google"})}
>
Google
</Button>
...
)
This code properly opens the google consent screen and allows me to select a user to login with. In fact, if I don't send the returned user object from the to the context like setUserInContext(data) in the above code, I get the user and everything works. However, sending this data to my context seems to cause Hub.listen to detect or invoke the oauth signout, even if I add something like this:
...
const [authUser,setAuthUser] = useState(null)
useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
console.log("event", event);
console.log("data", data);
switch (event) {
case "signIn":
console.log("data from signup: ",data)
setAuthUser(data);
break;
case "signOut":
setAuthUser(null);
break;
case "customOAuthState":
setCustomState(data);
}
})
return unsubscribe;
}, []);
useEffect(() => {
if (authUser) {
console.log("authuser activated")
loginWithGoogle(authUser)
}
},[authUser])
...
return (
...
<Button
onPress={() => Auth.federatedSignIn({provider: "Google"})}
>
Google
</Button>
...
)
Below is my code for my authentication context:
export const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
Auth.currentAuthenticatedUser()
.then(user => {
//fetchUserData(user).catch(err => console.error(err));
console.log("currentauthenticateduser: ",user)
setUser(user);
})
.catch((err) => {
console.log("no user found: ",user,"\nerr: ",err)
setUser(null)
});
},[]);
const login = (usernameOrEmail, password) =>
Auth.signIn(usernameOrEmail, password)
.then(cognitoUser => {
setUser(cognitoUser);
return cognitoUser;
})
.catch((err) => {
if (err.code === 'UserNotFoundException') {
err.message = 'Invalid username or password';
}
throw err;
}
);
const loginWithGoogle = (cognitoUser) => {
console.log("setting user: ",cognitoUser)
setUser(cognitoUser)
}
const logout = () =>
console.log("logout called")
Auth.signOut()
.then(data => {
setUser(null);
return data;
}
);
const deleteUser = async () => {
try {
const result = await Auth.deleteUser();
console.log(result);
} catch (err) {
console.log("Error deleting user", err);
} finally {
setUser(null);
}
}
const values = useMemo(() => ({
user,
loginWithGoogle,
login,
logout,
deleteUser
}), [user]);
return (
<UserContext.Provider value={values}>{children}</UserContext.Provider>
)
}
export const useUser = () => {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('`useUser` must be within a `UserProvider` component');
}
return context;
};
Please send help