React authentication with private routes and context - reactjs

Question

I'm trying to add simple authentication to a React+Typescript app using private routes and context. I have a simple login component with a button that just sets a boolean var authenticated in the context to true. The private routes should check this var and redirect to the login component if it's not true otherwise show the specified component. The problem is authenticated seems to always be false and I'm always redirected to the login page.
When I debug it I can see the setAuthenticated function in AuthContextProvider is called when the login button is clicked. But if I then click any of the links to private routes authenticated is always false.
Here's my App.tsx:
function App() {
return (
<AuthContextProvider>
<Router>
<Link to="/">Home</Link>
<Link to="/projects">Projects</Link>
<div>
<Route path="/login" component={Login} />
<PrivateRoute path="/" exact component={Home} />
<PrivateRoute path="/projects" component={Projects} />
</div>
</Router>
</AuthContextProvider>
);
}
export default App;
PrivateRoute.tsx:
interface PrivateRouteProps extends RouteProps {
// tslint:disable-next-line:no-any
component: any;
}
const PrivateRoute = (props: PrivateRouteProps) => {
const { component: Component, ...rest } = props;
return (
<AuthContextConsumer>
{authContext => authContext && (
<Route {...rest}
render={ props =>
authContext.authenticated === true ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
)}
</AuthContextConsumer>
);
};
export default PrivateRoute;
AuthContext.tsx:
export interface AuthContextInterface {
authenticated: boolean,
setAuthenticated(newAuthState: boolean):void
}
const ctxt = React.createContext<AuthContextInterface>({
authenticated: false,
setAuthenticated: () => {}
});
export class AuthContextProvider extends React.Component {
setAuthenticated = (newAuthState:boolean) => {
this.setState({ authenticated: newAuthState });
};
state = {
authenticated: false,
setAuthenticated: this.setAuthenticated,
};
render() {
return (
<ctxt.Provider value={this.state}>
{this.props.children}
</ctxt.Provider>
);
}
}
export const AuthContextConsumer = ctxt.Consumer;
Login.tsx:
function Login() {
return (
<AuthContextConsumer>
{({ authenticated, setAuthenticated }) => (
<div>
<p>Login</p>
<form>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<button onClick={event => {
setAuthenticated(true);
}}>Login</button>
</form>
</div>
)}
</AuthContextConsumer>
);
}
export default Login;
My suspicious is that there's something wrong with the state definition in AuthContextProvider. If I change authenticatedin here to true I see the opposite behaviour, I never see the login page. Should this be something dynamic?

Answer 1

Or, in the onClick callback, set event.preventDefault() so it doesn't submit the form.

Answer 2

The problem turned out to be that the app was reloading every time the login button was pressed, and therefore lost the state in the AuthContext.
The reason for this is that in my Login component I had a button inside a form, which automatically submits the form and reloads the page.
The solution is to either remove the form tags, or in the button specify the attribute type="button".