Is this enough protection in the frontend?

Im currently working on auth in a mern stack project. I built a backend API which validates the JWT which the user has when trying to render a site.

Ill show some detailed infos here in “Pseudocode”:

AS SAID BEFORE THATS NOT THE REAL SYnTAX JUST THAT YOU CAN UNDERSTAND WHAT I WANT TO ACHIEVE

Backend:
server(/auth){
validateJWT
res.json("Success")
on error res.json("Unauthorized")
}

Frontend:
Useeffect({
req.server("/auth")
if(response === "Success"){
render Page
}
else{
redirect to login
}
})

So may approach was that i use the useEffect hook of react to check if the user has a valid JWT and then render the page if so and if it isn’t valid. My problem here is that i want to make sure and understand if this is save. Are there ways to edit the js files and reload the component with the edited js files? For example lets say someone doesnt have a JWT and just edits the code as followed:

Useeffect({
req.server("/auth")
if(response === "Unauthorized"){
render Page
}
else{
redirect to login
}

will this theoratically work? and if so how is it even possible to protect the frontend admin dashboard for example?