How can I implement authentication in a TypeScript React app using React Router?

How can I implement authentication in a TypeScript React app using React Router?

You can implement authentication by using React Router for routing and context or state management for user authentication. Would you like a code example?

Yes, please provide a code example for a simple login flow.

Sure! First, set up your routes with React Router. Then, create a context for authentication. Here's a basic example:

import React, { createContext, useContext, useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const AuthContext = createContext(null);

const AuthProvider = ({ children }) => {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const login = () => setIsAuthenticated(true);
    const logout = () => setIsAuthenticated(false);
    return (
        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
};

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { isAuthenticated } = useContext(AuthContext);
    return (
        <Route {...rest} render={props =>
            isAuthenticated ? <Component {...props} /> : <Redirect to='/' />
        } />
    );
};

// Usage in your app
<Router>
    <AuthProvider>
        <Route path='/' exact component={Home} />
        <PrivateRoute path='/dashboard' component={Dashboard} />
    </AuthProvider>
</Router>

This sets up a basic authentication context and a private route.

What about handling user sessions and token storage?

For user sessions, you can store the authentication token in localStorage or sessionStorage. When the user logs in, save the token and check for it on app load to determine if the user is authenticated. Here's how you can modify the login function:

const login = (token) => {
    localStorage.setItem('authToken', token);
    setIsAuthenticated(true);
};

const logout = () => {
    localStorage.removeItem('authToken');
    setIsAuthenticated(false);
};

useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) setIsAuthenticated(true);
}, []);

This way, your app can persist the user's authentication state.