Switch to use session based API Keys

Author: mythz

AiServer/Configure.AppHost.cs

@@ -149,11 +149,11 @@ public override void Configure()
         ];
 
         // Avoid having to re-renter AuthSecret and API Keys during Development
-        PreRequestFilters.Add((req, res) =>
-        {
-            req.Items[Keywords.AuthSecret] = Config.AdminAuthSecret;
-            req.Items[Keywords.Authorization] = "Bearer " + Config.AdminAuthSecret;
-        });
+        // PreRequestFilters.Add((req, res) =>
+        // {
+        //     req.Items[Keywords.AuthSecret] = Config.AdminAuthSecret;
+        //     req.Items[Keywords.Authorization] = "Bearer " + Config.AdminAuthSecret;
+        // });
         #endif
     }
 }

AiServer/Configure.Auth.cs

@@ -1,5 +1,5 @@
-using AiServer.ServiceInterface;
-using ServiceStack.Auth;
+using ServiceStack.Auth;
+using AiServer.ServiceInterface;
 
 [assembly: HostingStartup(typeof(ConfigureAuth))]
 
@@ -10,14 +10,17 @@ public class ConfigureAuth : IHostingStartup
     public void Configure(IWebHostBuilder builder) => builder
         .ConfigureServices(services =>
         {
-            services.AddPlugin(new AuthFeature(new AuthSecretAuthProvider(AppConfig.Instance.AuthSecret)));
+            services.AddPlugin(new AuthFeature([
+                new ApiKeyCredentialsProvider(),
+                new AuthSecretAuthProvider(AppConfig.Instance.AuthSecret),
+            ]));
+            services.AddPlugin(new SessionFeature());
             services.AddPlugin(new ApiKeysFeature {
-                
             });
         })
         .ConfigureAppHost(appHost =>
         {
             using var db = HostContext.AppHost.GetDbConnection();
             appHost.GetPlugin<ApiKeysFeature>().InitSchema(db);
         });
-}
+}

AiServer/wwwroot/admin/index.html

@@ -50,8 +50,9 @@
                     </ul>
                 </li>
                 <li class="-mx-6 mt-auto">
-                    <div v-if="showUserMenu" class="font-normal absolute z-10 -mt-10 left-6 w-60 origin-top-right rounded-md bg-white dark:bg-black py-1 shadow-lg ring-1 ring-black dark:ring-gray-600 ring-opacity-5 focus:outline-none right-2" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+                    <div v-if="showUserMenu" class="font-normal absolute z-10 -mt-16 left-6 w-60 origin-top-right rounded-md bg-white dark:bg-black py-1 shadow-lg ring-1 ring-black dark:ring-gray-600 ring-opacity-5 focus:outline-none right-2" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                         <a href="/admin/?clear=metadata" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800" role="menuitem" tabindex="-1">Reset Cache</a>
+                        <a href="/auth/logout" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800" role="menuitem" tabindex="-1">Logout</a>
                     </div>
                     <span v-if="user" @click="showUserMenu=!showUserMenu" class="flex cursor-pointer bg-gray-50 items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
                         <img class="h-8 w-8 rounded-full bg-gray-50" :src="user.profileUrl" alt="">
@@ -372,8 +373,12 @@ <h4 class="mt-4 font-semibold text-gray-500">By Month</h4>
         async function doSignIn() {
             authError.value = ''
             if (!authSecret.value) return
-            serviceClient.headers.set("authsecret", authSecret.value)
-            const api = await serviceClient.api(new Authenticate())
+            // serviceClient.headers.set("authsecret", authSecret.value)
+            const api = await serviceClient.api(new Authenticate({
+                provider: 'credentials',
+                userName: 'Admin',
+                password: authSecret.value,
+            }))
             if (api.succeeded) {
                 signIn(api.response)
             } else {

AiServer/wwwroot/css/app.css

@@ -1081,14 +1081,14 @@ select{
   margin-top: -0.25rem;
 }
 
-.-mt-10 {
-  margin-top: -2.5rem;
-}
-
 .-mt-12 {
   margin-top: -3rem;
 }
 
+.-mt-16 {
+  margin-top: -4rem;
+}
+
 .-mt-8 {
   margin-top: -2rem;
 }
@@ -2002,6 +2002,10 @@ select{
   border-color: rgb(79 70 229 / var(--tw-border-opacity));
 }
 
+.border-indigo-600\/25 {
+  border-color: rgb(79 70 229 / 0.25);
+}
+
 .border-red-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -2031,47 +2035,6 @@ select{
   border-color: rgb(250 204 21 / var(--tw-border-opacity));
 }
 
-.border-gray-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-border-opacity));
-}
-
-.border-gray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
-.border-slate-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(241 245 249 / var(--tw-border-opacity));
-}
-
-.border-indigo-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-border-opacity));
-}
-
-.border-indigo-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
-}
-
-.border-indigo-600\/50 {
-  border-color: rgb(79 70 229 / 0.5);
-}
-
-.border-indigo-600\/20 {
-  border-color: rgb(79 70 229 / 0.2);
-}
-
-.border-indigo-600\/40 {
-  border-color: rgb(79 70 229 / 0.4);
-}
-
-.border-indigo-600\/25 {
-  border-color: rgb(79 70 229 / 0.25);
-}
-
 .bg-\[\#f4f4f4\] {
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 244 / var(--tw-bg-opacity));
@@ -3005,18 +2968,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .\!outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
@@ -3031,10 +2982,6 @@ select{
   outline-style: solid;
 }
 
-.outline-gray-900 {
-  outline-color: #111827;
-}
-
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4486,34 +4433,6 @@ select{
     display: table-cell;
   }
 
-  .md\:w-96 {
-    width: 24rem;
-  }
-
-  .md\:w-\[21em\] {
-    width: 21em;
-  }
-
-  .md\:w-\[21\.5em\] {
-    width: 21.5em;
-  }
-
-  .md\:w-\[21\.25em\] {
-    width: 21.25em;
-  }
-
-  .md\:w-\[830px\] {
-    width: 830px;
-  }
-
-  .md\:w-\[230px\] {
-    width: 230px;
-  }
-
-  .md\:w-\[330px\] {
-    width: 330px;
-  }
-
   .md\:max-w-3xl {
     max-width: 48rem;
   }