To store user information and token after successful login, we need a global store which is accessible for all pages. We can use React context for that.
// src/context/auth.js
import { useState, createContext, useContext } from "react";
const AuthContext = createContext();
const AuthProvider = ({ children }) => {
const [auth, setAuth] = useState({
user: null,
token: "",
refreshToken: "",
});
return (
<AuthContext.Provider value={[auth, setAuth]}>
{children}
</AuthContext.Provider>
);
};
const useAuth = () => useContext(AuthContext); // [auth, setAuth]
export { useAuth, AuthProvider }; // wrap the app with provider
Now wrap entire app with AuthProvider
// App.js
import { AuthProvider } from "./context/auth";
export default function App() {
return (
<BrowserRouter>
<AuthProvider>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
</AuthProvider>
</BrowserRouter>
);
}
Now try accessing context state in Home page
// Home.js
import { useAuth } from "../context/auth";
export default function Home() {
// context
const [auth, setAuth] = useAuth();
return (
<div>
<h1 className="display-1 bg-primary text-light p-5">Home</h1>
<pre>{JSON.stringify(auth, null, 4)}</pre>
</div>
);
}