diff --git a/src/app/core/services/auth.service.ts b/src/app/core/services/auth.service.ts
index b51cb58b9..da0063ce7 100644
--- a/src/app/core/services/auth.service.ts
+++ b/src/app/core/services/auth.service.ts
@@ -8,7 +8,7 @@ import { inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { SignUpModel } from '@core/models/sign-up.model';
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { ClearCurrentUser } from '@osf/core/store/user';
-import { urlParam } from '@osf/shared/helpers/url-param.helper';
+import { localUrlParam, urlParam } from '@osf/shared/helpers/url-param.helper';
 import { JsonApiService } from '@osf/shared/services/json-api.service';
 import { LoaderService } from '@osf/shared/services/loader.service';
 
@@ -41,7 +41,14 @@ export class AuthService {
     }
 
     this.loaderService.show();
-    const loginUrl = `${this.casUrl}/login?${urlParam({ service: `${this.webUrl}/login`, next: window.location.href })}`;
+    let loginUrl = null;
+    if (this.environment.webUrl.includes('localhost')) {
+      // CAS should handle auth instead of angular, so we need to pass the next param
+      // in the service param to ensure the user is redirected back to the correct page after login
+      loginUrl = `${this.casUrl}/login?${localUrlParam({ service: `${this.webUrl.replace('4200', '5000')}/login`, next: window.location.href })}`;
+    } else {
+      loginUrl = `${this.casUrl}/login?${urlParam({ service: `${this.webUrl}/login`, next: window.location.href })}`;
+    }
     window.location.href = loginUrl;
   }
 
diff --git a/src/app/shared/helpers/url-param.helper.ts b/src/app/shared/helpers/url-param.helper.ts
index 02e7e98c8..92d475247 100644
--- a/src/app/shared/helpers/url-param.helper.ts
+++ b/src/app/shared/helpers/url-param.helper.ts
@@ -3,3 +3,14 @@ export const urlParam = (params: Record<string, string>) => {
     .map((entry) => entry.map((comp) => encodeURIComponent(comp)).join('='))
     .join('&');
 };
+
+export const localUrlParam = (params: { service: string; next?: string }) => {
+  const { service, next } = params;
+
+  // encode "next" separately because it must be encoded twice
+  const encodedNext = next ? encodeURIComponent(next) : undefined;
+
+  const valueAfterService = encodedNext ? `${service}?next=${encodedNext}` : service;
+
+  return `service=${encodeURIComponent(valueAfterService)}`;
+};