Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR extracts inline auto-login logic into a reusable useAutoLogin hook and updates the LoginPage to consume it for cleaner separation of concerns.
- Introduces
useAutoLoginhook to centralize cookie parsing and user fetching - Refactors
pages/login.jsto remove inline effect and use the new hook - Cleans up JSX by removing the stray hook call at render
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| hooks/useAutoLogin.js | New hook implementing auto-login logic from cookies and API call |
| pages/login.js | Refactored to call useAutoLogin and simplified login/logout UI |
Comments suppressed due to low confidence (1)
hooks/useAutoLogin.js:4
- Add unit tests for
useAutoLoginto verify behavior when the cookie is absent, malformed, or contains a valid token.
export default function useAutoLogin() {
| const parsedData = JSON.parse( | ||
| decodeURIComponent(userCookie.split('=')[1]) | ||
| ); | ||
| setUserData(parsedData); |
There was a problem hiding this comment.
Wrap the JSON.parse call in a try/catch to prevent crashes if the user_data cookie is malformed or missing.
| const parsedData = JSON.parse( | |
| decodeURIComponent(userCookie.split('=')[1]) | |
| ); | |
| setUserData(parsedData); | |
| try { | |
| const parsedData = JSON.parse( | |
| decodeURIComponent(userCookie.split('=')[1]) | |
| ); | |
| setUserData(parsedData); | |
| } catch (error) { | |
| console.error('Failed to parse user_data cookie:', error); | |
| } |
| const [user, setUser] = useState(null); | ||
| const [userData, setUserData] = useState(null); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
Consider adding a cleanup handler or an isMounted flag to prevent setting state after the component unmounts during the async getCurrentUser call.
| useEffect(() => { | |
| useEffect(() => { | |
| let isMounted = true; // Flag to track component mount state |
|
|
||
| export default function LoginPage() { | ||
| const [ user, setUser ] = useState(null); | ||
| const [ userData, setUserData ] = useState(null); | ||
| const useAutoLogin = () => { | ||
| useEffect(() => { | ||
| // if only token is in cookie and no user data | ||
| // const token = document.cookie | ||
| // .split('; ') | ||
| // .find((row) => row.startsWith('token=')) | ||
| // ?.split('=')[1]; | ||
| const { user, userData } = useAutoLogin(); | ||
|
|
||
| const cookies = document.cookie.split('; '); | ||
| const userCookie = cookies.find((cookie) => cookie.startsWith('user_data=')); | ||
| const logout = () => { | ||
| document.cookie = 'user_data=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; | ||
| window.location.reload(); |
There was a problem hiding this comment.
[nitpick] Rather than using window.location.reload(), consider updating the React state or using Next.js router navigation to handle logout more gracefully.
Summary
useAutoLogincustom hookLoginPageTesting
npm run lint(fails: Invalid next.config.ts options)https://chatgpt.com/codex/tasks/task_e_686360fa4ec48328842e6e04f14768e1