Rongtuli প্রোজেক্টে JWT (JSON Web Token) ইমপ্লিমেন্টেশন

{
  "user": {
    "id": "a9f2813e-a0a3-4ae0-80a1-570f3d5fbd23",
    "firstName": "Mojnu",
    "lastName": "Miah",
    "avatar": null,
    "email": "thisismojnu@gmail.com"
  },
  "token": {
    "token": "access_token_value",
    "refreshToken": "refresh_token_value"
  }
}

const submitForm = async (formData) => {
  try {
    const response = await axios.post(
      `${import.meta.env.VITE_SERVER_BASE_URL}/auth/login`,
      formData
    );
 
    if (response.status === 200) {
      const { user, token } = response.data;
      const { token: authToken, refreshToken } = token;
 
      setAuth({ user, authToken, refreshToken }); // স্টেটে সংরক্ষণ
      navigate("/");
    }
  } catch (error) {
    setError("root.random", { message: error.message });
  }
};

VITE_SERVER_BASE_URL=http://localhost:3000

import axios from "axios";
 
const api = axios.create({
  baseURL: import.meta.env.VITE_SERVER_BASE_URL,
});
 
export default api;

import { useEffect } from "react";
import api from "../api";
import useAuth from "./useAuth";
 
const useAxios = () => {
  const { auth, setAuth } = useAuth();
 
  useEffect(() => {
    const requestIntercept = api.interceptors.request.use(
      (config) => {
        const authToken = auth?.authToken;
        if (authToken) {
          config.headers.Authorization = `Bearer ${authToken}`;
        }
        return config;
      },
      (error) => Promise.reject(error)
    );
 
    const responseIntercept = api.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config;
 
        if (error.response?.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
 
          try {
            const response = await api.post("/auth/refresh-token", {
              refreshToken: auth?.refreshToken,
            });
 
            const { token } = response.data;
            setAuth({ ...auth, authToken: token });
 
            originalRequest.headers.Authorization = `Bearer ${token}`;
            return api(originalRequest);
          } catch (err) {
            return Promise.reject(err);
          }
        }
        return Promise.reject(error);
      }
    );
 
    return () => {
      api.interceptors.request.eject(requestIntercept);
      api.interceptors.response.eject(responseIntercept);
    };
  }, [auth]);
 
  return { api };
};
 
export default useAxios;

import { useEffect, useState } from "react";
import useAuth from "../hooks/useAuth";
import useAxios from "../hooks/useAxios";
 
export default function ProfilePage() {
  const { auth } = useAuth();
  console.log(auth);
 
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  const { api } = useAxios();
 
  useEffect(() => {
    const fetchProfile = async () => {
      try {
        const response = await api.get(
          `${import.meta.env.VITE_SERVER_BASE_URL}/profile/${auth?.user?.id}`
        );
        setUser(response?.data?.user);
        setPosts(response?.data?.posts);
      } catch (error) {
        setError("Error fetching profile:", error.message);
        console.log(error.message);
      } finally {
        setLoading(false);
      }
    };
 
    fetchProfile();
  }, []);
 
  if (loading) {
    return <div>fetching profile data...</div>;
  }
  return (
    <div>
      <p>{error && user === null ? "Error when fetching profile" : null}</p>
      <h1>Welcome, {user?.firstName + " " + user?.lastName}</h1>
      <p>You have {posts?.length} post</p>
    </div>
  );
}