diff --git a/app/Models/ApiKey.php b/app/Models/ApiKey.php
index 6fb8a0e82..53a3fa810 100644
--- a/app/Models/ApiKey.php
+++ b/app/Models/ApiKey.php
@@ -53,7 +53,7 @@ class ApiKey extends Validable
      * @var array
      */
     protected $casts = [
-        'allowed_ips' => 'json',
+        'allowed_ips' => 'array',
         'user_id' => 'int',
         'r_' . AdminAcl::RESOURCE_USERS => 'int',
         'r_' . AdminAcl::RESOURCE_ALLOCATIONS => 'int',
@@ -99,7 +99,8 @@ class ApiKey extends Validable
         'identifier' => 'required|string|size:16|unique:api_keys,identifier',
         'token' => 'required|string',
         'memo' => 'required|nullable|string|max:500',
-        'allowed_ips' => 'nullable|json',
+        'allowed_ips' => 'nullable|array',
+        'allowed_ips.*' => 'string',
         'last_used_at' => 'nullable|date',
         'r_' . AdminAcl::RESOURCE_USERS => 'integer|min:0|max:3',
         'r_' . AdminAcl::RESOURCE_ALLOCATIONS => 'integer|min:0|max:3',
diff --git a/app/Models/Validable.php b/app/Models/Validable.php
index 43545c3a8..f11c8ad05 100644
--- a/app/Models/Validable.php
+++ b/app/Models/Validable.php
@@ -140,7 +140,12 @@ abstract class Validable extends Model
         }
 
         return $this->getValidator()->setData(
-            $this->toArray()
+            // Trying to do self::toArray() here will leave out keys based on the whitelist/blacklist
+            // for that model. Doing this will return all of the attributes in a format that can
+            // properly be validated.
+            $this->addCastAttributesToArray(
+                $this->getAttributes(), $this->getMutatedAttributes()
+            )
         )->passes();
     }
 }
diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index 38d7f757c..51f1f7806 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -46,62 +46,67 @@ export default () => {
     };
 
     return (
-        <div className={'my-10 flex'}>
+        <div className={'my-10'}>
             <FlashMessageRender byKey={'account'} className={'mb-4'}/>
-            <ContentBox title={'Create API Key'} className={'flex-1'}>
-                <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([...s!, key]))}/>
-            </ContentBox>
-            <ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
-                <SpinnerOverlay visible={loading}/>
-                {deleteIdentifier &&
-                <ConfirmationModal
-                    title={'Confirm key deletion'}
-                    buttonText={'Yes, delete key'}
-                    visible={true}
-                    onConfirmed={() => {
-                        doDeletion(deleteIdentifier);
-                        setDeleteIdentifier('');
-                    }}
-                    onDismissed={() => setDeleteIdentifier('')}
-                >
-                    Are you sure you wish to delete this API key? All requests using it will immediately be
-                    invalidated and will fail.
-                </ConfirmationModal>
-                }
-                {
-                    keys.length === 0 ?
-                        <p className={'text-center text-sm'}>
-                            {loading ? 'Loading...' : 'No API keys exist for this account.'}
-                        </p>
-                        :
-                        keys.map(key => (
-                            <div key={key.identifier} className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}>
-                                <FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
-                                <div className={'ml-4 flex-1'}>
-                                    <p className={'text-sm'}>{key.description}</p>
-                                    <p className={'text-2xs text-neutral-300 uppercase'}>
-                                        Last
-                                        used: {key.lastUsedAt ? format(key.lastUsedAt, 'MMM Do, YYYY HH:mm') : 'Never'}
-                                    </p>
-                                </div>
-                                <p className={'text-sm ml-4'}>
-                                    <code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
-                                        {key.identifier}
-                                    </code>
-                                </p>
-                                <button
-                                    className={'ml-4 p-2 text-sm'}
-                                    onClick={() => setDeleteIdentifier(key.identifier)}
+            <div className={'flex'}>
+                <ContentBox title={'Create API Key'} className={'flex-1'}>
+                    <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
+                </ContentBox>
+                <ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
+                    <SpinnerOverlay visible={loading}/>
+                    {deleteIdentifier &&
+                    <ConfirmationModal
+                        title={'Confirm key deletion'}
+                        buttonText={'Yes, delete key'}
+                        visible={true}
+                        onConfirmed={() => {
+                            doDeletion(deleteIdentifier);
+                            setDeleteIdentifier('');
+                        }}
+                        onDismissed={() => setDeleteIdentifier('')}
+                    >
+                        Are you sure you wish to delete this API key? All requests using it will immediately be
+                        invalidated and will fail.
+                    </ConfirmationModal>
+                    }
+                    {
+                        keys.length === 0 ?
+                            <p className={'text-center text-sm'}>
+                                {loading ? 'Loading...' : 'No API keys exist for this account.'}
+                            </p>
+                            :
+                            keys.map(key => (
+                                <div
+                                    key={key.identifier}
+                                    className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}
                                 >
-                                    <FontAwesomeIcon
-                                        icon={faTrashAlt}
-                                        className={'text-neutral-400 hover:text-red-400 transition-colors duration-150'}
-                                    />
-                                </button>
-                            </div>
-                        ))
-                }
-            </ContentBox>
+                                    <FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
+                                    <div className={'ml-4 flex-1'}>
+                                        <p className={'text-sm'}>{key.description}</p>
+                                        <p className={'text-2xs text-neutral-300 uppercase'}>
+                                            Last
+                                            used: {key.lastUsedAt ? format(key.lastUsedAt, 'MMM Do, YYYY HH:mm') : 'Never'}
+                                        </p>
+                                    </div>
+                                    <p className={'text-sm ml-4'}>
+                                        <code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
+                                            {key.identifier}
+                                        </code>
+                                    </p>
+                                    <button
+                                        className={'ml-4 p-2 text-sm'}
+                                        onClick={() => setDeleteIdentifier(key.identifier)}
+                                    >
+                                        <FontAwesomeIcon
+                                            icon={faTrashAlt}
+                                            className={'text-neutral-400 hover:text-red-400 transition-colors duration-150'}
+                                        />
+                                    </button>
+                                </div>
+                            ))
+                    }
+                </ContentBox>
+            </div>
         </div>
     );
 };