diff --git a/awx/ui/src/screens/Credential/CredentialAdd/CredentialAdd.js b/awx/ui/src/screens/Credential/CredentialAdd/CredentialAdd.js
index f4940f7d9b..2525e74826 100644
--- a/awx/ui/src/screens/Credential/CredentialAdd/CredentialAdd.js
+++ b/awx/ui/src/screens/Credential/CredentialAdd/CredentialAdd.js
@@ -12,6 +12,20 @@ import {
 import useRequest from 'hooks/useRequest';
 import CredentialForm from '../shared/CredentialForm';
 
+const fetchCredentialTypes = async (pageNo = 1, credentialTypes = []) => {
+  const { data } = await CredentialTypesAPI.read({
+    page_size: 200,
+    page: pageNo,
+  });
+  if (data.next) {
+    return fetchCredentialTypes(
+      pageNo + 1,
+      credentialTypes.concat(data.results)
+    );
+  }
+  return credentialTypes.concat(data.results);
+};
+
 function CredentialAdd({ me }) {
   const history = useHistory();
 
@@ -76,6 +90,7 @@ function CredentialAdd({ me }) {
       history.push(`/credentials/${credentialId}/details`);
     }
   }, [credentialId, history]);
+
   const {
     isLoading,
     error,
@@ -83,18 +98,7 @@ function CredentialAdd({ me }) {
     result,
   } = useRequest(
     useCallback(async () => {
-      const { data } = await CredentialTypesAPI.read({ page_size: 200 });
-      const credTypes = data.results;
-      if (data.next && data.next.includes('page=2')) {
-        const {
-          data: { results },
-        } = await CredentialTypesAPI.read({
-          page_size: 200,
-          page: 2,
-        });
-        credTypes.concat(results);
-      }
-
+      const credTypes = await fetchCredentialTypes();
       const creds = credTypes.reduce((credentialTypesMap, credentialType) => {
         credentialTypesMap[credentialType.id] = credentialType;
         return credentialTypesMap;