Formik setting errors on submission - reactjs

Question

I have 2 questions
I am trying to handle a submission in Formik. I would like to handle the authentication in my backend and then depending on what my backend returns, set an error "Invalid email/password combo" or redirect to a new page (let's say index). Here is the code handling the submission:
handleSubmit(
{email, password}: LoginFormValues,
{props, setSubmitting, setErrors}
){
fetch(backendURL, {
method: "POST",
body: JSON.stringify({username: email, password: password}),
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if(data.token) {
localStorage.setItem("token", data.token)
props.history.push("/")
}else{
//TODO
}
});
}
If the response contains a token then I'll redirect to index however if doesn't then I'd like to display some errors. Is there a way I can do this with Formik or do I need to redirect to the page that contains my form and print an error message there? (If so, how would I do that anyway because I cannot return <Redirect /> (I have to use history.push(...) right?
I am aware that most of the times when you submit a form (and get redirected to a new page), if you try to navigate backwards it'll say something along the lines of "form needs to be resubmitted". However, when I go back in my application it simply renders the form again. Is that something I should be worried about? (What is the motivation in the first place?)

Answer 1

You can handle authentication failure easily with Formik without having to redirect. Following is an example.
handleSubmit(
{email, password}: LoginFormValues,
{props, setSubmitting, setFieldError}
){
fetch(backendURL, {
method: "POST",
body: JSON.stringify({username: email, password: password}),
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
if(data.token) {
localStorage.setItem("token", data.token)
props.history.push("/")
}else{
setFieldError("authentication", "Authentication Failed!");
setSubmitting(false);
}
});
}
After this, the error message will be available in errors.authentication. You can replace authentication with whatever name you like because errors is an object. You can now display your error message this way.
{errors.authentication && <div>{errors.authentication}</div>}
You can also use setErrors instead of setFieldError but it will replace the entire error object with a new object.
As for your second question, you do not need to worry about it as long as you ensure no secret or private information is revealed on the form. You can also probably set up a boolean flag in your application to prevent user from seeing the form if the user has logged in by redirecting to a different page, but that is entirely up to you.