Welcome, How to Store JWT Token in Local Storage using Context API for Authentication in MERN STACK in Hindi
Here we will create our brand new store using context api in react
import { createContext, useContext } from "react";
export const AuthContext = createContext();
// eslint-disable-next-line react/prop-types
export const AuthProvider = ({ children }) => {
//function to stored the token in local storage
const storeTokenInLS = (serverToken) => {
return localStorage.setItem("token", serverToken);
};
return (
<AuthContext.Provider value={{ storeTokenInLS }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
const authContextValue = useContext(AuthContext);
if (!authContextValue) {
throw new Error("useAuth used outside of the Provider");
}
return authContextValue;
};Also dont forget to add the provider component in our main app.jsx file
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { AuthProvider } from "./store/auth.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<AuthProvider>
<App />
</AuthProvider>
);