I have integrated Stripe for users to purchase premium subscriptions, but I am facing an issue with storing their premium status in Redux Persist State. After they log out, the state refreshes and upon logging back in, they are required to purchase a premium subscription again.
While I attempted to resolve this by using Redux Persist to save it in local storage, the problem persists as the premium status gets reset once the user logs out.
import { useEffect, useState } from "react";
import { getAuth, onIdTokenChanged } from "firebase/auth";
import { auth } from "../firebase";
import { useDispatch, useSelector } from "react-redux";
import { setPremiumStatus } from "@/redux/userSlice";
export default function usePremiumStatus(user) {
const dispatch = useDispatch();
const premiumStatus = useSelector((state) => state.user.premium);
useEffect(
() => {
return onIdTokenChanged(auth, async (user) => {
if (user) {
const tokenResult = await user.getIdTokenResult();
dispatch(
setPremiumStatus(tokenResult.claims.stripeRole === "premium")
);
} else {
dispatch(setPremiumStatus(false));
}
});
},
[user],
dispatch
);
return premiumStatus;
}
The code snippet above demonstrates how I handle setting the premium status. Initially, it is set to "false", however, the dispatch function changes it to true. I am looking for a way to link the premium status to the user specifically. How can I achieve this?