Closed coderoyalty closed 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 |
Closes #13
@coderabbitai review commit 03b89e8
@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!
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
ProtectedRoute
component to secure routes.useAuth
hook for managing authentication state.ScreenLoader
component for loading states.Enhancements
AuthForm
to manage query parameters and state more effectively.DashboardLayout
with a new header and logout functionality.MessageForm
with async submission and toast notifications.Bug Fixes
console.log
statements from the sidebar component.Performance Improvements
DashboardHome
.UI/UX Improvements
MessageCarousel
to handle and display messages more effectively.