Merge pull request #55 from codersforcauses/issue-28-Setup_frontend_authentication_v2

Add files conected to auth, ready to pr

Author: pvkudr

client/package-lock.json

@@ -23,12 +23,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "is-inside-container": "^1.0.0",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.516.0",
     "next": "15.3.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@csstools/postcss-oklab-function": "^4.0.10",

client/package.json

@@ -0,0 +1,84 @@
+import axios from "axios";
+// import Cookies from "js-cookie";
+import { createContext, useContext, useEffect } from "react";
+
+import { useTokenStore } from "@/store/TokenStore";
+
+type AuthContextType = {
+  userId: string | null;
+  isLoggedIn: boolean;
+  login: (email: string, password: string) => Promise<boolean>;
+  logout: () => Promise<void>;
+};
+
+type TokenResponse = {
+  access: string;
+  refresh: string;
+};
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const accessToken = useTokenStore((state) => state.access);
+  const setTokens = useTokenStore((state) => state.setTokens);
+  const clearTokens = useTokenStore((state) => state.clear);
+
+  // id is generated automatically by DB.
+  const userId =
+    (accessToken?.decoded as { user_id?: string })?.user_id ?? null;
+  const isLoggedIn = userId !== null;
+
+  // Automatically set/remove a cookie when the access token changes
+  // This is used by NextJS middleware to determine if the user is able to access certain routes
+  // TODO: Currently role is always "PATICIPANT". Roles are here: server/event_registration/models.py.
+  // TODO: no interaction with roles so far
+
+  useEffect(() => {
+    // if (accessToken) {
+    //   Cookies.set("user_role", "user", { sameSite: "strict", secure: true });
+    // } else {
+    //   Cookies.remove("user_role");
+    // }
+  }, [accessToken]);
+
+  // LOG IN
+
+  const login = async (email: string, password: string) => {
+    try {
+      const result = await axios.post<TokenResponse>(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/token/`,
+        { email, password },
+        {
+          validateStatus: (status) =>
+            status === 200 || status === 401 || status === 400,
+        },
+      );
+
+      if (result.status !== 200 || !result.data) {
+        // Try to get error message from backend
+        const data = result.data as any;
+        const errorMsg = data?.detail || data?.error || "Invalid credentials";
+        return errorMsg;
+      }
+
+      setTokens(result.data.access, result.data.refresh);
+      return true;
+    } catch (err: any) {
+      // Network or unexpected error
+      return err?.response?.data?.detail || err?.message || "Network error";
+    }
+  };
+
+  // LOG OUT
+
+  const logout = async () => {
+    clearTokens();
+  };
+  const context = { userId, isLoggedIn, login, logout };
+
+  return (
+    <AuthContext.Provider value={context}>{children}</AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext)!;

client/src/context/auth-provider.tsx

@@ -0,0 +1,57 @@
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import { useAuth } from "@/context/auth-provider";
+import api from "@/lib/api";
+import { User } from "@/types/user";
+
+type RegistrationDetails = {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  branch: number;
+};
+
+export const useUser = () => {
+  const { userId } = useAuth();
+  return useQuery<User, AxiosError>({
+    queryKey: ["user", userId],
+    staleTime: 5 * 1000 * 60,
+    enabled: userId != null,
+    queryFn: () =>
+      api.get("users/me/").then((res) => {
+        return res.data;
+      }),
+  });
+};
+
+export const useRegister = (
+  args?: Omit<
+    UseMutationOptions<
+      unknown,
+      AxiosError<{ [key: string]: unknown }>,
+      RegistrationDetails
+    >,
+    "mutationKey" | "mutationFn"
+  >,
+) => {
+  return useMutation({
+    ...args,
+    mutationKey: ["register"],
+    mutationFn: (details: RegistrationDetails) => {
+      const correctDetails = {
+        first_name: details.firstName,
+        last_name: details.lastName,
+        city: details.branch,
+        ...details,
+      };
+      return api.post("users/register/", correctDetails);
+    },
+  });
+};

client/src/hooks/useUser.ts

@@ -1,5 +1,92 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
+
+import { useTokenStore } from "@/store/TokenStore";
 
 const api = axios.create({ baseURL: process.env.NEXT_PUBLIC_BACKEND_URL });
+api.interceptors.request.use(
+  async (config) => {
+    const accessToken = useTokenStore.getState().access;
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken.encoded}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+// Queue of failed request promises waiting for refreshed token
+let failedQueue: {
+  resolve: () => void;
+  reject: (_: AxiosError | null) => void;
+}[] = [];
+let isRefreshing = false;
+
+const processQueue = (error: AxiosError | null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve();
+    }
+  });
+  failedQueue = [];
+};
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const tokenState = useTokenStore.getState();
+    const originalRequest = error.config;
+
+    const handleError = (error: AxiosError | null) => {
+      processQueue(error);
+      tokenState.clear();
+      return Promise.reject(error);
+    };
+
+    const refreshTokenValid =
+      tokenState.refresh != undefined && tokenState.refresh.expiry > Date.now();
+    const isAuthError =
+      error.response?.status === 401 || error.response?.status === 403;
+
+    if (
+      refreshTokenValid == true &&
+      isAuthError &&
+      originalRequest.url !== "/auth/refresh/" &&
+      originalRequest._retry !== true
+    ) {
+      if (isRefreshing) {
+        return new Promise<void>(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then(() => api(originalRequest))
+          .catch((err) => Promise.reject(err));
+      }
+      isRefreshing = true;
+      originalRequest._retry = true;
+      return api
+        .post("/auth/refresh/", {
+          refresh: tokenState.refresh!.encoded,
+        })
+        .then((res) => {
+          if (res.data.access) {
+            tokenState.setAccess(res.data.access);
+          }
+          processQueue(null);
+
+          return api(originalRequest);
+        }, handleError)
+        .finally(() => {
+          isRefreshing = false;
+        });
+    }
+
+    if (isAuthError) {
+      return handleError(error);
+    }
+
+    return Promise.reject(error);
+  },
+);
 
 export default api;

client/src/lib/api.ts

@@ -5,6 +5,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 import { DM_Sans } from "next/font/google";
 
+import { AuthProvider, useAuth } from "@/context/auth-provider";
+
 const dmSans = DM_Sans({
   subsets: ["latin"],
   variable: "--font-dm-sans",
@@ -15,10 +17,12 @@ const queryClient = new QueryClient();
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className={dmSans.variable}>
-        <ReactQueryDevtools initialIsOpen={false} />
-        <Component {...pageProps} />
-      </div>
+      <AuthProvider>
+        <div className={dmSans.variable}>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <Component {...pageProps} />
+        </div>
+      </AuthProvider>
     </QueryClientProvider>
   );
 }