diff --git a/src/app/helpers/FormHandler.ts b/src/app/helpers/FormHandler.ts
new file mode 100644
index 00000000..d46eaa80
--- /dev/null
+++ b/src/app/helpers/FormHandler.ts
@@ -0,0 +1,7 @@
+export class FormHandler {
+    cleanUpFormInputs(...formInputs: string[]): string[] {
+        return formInputs.map((formInput) => {
+            return formInput.trim()
+        })
+    }
+}
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index 7e839b91..c6905c38 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -3,25 +3,30 @@ import {sha512Async} from 'src/app/hash';
 import {PasswordVerificationService} from "../../services/password-verification.service";
 import {faEnvelope, faKey, faSignIn, faUserPlus} from "@fortawesome/free-solid-svg-icons";
 import {AuthService} from "../../api/auth.service";
+import {FormHandler} from "../../helpers/FormHandler";
 
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html'
 })
-export class LoginComponent {
+export class LoginComponent extends FormHandler {
     email: string = "";
     password: string = "";
 
     constructor(private authService: AuthService, private passwordVerifier: PasswordVerificationService) {
+        super();
     }
 
     login() {
-        if (!this.passwordVerifier.verifyPassword(this.email, this.password)) {
+        const formInputs = this.cleanUpFormInputs(this.email, this.password);
+        const [email, password] = formInputs;
+
+        if (!this.passwordVerifier.verifyPassword(email, password)) {
             return;
         }
 
-        sha512Async(this.password).then((hash) => {
-            this.authService.LogIn(this.email, hash)
+        sha512Async(password).then((hash) => {
+            this.authService.LogIn(email, hash)
         });
     }
 
diff --git a/src/app/pages/register/register.component.ts b/src/app/pages/register/register.component.ts
index 14348742..b5ae6822 100644
--- a/src/app/pages/register/register.component.ts
+++ b/src/app/pages/register/register.component.ts
@@ -10,30 +10,34 @@ import {
     faUserPlus
 } from "@fortawesome/free-solid-svg-icons";
 import {AuthService} from "../../api/auth.service";
+import {FormHandler} from "../../helpers/FormHandler";
 
 @Component({
     selector: 'app-register',
     templateUrl: './register.component.html'
 })
-export class RegisterComponent {
+export class RegisterComponent extends FormHandler {
     username: string = "";
     email: string = "";
     password: string = "";
     confirmPassword: string = "";
 
     constructor(private authService: AuthService, private passwordVerifier: PasswordVerificationService) {
+        super();
     }
 
     register() {
-        if (!this.passwordVerifier.verifyPassword(this.username, this.password, this.username, this.confirmPassword)) {
+        const formInputs = this.cleanUpFormInputs(this.username, this.email, this.password, this.confirmPassword);
+        const [username, email, password, confirmPassword] = formInputs;
+
+        if (!this.passwordVerifier.verifyPassword(username, password, username, confirmPassword)) {
             return;
         }
 
-        sha512Async(this.password).then((hash) => {
-            this.authService.Register(this.username, this.email, hash)
+        sha512Async(password).then((hash) => {
+            this.authService.Register(username, email, hash)
         });
     }
-
     protected readonly faEnvelope = faEnvelope;
     protected readonly faTriangleExclamation = faTriangleExclamation;
     protected readonly faSignIn = faSignIn;