Update user state

[MrMoussie]

Hello,

Is it possible to update the user (in useAuthUser) manually?

[Emanf92]

I'm not sure if this is the right way to do this, or if this should be done at all, but I achieved this by creating a new hook

import {useContext} from "react";
import AuthContext from "react-auth-kit/dist/AuthContext";
import {AuthKitError} from "react-auth-kit/dist/errors";
import {isAuthenticated} from "react-auth-kit/dist/utils/utils";
import {useSignIn} from "react-auth-kit";

export default function useEditAuthState() {
    const authContext = useContext(AuthContext);
    const signIn = useSignIn();

    if (authContext === null) {
        throw new AuthKitError('Auth Provider is missing. Please add the AuthProvider before Router');
    }

    return (newState) => {
        if (isAuthenticated(authContext.authState)) {
            const expiesIn = authContext.authState.auth.expiresAt - new Date();
            return signIn(
                {
                    token: authContext.authState.auth.token,
                    expiresIn: expiesIn / (60 * 1000),
                    tokenType: authContext.authState.auth.type,
                    // ... other parameters you might use in your signIn ...
                    authState: newState
                }
            )
        } else {
            return null;
        }
    }
}

Then use it like this:

export default function MyComponent() {
    const auth = useAuthUser();
    const editUserState = useEditAuthState();

    const changeUserStatus = (newUserStatus) => {
        editUserState(Object.assign({}, auth(), {status: newUserStatus}))
    }

    return <Something />
}

If you're using other parameters in your signIn you need to add them too, they should all be available inside authContext.authState

Hope this helps!