Implement refresh access token handling in frontend

[Madhawa97]

Is your feature request related to a problem? Please describe.

The current authentication system doesn't provide optimal security and user experience. Users may be logged out too frequently or stay logged in for too long, posing security risks.

Describe the solution you'd like

Enhance the frontend authentication system to use refresh and access tokens for improved security.

• [ ] Update the axios instance to include an interceptor for handling access tokens
• [ ] Implement secure storage of tokens (e.g., HttpOnly cookies for refresh tokens, memory for access tokens)
• [ ] Create a mechanism to refresh the access token when it expires
• [ ] Update the login function in LoginModal to handle both access and refresh tokens
• [ ] Modify the useProfile hook to use the new token system
• [ ] Update logout functionality to clear both tokens
• [ ] Implement error handling for token-related errors (e.g., expired refresh token)
• [ ] Ensure all authenticated API calls use the new token system

Describe alternatives you've considered

Additional context

• The current implementation uses cookies for authentication. We need to modify this to use both access and refresh tokens.
• Consider implementing a "silent refresh" mechanism to maintain user sessions across tab closes or short periods of inactivity.
• Ensure that the token refresh process is transparent to the user.
• Backend Issue