profile ModuleThe profile module displays provides ability to modify user information.
profile/
├── components/
│ └── profileCard.tsx
├── pages/
│ └── ProfilePage.tsx
└── services/
└── profileApi.ts
cors_layer middleware in back end which restricts the ability to load resources to specified originscsrf_layer middleware in back end which protects against malicious requests by associating a unique random token for every form in a given sessionProfileCard.tsxCard that presents all relevant user information and can be used to link back to profile page from any other page on the site when authenticated.
ProfilePage.tsxtoken state changeimport { useEffect, useState } from "react";
import { useAuth } from "@/modules/auth/context/AuthContext";
import { getProfile } from "../services/profileApi";
import { fetchWithAuth } from "@/utils/fetchWithAuth";
useEffect: Accepts a function that contains imperative, possibly effectful code.useState Returns a stateful value, and a function to update it.useAuth: Provides context for authenticationgetProfile: Fetches profile informationfetchWithAuth: Provides authentication check while fetching informationconst { token, logout } = useAuth();
const [profile, setProfile] = useState<ProfileData | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const data = await getProfile(token);
const res = await fetchWithAuth(token, "/profile/me");
pages/ProfilePage.tsx{ token, logout }: Contains value of the token if provided and removes the token's value on logout[profile, setProfile]: Contains user's profile data if it is able to be retrieved[error, setError]: Tracks errors to display error information to user[loading, setLoading]: Tracks the loading state of the page to be displayed to the userdata: Holds token when retrievedservices/profileApi.tsres: Fetches token from user's profile with authenticationpages/ProfilePage.tsxinterface ProfileData {
id: string;
name: string;
email: string;
}
pages/ProfilePage.tsxProfilePage()
loadProfile()
services/profileApi.tsgetProfile()
/profile/me, returns json string of tokentoken: stringcomponents/profileCard.tsx is empty