How can I implement authentication in my React app using hooks?

How can I implement authentication in my React app using hooks?

You can use the useContext and useReducer hooks to manage authentication state. Would you like a code example?

Yes, please provide a code example!

Here's a simple example:

import React, { createContext, useContext, useReducer } from 'react';

const AuthContext = createContext();

const authReducer = (state, action) => {
    switch (action.type) {
        case 'LOGIN':
            return { ...state, user: action.payload, isAuthenticated: true };
        case 'LOGOUT':
            return { ...state, user: null, isAuthenticated: false };
        default:
            return state;
    }
};

export const AuthProvider = ({ children }) => {
    const [state, dispatch] = useReducer(authReducer, { user: null, isAuthenticated: false });
    return (
        <AuthContext.Provider value={{ state, dispatch }}>
            {children}
        </AuthContext.Provider>
    );
};

export const useAuth = () => useContext(AuthContext);

This sets up a context for authentication. You can then use useAuth in your components.

How do I use this context in my components?

You can use the useAuth hook in any component to access the authentication state and dispatch actions. For example:

import React from 'react';
import { useAuth } from './AuthProvider';

const LoginButton = () => {
    const { dispatch } = useAuth();
    const handleLogin = () => {
        dispatch({ type: 'LOGIN', payload: { username: 'user' } });
    };
    return <button onClick={handleLogin}>Login</button>;
};