vercel[bot]
commented
8 months ago The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated (UTC) |
|---|---|---|---|
| pseudonym | ✅ Ready (Inspect) | Visit Preview | Feb 16, 2024 4:50pm |
Closed coderoyalty closed 8 months ago
vercel[bot]
commented
8 months ago The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated (UTC) |
|---|---|---|---|
| pseudonym | ✅ Ready (Inspect) | Visit Preview | Feb 16, 2024 4:50pm |
coderoyalty
commented
8 months ago Closes #13
coderoyalty
commented
5 months ago @coderabbitai review commit 03b89e8
coderabbitai[bot]
commented
5 months ago @coderoyalty, I reviewed the commit abb118e which implements the authentication provider. Here are the key changes:
App Component Update:
AuthProvider to manage authentication state.
function App() {
return (
<>
<AuthProvider>
<Theme>
<BrowserRouter>
<Router />
</BrowserRouter>
</Theme>
</AuthProvider>
</>
);
}Axios Configuration:
withCredentials option.
import { config } from "@/utils/config";
import _axios from "axios";const axios = _axios.create({ baseURL: config.BACKEND_URL, withCredentials: true, });
export default axios;
AuthProvider Component:
AuthProvider to manage user authentication state and provide context.AuthObserver class to handle authentication-related events.
import axios from "@/api/axios";
import { AxiosError } from "axios";
import React from "react";export interface AuthContextType<T = any> { user: T; isLoggedIn: boolean; signin: (user: T) => void; signout: () => void; observer: AuthObserver; }
const AuthContext = React.createContext
interface IUser { id: string; email: string; }
export enum ObserverType { UNAUTHORIZED = "unauthorized", SERVER_ERROR = "server_error", }
class AuthObserver<T = string> { private observers: Map<T, VoidFunction[]> = new Map();
subscribe(eventType: T, callback: VoidFunction) { const callbacks = this.observers.get(eventType); if (!callbacks) { this.observers.set(eventType, [callback]); return; } if (callbacks.find((value) => value.name === callback.name)) { return; } callbacks.push(callback); }
async trigger(eventType: T) { const callbacks = this.observers.get(eventType); if (!callbacks) { return; } const promises = callbacks.map((callback) => callback()); await Promise.all(promises); } }
export const AuthProvider = ({ children }: { children: React.JSX.Element }) => { const [user, setUser] = React.useState<IUser | null>(null); const [isLoggedIn, setLoggedIn] = React.useState(false);
const observer = new AuthObserver
const signin = (user: any) => { setUser(user); setLoggedIn(true); };
const signout = () => { setLoggedIn(false); setUser(null); };
const value = { user, isLoggedIn, signin, signout, observer, };
axios.interceptors.response.use( (response) => { return response; }, function (error) { if (error instanceof AxiosError) { if (error.response?.status === 401) { observer.trigger(ObserverType.UNAUTHORIZED); } } else { console.error(error); } return Promise.reject(error); } );
return
export const useAuth = () => { const auth = React.useContext(AuthContext); return auth; };
Configuration File:
export const config = {
BACKEND_URL: import.meta.env.VITE_BACKEND_URL,
};The implementation looks solid, providing a comprehensive authentication context and handling unauthorized responses effectively. If you need any further adjustments or have specific questions, feel free to ask!
coderabbitai[bot]
commented
5 months ago This update introduces significant improvements to the application's authentication, user interface, and state management. Key additions include new dependencies for toast notifications, Axios for API calls, and loading spinners. The App component is refactored to support authentication context, and new components like ScreenLoader, ProtectedRoute, and toast notifications enhance user experience. Various components and hooks are updated to manage authentication, API interactions, and conditional rendering based on user state.
| File/Path | Change Summary |
|---|---|
app/package.json |
Added dependencies for @radix-ui/react-toast, axios, and react-spinners. |
app/src/App.tsx |
Refactored App component for authentication context, added AuthProvider, useAuth, and Toaster. |
app/src/api/axios.ts |
Introduced Axios instance configuration for backend API requests. |
app/src/components/ScreenLoader.tsx |
Added ScreenLoader component with loading spinner and optional info text. |
app/src/components/auth-form/... |
Updated auth-form, login-form, and signup-form for state management, API calls, and toast notifications. |
app/src/components/dashboard/... |
Updated home, layout, protected-route, route, and sidebar for authentication and user state handling. |
app/src/components/header/navlink.tsx |
Added useAuth hook to conditionally set navigation based on user authentication status. |
app/src/components/message-carousel.tsx |
Updated MessageCarousel to handle messages as objects with content and id properties. |
app/src/components/message/message-form.tsx |
Modified MessageForm for async submission with Axios and toast notifications. |
app/src/components/ui/toast.tsx |
Introduced components for customizable toast notifications. |
app/src/components/ui/toaster.tsx |
Added Toaster component to render toast notifications. |
app/src/components/ui/use-toast.ts |
Introduced custom toast notification system with useToast hook. |
app/src/contexts/auth.observer.ts |
Added AuthObserver class for managing event subscriptions and triggers. |
app/src/contexts/auth.tsx |
Introduced authentication context, AuthProvider, and useAuth hook for user state management. |
app/src/hooks/useLocalStorage.ts |
Added useLocalStorage hook for managing local storage operations. |
app/src/pages/AuthPage.tsx |
Updated to check for authenticated user and navigate to /dashboard if present. |
app/src/pages/message-page.tsx |
Enhanced to fetch user data, handle messaging restrictions, and display loading or error states. |
app/src/utils/config.ts |
Added config to store BACKEND_URL from environment variables. |
In code's embrace, the app did grow,
With toasts and loaders, a smoother flow.
Auth and Axios, hand in hand,
Bringing joy to every land.
🐇✨
A rabbit's touch, in every line,
Making sure the app's divine.
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Summary by CodeRabbit
New Features
ProtectedRoutecomponent to secure routes.useAuthhook for managing authentication state.ScreenLoadercomponent for loading states.Enhancements
AuthFormto manage query parameters and state more effectively.DashboardLayoutwith a new header and logout functionality.MessageFormwith async submission and toast notifications.Bug Fixes
console.logstatements from the sidebar component.Performance Improvements
DashboardHome.UI/UX Improvements
MessageCarouselto handle and display messages more effectively.