How to create and access a global state in react using context?

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>
  );
}