diff --git a/src/client/components/Routes.js b/src/client/components/Routes.js
index 1523d8673c..97f6b56988 100644
--- a/src/client/components/Routes.js
+++ b/src/client/components/Routes.js
@@ -11,6 +11,7 @@ import ForgotPassword from './views/ForgotPassword';
import Login from './views/Login';
import Logout from './views/Logout';
import NotFound from './views/NotFound';
+import Verify from './views/Verify';
import CreateFirstUser from './views/CreateFirstUser';
import Edit from './views/collections/Edit';
import EditGlobal from './views/Global';
@@ -77,6 +78,21 @@ const Routes = () => {
+ {collections.map((collection) => {
+ if (collection?.auth?.emailVerification) {
+ return (
+
+
+
+ );
+ }
+ return null;
+ })}
+
{
if (user) {
diff --git a/src/client/components/views/Verify/index.js b/src/client/components/views/Verify/index.js
new file mode 100644
index 0000000000..1fd7079612
--- /dev/null
+++ b/src/client/components/views/Verify/index.js
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+import Logo from '../../graphics/Logo';
+import MinimalTemplate from '../../templates/Minimal';
+import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
+
+import { useConfig } from '../../providers/Config';
+import { useAuthentication } from '../../providers/Authentication';
+import Login from '../Login';
+import './index.scss';
+
+const baseClass = 'verify';
+
+const Verify = () => {
+ const { user } = useAuthentication();
+ const { token } = useParams();
+ const { pathname } = useLocation();
+ const { serverURL, routes: { admin: adminRoute }, admin: { user: adminUser } } = useConfig();
+
+ const collectionToVerify = pathname.split('/')?.[2];
+ const isAdminUser = collectionToVerify === adminUser;
+ const [verifyResult, setVerifyResult] = useState(null);
+
+ useEffect(() => {
+ async function verifyToken() {
+ const result = await fetch(`${serverURL}/api/${collectionToVerify}/verify/${token}`, { method: 'POST' });
+ setVerifyResult(result);
+ }
+ verifyToken();
+ }, [setVerifyResult, collectionToVerify, pathname, serverURL, token]);
+
+ if (user) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+ {verifyResult?.status === 200 ? 'Verified Successfully' : 'Unable To Verify'}
+
+ {isAdminUser && verifyResult?.status === 200 && (
+
+ )}
+
+ );
+};
+export default Verify;
diff --git a/src/client/components/views/Verify/index.scss b/src/client/components/views/Verify/index.scss
new file mode 100644
index 0000000000..135b44ea76
--- /dev/null
+++ b/src/client/components/views/Verify/index.scss
@@ -0,0 +1,16 @@
+@import '../../../scss/styles';
+
+.verify {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ flex-wrap: wrap;
+ min-height: 100vh;
+
+ &__brand {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin-bottom: base(2);
+ }
+}