feat: auth provider and login page

dkron/api.go

@@ -7,7 +7,6 @@ import (
 	"net/http"
 	"sort"
 	"strconv"
-	"time"
 
 	"github.com/distribworks/dkron/v4/types"
 	"github.com/gin-contrib/cors"
@@ -48,23 +47,21 @@ func NewTransport(a *Agent, log *logrus.Entry) *HTTPTransport {
 
 func (h *HTTPTransport) ServeHTTP() {
 	h.Engine = gin.Default()
-	h.Engine.Use(h.Options)
 
 	rootPath := h.Engine.Group("/")
 
-	rootPath.Use(cors.New(cors.Config{
-		AllowOrigins:     []string{"*"},
-		AllowMethods:     []string{"*"},
-		AllowHeaders:     []string{"*"},
-		ExposeHeaders:    []string{"*"},
-		AllowCredentials: true,
-		MaxAge:           12 * time.Hour,
-	}))
+	config := cors.DefaultConfig()
+	config.AllowAllOrigins = true
+	config.AllowMethods = []string{"*"}
+	config.AllowHeaders = []string{"*"}
+	config.ExposeHeaders = []string{"*"}
+
+	rootPath.Use(cors.New(config))
 	rootPath.Use(h.MetaMiddleware())
 
 	h.APIRoutes(rootPath)
 	if h.agent.config.UI {
-		h.UI(rootPath, uiDist)
+		h.UI(rootPath, &uiDist)
 	}
 
 	h.logger.WithFields(logrus.Fields{
@@ -131,19 +128,6 @@ func (h *HTTPTransport) MetaMiddleware() gin.HandlerFunc {
 	}
 }
 
-func (h *HTTPTransport) Options(c *gin.Context) {
-	if c.Request.Method != "OPTIONS" {
-		c.Next()
-	} else {
-		c.Header("Allow", "HEAD,GET,POST,PUT,PATCH,DELETE,OPTIONS")
-		c.Header("Content-Type", "application/json")
-		gh := cors.Default()
-		gh(c)
-
-		c.AbortWithStatus(http.StatusOK)
-	}
-}
-
 func renderJSON(c *gin.Context, status int, v interface{}) {
 	if _, ok := c.GetQuery(pretty); ok {
 		c.IndentedJSON(status, v)

ui/src/App.tsx

@@ -7,8 +7,10 @@ import jobs from './jobs';
 import { BusyList } from './executions/BusyList';
 import { Layout } from './layout';
 import dataProvider from './dataProvider';
+import authProvider from './authProvider';
 import Dashboard from './dashboard';
 import Settings from './settings/Settings';
+import LoginPage from './LoginPage';
 
 declare global {
     interface Window {
@@ -21,11 +23,11 @@ declare global {
     }
 }
 
-const authProvider = () => Promise.resolve();
 const history = createHashHistory();
 
 export const App = () => <Admin
     dashboard={Dashboard}
+    loginPage={LoginPage}
     authProvider={authProvider}
     dataProvider={dataProvider}
     layout={Layout}

ui/src/LoginPage.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { useLogin, useNotify } from 'react-admin';
+
+const LoginPage = ({ theme }) => {
+    const [token, setToken] = useState('');
+    const login = useLogin();
+    const notify = useNotify();
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        login({ token }).catch(() =>
+            notify('Invalid token')
+        );
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <input
+                name="token"
+                type="text"
+                value={token}
+                onChange={e => setToken(e.target.value)}
+            />
+        </form>
+    );
+};
+
+export default LoginPage;
+

ui/src/authProvider.ts

@@ -0,0 +1,27 @@
+import { AuthProvider } from 'react-admin';
+
+const authProvider: AuthProvider = {
+    login: ({ token }) => {
+        localStorage.setItem('token', token);
+        return Promise.resolve();
+    },
+    logout: () => {
+        localStorage.removeItem('token');
+        return Promise.resolve();
+    },
+    checkAuth: () =>
+        localStorage.getItem('token') ? Promise.resolve() : Promise.reject(),
+    checkError: (error) => {
+        const status = error.status;
+        if (status === 401 || status === 403) {
+            localStorage.removeItem('token');
+            return Promise.reject();
+        }
+        // other error code (404, 500, etc): no need to log out
+        return Promise.resolve();
+    },
+    getIdentity: () => Promise.resolve(),
+    getPermissions: () => Promise.resolve(),
+};
+
+export default authProvider;

ui/src/dataProvider.ts

@@ -1,11 +1,25 @@
 import { fetchUtils } from 'ra-core';
 import jsonServerProvider from 'ra-data-json-server';
 import { stringify } from 'query-string';
+import { DataProvider } from 'react-admin';
 
 export const apiUrl = window.DKRON_API_URL || 'http://localhost:8080/v1'
-const dataProvider = jsonServerProvider(apiUrl);
 
-const myDataProvider = {
+const httpClient = (url: String, options: fetchUtils.Options = {}) => {
+    if (!options.headers) {
+        options.headers = fetchUtils.createHeadersFromOptions(options);
+    }
+
+    const token = localStorage.getItem('token');
+    if (token) {
+        options.headers.set('Authorization', `Bearer ${token}`);
+    }
+    return fetchUtils.fetchJson(url, options);
+};
+
+const dataProvider = jsonServerProvider(apiUrl, httpClient);
+
+const dkronDataProvider: DataProvider = {
     ...dataProvider,
     getManyReference: (resource: any, params: any) => {
         const { page, perPage } = params.pagination;
@@ -39,4 +53,4 @@ const myDataProvider = {
     }
 }
 
-export default myDataProvider;
+export default dkronDataProvider;