tweak
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { createContext, useReducer, useContext, useEffect } from "react";
|
import { createContext, useReducer, useContext, useEffect, useCallback, useRef } from "react";
|
||||||
import authReducer, { initialState, ACTION_TYPES } from "../reducers/authReducer";
|
import authReducer, { initialState, ACTION_TYPES } from "../reducers/authReducer";
|
||||||
import { loginUser, registerAfterCheckout } from "../api/auth";
|
import { loginUser, registerAfterCheckout } from "../api/auth";
|
||||||
import { getAccount } from "../api/account";
|
import { getAccount } from "../api/account";
|
||||||
@@ -7,58 +7,79 @@ const AuthContext = createContext(null);
|
|||||||
|
|
||||||
export function AuthProvider({ children }) {
|
export function AuthProvider({ children }) {
|
||||||
const [state, dispatch] = useReducer(authReducer, initialState);
|
const [state, dispatch] = useReducer(authReducer, initialState);
|
||||||
|
const fetchedRef = useRef(false);
|
||||||
|
|
||||||
// On mount, if we have a token in localStorage, hydrate the user object
|
const fetchAccount = useCallback(async () => {
|
||||||
// by fetching the account from the backend.
|
try {
|
||||||
useEffect(() => {
|
const account = await getAccount();
|
||||||
if (!state.token || state.user) return;
|
dispatch({
|
||||||
|
type: ACTION_TYPES.SET_USER,
|
||||||
getAccount()
|
payload: {
|
||||||
.then((account) => {
|
id: account.user_id,
|
||||||
dispatch({
|
email: account.email,
|
||||||
type: ACTION_TYPES.SET_USER,
|
subscriptionStatus: account.subscription_status,
|
||||||
payload: {
|
subscriptionTier: account.subscription_tier,
|
||||||
id: account.user_id,
|
tierLimits: account.tier_limits,
|
||||||
email: account.email,
|
addressCount: account.address_count,
|
||||||
subscriptionStatus: account.subscription_status,
|
},
|
||||||
subscriptionTier: account.subscription_tier,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
dispatch({ type: ACTION_TYPES.LOGOUT });
|
|
||||||
});
|
});
|
||||||
}, [state.token, state.user]);
|
} catch {
|
||||||
|
dispatch({ type: ACTION_TYPES.LOGOUT });
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// On mount, if we have a token in localStorage, hydrate user from backend.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!state.token || fetchedRef.current) return;
|
||||||
|
fetchedRef.current = true;
|
||||||
|
fetchAccount();
|
||||||
|
}, [state.token, fetchAccount]);
|
||||||
|
|
||||||
async function login(email, password) {
|
async function login(email, password) {
|
||||||
const data = await loginUser(email, password);
|
const data = await loginUser(email, password);
|
||||||
dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
|
dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
|
||||||
|
fetchedRef.current = false;
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function register(email, password, sessionId) {
|
async function register(email, password, sessionId) {
|
||||||
const data = await registerAfterCheckout(email, password, sessionId);
|
const data = await registerAfterCheckout(email, password, sessionId);
|
||||||
dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
|
dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
|
||||||
|
fetchedRef.current = false;
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
function logout() {
|
function logout() {
|
||||||
|
fetchedRef.current = false;
|
||||||
dispatch({ type: ACTION_TYPES.LOGOUT });
|
dispatch({ type: ACTION_TYPES.LOGOUT });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function refreshAccount() {
|
||||||
|
fetchAccount();
|
||||||
|
}
|
||||||
|
|
||||||
const isAuthenticated = state.isAuthenticated && !!state.token;
|
const isAuthenticated = state.isAuthenticated && !!state.token;
|
||||||
const isSubscribed =
|
const isSubscribed =
|
||||||
state.user?.subscriptionStatus === "active" ||
|
state.user?.subscriptionStatus === "active" ||
|
||||||
state.user?.subscriptionStatus === "trialing";
|
state.user?.subscriptionStatus === "trialing";
|
||||||
|
|
||||||
|
const tierLimits = state.user?.tierLimits || {
|
||||||
|
max_addresses: 1,
|
||||||
|
max_alert_types: 1,
|
||||||
|
allowed_channels: ["email"],
|
||||||
|
};
|
||||||
|
|
||||||
const value = {
|
const value = {
|
||||||
user: state.user,
|
user: state.user,
|
||||||
token: state.token,
|
token: state.token,
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
isSubscribed,
|
isSubscribed,
|
||||||
|
tierLimits,
|
||||||
|
userTier: state.user?.subscriptionTier || "free",
|
||||||
login,
|
login,
|
||||||
register,
|
register,
|
||||||
logout,
|
logout,
|
||||||
|
refreshAccount,
|
||||||
dispatch,
|
dispatch,
|
||||||
ACTION_TYPES,
|
ACTION_TYPES,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||||
import { useAuth } from "../../contexts/AuthContext";
|
import { useAuth } from "../../contexts/AuthContext";
|
||||||
import { createOnboardingCheckout, activateFreeTier } from "../../api/stripe";
|
import { createOnboardingCheckout, activateFreeTier } from "../../api/stripe";
|
||||||
@@ -26,12 +26,17 @@ export default function Subscribe() {
|
|||||||
confirmPassword: "",
|
confirmPassword: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const registerCalledRef = useRef(false);
|
||||||
|
|
||||||
function set(field, value) {
|
function set(field, value) {
|
||||||
setData((prev) => ({ ...prev, [field]: value }));
|
setData((prev) => ({ ...prev, [field]: value }));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle return from Stripe checkout redirect
|
// Handle return from Stripe checkout redirect.
|
||||||
|
// The ref guard prevents React StrictMode from double-firing this.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (registerCalledRef.current) return;
|
||||||
|
|
||||||
const payment = searchParams.get("payment");
|
const payment = searchParams.get("payment");
|
||||||
const sessionId = searchParams.get("session_id");
|
const sessionId = searchParams.get("session_id");
|
||||||
|
|
||||||
@@ -44,7 +49,6 @@ export default function Subscribe() {
|
|||||||
|
|
||||||
if (payment !== "success" || !sessionId) return;
|
if (payment !== "success" || !sessionId) return;
|
||||||
|
|
||||||
// Recover credentials stashed before the Stripe redirect
|
|
||||||
const savedEmail = sessionStorage.getItem("kp_onboard_email");
|
const savedEmail = sessionStorage.getItem("kp_onboard_email");
|
||||||
const savedPassword = sessionStorage.getItem("kp_onboard_password");
|
const savedPassword = sessionStorage.getItem("kp_onboard_password");
|
||||||
|
|
||||||
@@ -56,6 +60,7 @@ export default function Subscribe() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
registerCalledRef.current = true;
|
||||||
setSearchParams({}, { replace: true });
|
setSearchParams({}, { replace: true });
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
@@ -66,6 +71,7 @@ export default function Subscribe() {
|
|||||||
navigate("/addresses", { replace: true });
|
navigate("/addresses", { replace: true });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
|
registerCalledRef.current = false;
|
||||||
setError("Registration failed: " + err.message);
|
setError("Registration failed: " + err.message);
|
||||||
setStep(1);
|
setStep(1);
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user