fix: invalid redirection after jwt expiry

backend/src/auth/auth.service.ts

@@ -114,7 +114,7 @@ export class AuthService {
         refreshTokenId,
       },
       {
-        expiresIn: "10s",
+        expiresIn: "15min",
         secret: this.config.get("JWT_SECRET"),
       }
     );

frontend/src/components/auth/SignInForm.tsx

@@ -11,15 +11,21 @@ import {
 import { useForm, yupResolver } from "@mantine/form";
 import { showNotification } from "@mantine/notifications";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React from "react";
 import { TbInfoCircle } from "react-icons/tb";
 import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
+import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
+import userService from "../../services/user.service";
 import toast from "../../utils/toast.util";
 
-const SignInForm = () => {
+const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
   const config = useConfig();
+  const router = useRouter();
+  const { setUser } = useUser();
+
   const [showTotp, setShowTotp] = React.useState(false);
   const [loginToken, setLoginToken] = React.useState("");
 
@@ -42,10 +48,10 @@ const SignInForm = () => {
     validate: yupResolver(validationSchema),
   });
 
-  const signIn = (email: string, password: string) => {
+  const signIn = async (email: string, password: string) => {
-    authService
+    await authService
       .signIn(email, password)
-      .then((response) => {
+      .then(async (response) => {
         if (response.data["loginToken"]) {
           // Prompt the user to enter their totp code
           setShowTotp(true);
@@ -58,7 +64,8 @@ const SignInForm = () => {
           });
           setLoginToken(response.data["loginToken"]);
         } else {
-          window.location.replace("/");
+          setUser(await userService.getCurrentUser());
+          router.replace(redirectPath);
         }
       })
       .catch(toast.axiosError);

frontend/src/components/auth/SignUpForm.tsx

@@ -10,13 +10,18 @@ import {
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
+import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
+import userService from "../../services/user.service";
 import toast from "../../utils/toast.util";
 
 const SignUpForm = () => {
   const config = useConfig();
+  const router = useRouter();
+  const { setUser } = useUser();
 
   const validationSchema = yup.object().shape({
     email: yup.string().email().required(),
@@ -33,10 +38,13 @@ const SignUpForm = () => {
     validate: yupResolver(validationSchema),
   });
 
-  const signUp = (email: string, username: string, password: string) => {
+  const signUp = async (email: string, username: string, password: string) => {
-    authService
+    await authService
       .signUp(email, username, password)
-      .then(() => window.location.replace("/"))
+      .then(async () => {
+        setUser(await userService.getCurrentUser());
+        router.replace("/");
+      })
       .catch(toast.axiosError);
   };
 

frontend/src/middleware.ts

@@ -105,7 +105,13 @@ export async function middleware(request: NextRequest) {
   ];
 
   for (const rule of rules) {
-    if (rule.condition)
+    if (rule.condition) {
-      return NextResponse.redirect(new URL(rule.path, request.url));
+      let { path } = rule;
+
+      if (path == "/auth/signIn") {
+        path = path + "?redirect=" + encodeURIComponent(route);
+      }
+      return NextResponse.redirect(new URL(path, request.url));
+    }
   }
 }

frontend/src/pages/auth/signIn.tsx

@@ -5,20 +5,22 @@ import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 
 const SignIn = () => {
-  const router = useRouter();
   const { user } = useUser();
+  const router = useRouter();
+
+  const redirectPath = (router.query.redirect as string) ?? "/upload";
 
   // If the access token is expired, the middleware redirects to this page.
   // If the refresh token is still valid, the user will be redirected to the home page.
   if (user) {
-    router.replace("/");
+    router.replace(redirectPath);
     return <LoadingOverlay overlayOpacity={1} visible />;
   }
 
   return (
     <>
       <Meta title="Sign In" />
-      <SignInForm />
+      <SignInForm redirectPath={redirectPath} />
     </>
   );
 };