extended-yellow
extended-yellow7mo ago

Unexpected end of JSON input

check: async () => {
const user: IUser = JSON.parse(localStorage.getItem(ELocalStorage.USER) || "");

const { role, status } = user;

if (user) {
if (role === ERole.Admin || (role === ERole.User && status === EStatus.ACTIVE)) {
return {
authenticated: true,
redirectTo: "/data",
};
}

if (role === ERole.User && status === EStatus.PENDING) {
return {
authenticated: false,
redirectTo: "/pending",
};
}
}
return {
authenticated: false,
error: {
message: "User not found",
name: "Check failed",
},
redirectTo: "/login",
logout: true,
};
},
check: async () => {
const user: IUser = JSON.parse(localStorage.getItem(ELocalStorage.USER) || "");

const { role, status } = user;

if (user) {
if (role === ERole.Admin || (role === ERole.User && status === EStatus.ACTIVE)) {
return {
authenticated: true,
redirectTo: "/data",
};
}

if (role === ERole.User && status === EStatus.PENDING) {
return {
authenticated: false,
redirectTo: "/pending",
};
}
}
return {
authenticated: false,
error: {
message: "User not found",
name: "Check failed",
},
redirectTo: "/login",
logout: true,
};
},
Browser console show SyntaxError: Unexpected end of JSON input also redirectTo: "/pending" not working
2 Replies
kapa.ai
kapa.ai7mo ago
Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error "Unexpected end of JSON input" typically occurs when JSON.parse() is called with an empty string. In your check method, you're trying to parse a user object from local storage. If the user object doesn't exist in local storage, localStorage.getItem(ELocalStorage.USER) will return null, and JSON.parse() will be called with an empty string, which is not valid JSON. To fix this, you should check if the user object exists in local storage before trying to parse it:
check: async () => {
const userItem = localStorage.getItem(ELocalStorage.USER);
if (!userItem) {
return {
authenticated: false,
error: {
message: "User not found",
name: "Check failed",
},
redirectTo: "/login",
logout: true,
};
}

const user: IUser = JSON.parse(userItem);
// rest of your code...
},
check: async () => {
const userItem = localStorage.getItem(ELocalStorage.USER);
if (!userItem) {
return {
authenticated: false,
error: {
message: "User not found",
name: "Check failed",
},
redirectTo: "/login",
logout: true,
};
}

const user: IUser = JSON.parse(userItem);
// rest of your code...
},
As for the issue with redirectTo: "/pending" not working, it's hard to say without more context. However, one common issue could be that the route "/pending" is not properly defined in your application. Make sure that you have a route for "/pending" in your routing configuration. Also, ensure that you're using the <Authenticated> component from refine to handle authenticated routes. This component checks if the user is authenticated using the useIsAuthenticated hook and handles redirection or showing the appropriate elements based on the authentication status (source (https://discord.com/channels/837692625737613362/1110516360196395048)). If you want to redirect the user to a specific page, you can resolve the Promise with an object that has redirectTo property (source (https://refine.dev/docs/api-reference/core/providers/auth-provider/)). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai7mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below