Crafting the post question page

To create pages that need users to be logged in, we need to create a separate folder with a dedicated guard layout component. A guard layout component is a piece of code that prevents unauthorized users from entering certain parts of the frontend. Without proper authorization and guard layouts, the backend functionality on certain pages will not be accessible, resulting in a poor user experience. So, inside the guard layout component, we check whether the user is logged in, and if they are not, we redirect them to the login form.

In this layout, we will try to redirect users to the exact page they want after the authentication process. We will put this layout inside src/pages/me/AuthGuard.tsx:

import { jwtToken } from '@/atoms';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import {
  Outlet,
  useLocation,
  useNavigate
} from 'react-router-dom';
const...