[PUI] Session authentication

src/backend/InvenTree/InvenTree/api_version.py

@@ -1,11 +1,14 @@
 """InvenTree API version information."""
 
 # InvenTree API version
-INVENTREE_API_VERSION = 186
+INVENTREE_API_VERSION = 187
 """Increment this API version number whenever there is a significant change to the API that any clients need to know about."""
 
 INVENTREE_API_TEXT = """
 
+v187 - 2024-04-07 : https://github.com/inventree/InvenTree/pull/6970
+    - Improvements for login / logout endpoints for better support of React web interface
+
 v186 - 2024-03-26 : https://github.com/inventree/InvenTree/pull/6855
     - Adds license information to the API
 

src/backend/InvenTree/InvenTree/settings.py

@@ -469,10 +469,18 @@
         'rest_framework.renderers.BrowsableAPIRenderer'
     )
 
-# dj-rest-auth
 # JWT switch
 USE_JWT = get_boolean_setting('INVENTREE_USE_JWT', 'use_jwt', False)
 REST_USE_JWT = USE_JWT
+
+# dj-rest-auth
+REST_AUTH = {
+    'SESSION_LOGIN': True,
+    'TOKEN_MODEL': 'users.models.ApiToken',
+    'TOKEN_CREATOR': 'users.models.default_create_token',
+    'USE_JWT': USE_JWT,
+}
+
 OLD_PASSWORD_FIELD_ENABLED = True
 REST_AUTH_REGISTER_SERIALIZERS = {
     'REGISTER_SERIALIZER': 'InvenTree.forms.CustomRegisterSerializer'
@@ -487,6 +495,7 @@
     )
     INSTALLED_APPS.append('rest_framework_simplejwt')
 
+
 # WSGI default setting
 WSGI_APPLICATION = 'InvenTree.wsgi.application'
 
@@ -1069,6 +1078,11 @@
         )
         sys.exit(-1)
 
+# Additional CSRF settings
+CSRF_HEADER_NAME = 'HTTP_X_CSRFTOKEN'
+CSRF_COOKIE_NAME = 'csrftoken'
+CSRF_COOKIE_SAMESITE = 'Lax'
+
 USE_X_FORWARDED_HOST = get_boolean_setting(
     'INVENTREE_USE_X_FORWARDED_HOST',
     config_key='use_x_forwarded_host',

src/backend/InvenTree/InvenTree/urls.py

@@ -160,6 +160,7 @@
                 SocialAccountDisconnectView.as_view(),
                 name='social_account_disconnect',
             ),
+            path('login/', users.api.Login.as_view(), name='api-login'),
             path('logout/', users.api.Logout.as_view(), name='api-logout'),
             path(
                 'login-redirect/',

src/backend/InvenTree/users/api.py

@@ -8,9 +8,11 @@
 from django.urls import include, path, re_path
 from django.views.generic.base import RedirectView
 
-from dj_rest_auth.views import LogoutView
+from dj_rest_auth.views import LoginView, LogoutView
 from drf_spectacular.utils import OpenApiResponse, extend_schema, extend_schema_view
 from rest_framework import exceptions, permissions
+from rest_framework.authentication import BasicAuthentication
+from rest_framework.decorators import authentication_classes
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
@@ -205,6 +207,18 @@ class GroupList(ListCreateAPI):
     ordering_fields = ['name']
 
 
+@authentication_classes([BasicAuthentication])
+@extend_schema_view(
+    post=extend_schema(
+        responses={200: OpenApiResponse(description='User successfully logged in')}
+    )
+)
+class Login(LoginView):
+    """API view for logging in via API."""
+
+    ...
+
+
 @extend_schema_view(
     post=extend_schema(
         responses={200: OpenApiResponse(description='User successfully logged out')}

src/backend/InvenTree/users/models.py

@@ -56,6 +56,17 @@ def default_token_expiry():
     return InvenTree.helpers.current_date() + datetime.timedelta(days=365)
 
 
+def default_create_token(token_model, user, serializer):
+    """Generate a default value for the token."""
+    token = token_model.objects.filter(user=user, name='', revoked=False)
+
+    if token.exists():
+        return token.first()
+
+    else:
+        return token_model.objects.create(user=user, name='')
+
+
 class ApiToken(AuthToken, InvenTree.models.MetadataMixin):
     """Extends the default token model provided by djangorestframework.authtoken.
 

src/frontend/src/App.tsx

@@ -1,40 +1,24 @@
 import { QueryClient } from '@tanstack/react-query';
 import axios from 'axios';
 
-import { getCsrfCookie } from './functions/auth';
 import { useLocalState } from './states/LocalState';
-import { useSessionState } from './states/SessionState';
 
 // Global API instance
 export const api = axios.create({});
 
 /*
  * Setup default settings for the Axios API instance.
- *
- * This includes:
- * - Base URL
- * - Authorization token (if available)
- * - CSRF token (if available)
  */
 export function setApiDefaults() {
   const host = useLocalState.getState().host;
-  const token = useSessionState.getState().token;
 
   api.defaults.baseURL = host;
   api.defaults.timeout = 2500;
-  api.defaults.headers.common['Authorization'] = token
-    ? `Token ${token}`
-    : undefined;
 
-  if (!!getCsrfCookie()) {
-    api.defaults.withCredentials = true;
-    api.defaults.xsrfCookieName = 'csrftoken';
-    api.defaults.xsrfHeaderName = 'X-CSRFToken';
-  } else {
-    api.defaults.withCredentials = false;
-    api.defaults.xsrfCookieName = undefined;
-    api.defaults.xsrfHeaderName = undefined;
-  }
+  api.defaults.withCredentials = true;
+  api.defaults.withXSRFToken = true;
+  api.defaults.xsrfCookieName = 'csrftoken';
+  api.defaults.xsrfHeaderName = 'X-CSRFToken';
 }
 
 export const queryClient = new QueryClient();

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -19,9 +19,9 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { doBasicLogin, doSimpleLogin } from '../../functions/auth';
+import { doBasicLogin, doSimpleLogin, isLoggedIn } from '../../functions/auth';
+import { showLoginNotification } from '../../functions/notifications';
 import { apiUrl, useServerApiState } from '../../states/ApiState';
-import { useSessionState } from '../../states/SessionState';
 import { SsoButton } from '../buttons/SSOButton';
 
 export function AuthenticationForm() {
@@ -46,19 +46,18 @@ export function AuthenticationForm() {
       ).then(() => {
         setIsLoggingIn(false);
 
-        if (useSessionState.getState().hasToken()) {
-          notifications.show({
+        if (isLoggedIn()) {
+          showLoginNotification({
             title: t`Login successful`,
-            message: t`Welcome back!`,
-            color: 'green',
-            icon: <IconCheck size="1rem" />
+            message: t`Logged in successfully`
           });
+
           navigate(location?.state?.redirectFrom ?? '/home');
         } else {
-          notifications.show({
+          showLoginNotification({
             title: t`Login failed`,
             message: t`Check your input and try again.`,
-            color: 'red'
+            success: false
           });
         }
       });
@@ -67,18 +66,15 @@ export function AuthenticationForm() {
         setIsLoggingIn(false);
 
         if (ret?.status === 'ok') {
-          notifications.show({
+          showLoginNotification({
             title: t`Mail delivery successful`,
-            message: t`Check your inbox for the login link. If you have an account, you will receive a login link. Check in spam too.`,
-            color: 'green',
-            icon: <IconCheck size="1rem" />,
-            autoClose: false
+            message: t`Check your inbox for the login link. If you have an account, you will receive a login link. Check in spam too.`
           });
         } else {
-          notifications.show({
-            title: t`Input error`,
+          showLoginNotification({
+            title: t`Mail delivery failed`,
             message: t`Check your input and try again.`,
-            color: 'red'
+            success: false
           });
         }
       });
@@ -193,11 +189,9 @@ export function RegistrationForm() {
       .then((ret) => {
         if (ret?.status === 204) {
           setIsRegistering(false);
-          notifications.show({
+          showLoginNotification({
             title: t`Registration successful`,
-            message: t`Please confirm your email address to complete the registration`,
-            color: 'green',
-            icon: <IconCheck size="1rem" />
+            message: t`Please confirm your email address to complete the registration`
           });
           navigate('/home');
         }
@@ -212,11 +206,10 @@ export function RegistrationForm() {
           if (err.response?.data?.non_field_errors) {
             err_msg = err.response.data.non_field_errors;
           }
-          notifications.show({
+          showLoginNotification({
             title: t`Input error`,
             message: t`Check your input and try again. ` + err_msg,
-            color: 'red',
-            autoClose: 30000
+            success: false
           });
         }
       });

src/frontend/src/components/images/ApiImage.tsx

@@ -1,71 +1,27 @@
 /**
- * Component for loading an image from the InvenTree server,
- * using the API's token authentication.
+ * Component for loading an image from the InvenTree server
  *
  * Image caching is handled automagically by the browsers cache
  */
 import { Image, ImageProps, Skeleton, Stack } from '@mantine/core';
-import { useId } from '@mantine/hooks';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useMemo } from 'react';
 
-import { api } from '../../App';
+import { useLocalState } from '../../states/LocalState';
 
 /**
  * Construct an image container which will load and display the image
  */
 export function ApiImage(props: ImageProps) {
-  const [image, setImage] = useState<string>('');
+  const { host } = useLocalState.getState();
 
-  const [authorized, setAuthorized] = useState<boolean>(true);
-
-  const queryKey = useId();
-
-  const _imgQuery = useQuery({
-    queryKey: ['image', queryKey, props.src],
-    enabled:
-      authorized &&
-      props.src != undefined &&
-      props.src != null &&
-      props.src != '',
-    queryFn: async () => {
-      if (!props.src) {
-        return null;
-      }
-      return api
-        .get(props.src, {
-          responseType: 'blob'
-        })
-        .then((response) => {
-          switch (response.status) {
-            case 200:
-              let img = new Blob([response.data], {
-                type: response.headers['content-type']
-              });
-              let url = URL.createObjectURL(img);
-              setImage(url);
-              break;
-            default:
-              // User is not authorized to view this image, or the image is not available
-              setImage('');
-              setAuthorized(false);
-              break;
-          }
-
-          return response;
-        })
-        .catch((_error) => {
-          return null;
-        });
-    },
-    refetchOnMount: true,
-    refetchOnWindowFocus: false
-  });
+  const imageUrl = useMemo(() => {
+    return `${host}${props.src}`;
+  }, [host, props.src]);
 
   return (
     <Stack>
-      {image && image.length > 0 ? (
-        <Image {...props} src={image} withPlaceholder fit="contain" />
+      {imageUrl ? (
+        <Image {...props} src={imageUrl} withPlaceholder fit="contain" />
       ) : (
         <Skeleton
           height={props?.height ?? props.width}

src/frontend/src/components/items/AttachmentLink.tsx

@@ -8,7 +8,9 @@ import {
   IconFileTypeXls,
   IconFileTypeZip
 } from '@tabler/icons-react';
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
+
+import { useLocalState } from '../../states/LocalState';
 
 /**
  * Return an icon based on the provided filename
@@ -58,10 +60,20 @@ export function AttachmentLink({
 }): ReactNode {
   let text = external ? attachment : attachment.split('/').pop();
 
+  const { host } = useLocalState.getState();
+
+  const url = useMemo(() => {
+    if (external) {
+      return attachment;
+    }
+
+    return `${host}${attachment}`;
+  }, [host, attachment, external]);
+
   return (
     <Group position="left" spacing="sm">
       {external ? <IconLink /> : attachmentIcon(attachment)}
-      <Anchor href={attachment} target="_blank" rel="noopener noreferrer">
+      <Anchor href={url} target="_blank" rel="noopener noreferrer">
         {text}
       </Anchor>
     </Group>

src/frontend/src/components/nav/Layout.tsx

@@ -1,17 +1,15 @@
 import { Container, Flex, Space } from '@mantine/core';
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
 
+import { isLoggedIn } from '../../functions/auth';
 import { InvenTreeStyle } from '../../globalStyle';
-import { useSessionState } from '../../states/SessionState';
 import { Footer } from './Footer';
 import { Header } from './Header';
 
 export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
-  const [token] = useSessionState((state) => [state.token]);
-
   const location = useLocation();
 
-  if (!token) {
+  if (!isLoggedIn()) {
     return (
       <Navigate to="/logged-in" state={{ redirectFrom: location.pathname }} />
     );