[web] support email verification

web/src/api/auth/auth.api.ts

@@ -49,4 +49,23 @@ export async function logoutUser() {
 export async function refreshToken() {
   const tempApi = generateApi();
   await tempApi.post('/auth/refresh');
+}
+
+export async function verify(token: string) {
+  try {
+    await api.post('/auth/verify', {
+      token
+    })
+
+    return null;
+  } catch (e) {
+    const resp = (e as AxiosError).response;
+    if (!resp) {
+      return 'Something went wrong';
+    }
+
+    const data = resp.data as { message: string };
+
+    return data.message
+  }
 }

web/src/api/users/user.ts

@@ -2,4 +2,5 @@ export interface User {
   id: string;
   email: string;
   username: string;
+  is_verified: boolean;
 }

web/src/components/Layout.tsx

@@ -6,6 +6,8 @@ interface LayoutProps extends React.PropsWithChildren {
   hasToast?: boolean;
 }
 
+export type ToastMessageType = 'error' | 'success' | 'notification';
+
 export default function Layout({ hasToast = false, children }: LayoutProps) {
   const [searchParams] = useSearchParams();
 

web/src/main.tsx

@@ -9,6 +9,7 @@ import {
 import Login from './pages/Login.tsx'
 import { UserProvider } from './contexts/userContext.tsx'
 import Register from './pages/Register.tsx'
+import VerifyAuth from './pages/VerifyAuth.tsx'
 
 const router = createBrowserRouter([
   {
@@ -22,6 +23,10 @@ const router = createBrowserRouter([
   {
     path: '/register',
     element: <Register />
+  },
+  {
+    path: '/auth/verify',
+    element: <VerifyAuth />
   }
 ])
 

web/src/pages/Register.tsx

@@ -4,6 +4,7 @@ import { RegisterError } from "../api/auth/auth.api";
 import Layout from "../components/Layout";
 import UnprotectedRoute from "../components/UnprotectedRoute";
 import { UserContext } from "../contexts/userContext";
+import { navigateWithToast } from '../utilities/navigate';
 
 export default function Register() {
   const [errorCode, setErrorCode] = useState<number | null>(null);
@@ -31,13 +32,7 @@ export default function Register() {
 
     const status = await register(email, username, password);
     if (!status) {
-      navigate({
-        pathname: '/login',
-        search: createSearchParams({
-          'message': 'Account created successfully! Login to your new account',
-          'message-type': 'notification'
-        }).toString()
-      })
+      navigateWithToast(navigate, '/login', 'Account created successfully! Verify your account before logging in. Check your email for further instructions.', 'notification');
     } else {
       const [errorCode, errorMessage] = status;
       setErrorCode(errorCode);

web/src/pages/VerifyAuth.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { verify } from "../api/auth/auth.api";
+import { navigateWithToast } from "../utilities/navigate";
+
+export default function VerifyAuth() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      const token = searchParams.get('token');
+
+      if (token) {
+        // Perform verification
+        const result = await verify(token);
+        if (!result) {
+          navigateWithToast(navigate, '/login', 'Verified your account. You can login now!', 'success');
+        } else {
+          navigateWithToast(navigate, '/login', `Failed to verify your account because: ${result}`, 'error');
+        }
+      } else {
+        navigateWithToast(navigate, '/login', 'Invalid auth', 'error');
+      }
+    })();
+  }, [])
+
+  return (
+    <div>Verifying your token...</div>
+  )
+}

web/src/utilities/navigate.ts

@@ -0,0 +1,16 @@
+import { ToastMessageType } from "../components/Layout";
+import { NavigateFunction, createSearchParams } from "react-router-dom";
+
+export function navigateWithToast(
+  navigate: NavigateFunction,
+  to: string,
+  message: string,
+  messageType: ToastMessageType) {
+  navigate({
+    pathname: to,
+    search: createSearchParams({
+      'message': message,
+      'message-type': messageType,
+    }).toString()
+  });
+}