feat: sn-auth package

apps/sensenet/package.json

@@ -100,6 +100,8 @@
     "@sensenet/pickers-react": "^2.1.4",
     "@sensenet/query": "^2.1.3",
     "@sensenet/repository-events": "^2.1.3",
+    "@sensenet/sn-auth-react": "^1.0.0",
+    "@tiptap/pm": "^2.6.6",
     "autosuggest-highlight": "^3.3.4",
     "clsx": "1.2.1",
     "date-fns": "2.29.3",
@@ -115,5 +117,8 @@
     "semaphore-async-await": "^1.5.1",
     "uuid": "9.0.0"
   },
-  "typings": "./dist/index.d.ts"
+  "typings": "./dist/index.d.ts",
+  "resolutions": {
+    "@types/react": "^18.2.7"
+  }
 }

apps/sensenet/src/application-paths.ts

@@ -30,28 +30,28 @@ type RoutesWithContentBrowser = keyof Pick<
 type RoutesWithActionParam = keyof Pick<typeof PATHS, 'savedQueries' | 'localization' | 'configuration' | 'webhooks'>
 
 type Options =
-  | { path: (typeof PATHS)['events']['appPath']; params?: { eventGuid: string;[index: string]: string } }
+  | { path: (typeof PATHS)['events']['appPath']; params?: { eventGuid: string; [index: string]: string } }
   | {
-    path: (typeof PATHS)[RoutesWithContentBrowser]['appPath']
-    params: { browseType: (typeof BrowseType)[number]; action?: string;[index: string]: string | undefined }
-  }
+      path: (typeof PATHS)[RoutesWithContentBrowser]['appPath']
+      params: { browseType: (typeof BrowseType)[number]; action?: string; [index: string]: string | undefined }
+    }
   | {
-    path: (typeof PATHS)['custom']['appPath']
-    params: {
-      browseType: (typeof BrowseType)[number]
-      path: string
-      action?: string
-      [index: string]: string | undefined
+      path: (typeof PATHS)['custom']['appPath']
+      params: {
+        browseType: (typeof BrowseType)[number]
+        path: string
+        action?: string
+        [index: string]: string | undefined
+      }
     }
-  }
   | {
-    path: (typeof PATHS)[RoutesWithActionParam]['appPath']
-    params?: { action: string;[index: string]: string }
-  }
+      path: (typeof PATHS)[RoutesWithActionParam]['appPath']
+      params?: { action: string; [index: string]: string }
+    }
   | {
-    path: (typeof PATHS)['settings']['appPath']
-    params?: { submenu: SettingsItemType;[index: string]: string | SettingsItemType }
-  }
+      path: (typeof PATHS)['settings']['appPath']
+      params?: { submenu: SettingsItemType; [index: string]: string | SettingsItemType }
+    }
 
 export const resolvePathParams = ({ path, params }: Options) => {
   let currentPath: string = path

apps/sensenet/src/auth-config.ts

@@ -0,0 +1,9 @@
+export type AuthServerType = 'SNAuth' | 'IdentityServer'
+
+export interface AuthenticationConfig {
+  authType: AuthServerType
+}
+
+export const defaultAuthConfig: AuthenticationConfig = {
+  authType: 'SNAuth',
+}

apps/sensenet/src/components/UserAvatar.tsx

@@ -1,28 +1,29 @@
 import Avatar, { AvatarProps } from '@material-ui/core/Avatar'
 import { PathHelper } from '@sensenet/client-utils'
 import { User } from '@sensenet/default-content-types'
+import { User as SNUser } from '@sensenet/sn-auth-react'
 import React, { CSSProperties, FC } from 'react'
 
 export const UserAvatar: FC<{
-  user: User
+  user: User | SNUser | null | undefined
   avatarProps?: AvatarProps
   style?: CSSProperties
   repositoryUrl: string
 }> = (props) => {
-  const avatarUrl = props.user.Avatar?.Url
+  const avatarUrl = props.user?.Avatar?.Url
   if (avatarUrl) {
     return (
       <Avatar
         src={PathHelper.joinPaths(props.repositoryUrl, avatarUrl)}
-        alt={props.user.DisplayName}
+        alt={props.user?.DisplayName}
         {...props.avatarProps}
         style={props.style}
       />
     )
   }
   return (
     <Avatar style={props.style}>
-      {(props.user.DisplayName && props.user.DisplayName[0]) || (props.user.Name && props.user.Name[0]) || 'U'}
+      {(props.user?.DisplayName && props.user.DisplayName[0]) || (props.user?.Name && props.user.Name[0]) || 'U'}
     </Avatar>
   )
 }

apps/sensenet/src/components/app-providers.tsx

@@ -1,15 +1,17 @@
 import { InjectorContext, LoggerContextProvider } from '@sensenet/hooks-react'
 import React, { ReactNode } from 'react'
 import { BrowserRouter } from 'react-router-dom'
+import { defaultAuthConfig } from '../auth-config'
 import {
-  CurrentUserProvider,
   LocalizationProvider,
   PersonalSettingsContextProvider,
   RepositoryProvider,
   ResponsiveContextProvider,
   ThemeProvider,
 } from '../context'
+import { ISAuthProvider, SNAuthProvider } from '../context/auth-provider'
 import { ShareProvider } from '../context/ShareProvider'
+import { SnAuthRepositoryProvider } from '../context/sn-auth-repository-provider'
 import {
   CommandProviderManager,
   CustomActionCommandProvider,
@@ -40,15 +42,27 @@ export default function AppProviders({ children }: AppProvidersProps) {
           <LocalizationProvider>
             <BrowserRouter>
               <ThemeProvider>
-                <RepositoryProvider>
-                  <ShareProvider>
-                    <CurrentUserProvider>
-                      <ResponsiveContextProvider>
-                        <DialogProvider>{children}</DialogProvider>
-                      </ResponsiveContextProvider>
-                    </CurrentUserProvider>
-                  </ShareProvider>
-                </RepositoryProvider>
+                {defaultAuthConfig.authType === 'IdentityServer' ? (
+                  <RepositoryProvider>
+                    <ShareProvider>
+                      <ISAuthProvider>
+                        <ResponsiveContextProvider>
+                          <DialogProvider>{children}</DialogProvider>
+                        </ResponsiveContextProvider>
+                      </ISAuthProvider>
+                    </ShareProvider>
+                  </RepositoryProvider>
+                ) : (
+                  <SnAuthRepositoryProvider>
+                    <ShareProvider>
+                      <SNAuthProvider>
+                        <ResponsiveContextProvider>
+                          <DialogProvider>{children}</DialogProvider>
+                        </ResponsiveContextProvider>
+                      </SNAuthProvider>
+                    </ShareProvider>
+                  </SnAuthRepositoryProvider>
+                )}
               </ThemeProvider>
             </BrowserRouter>
           </LocalizationProvider>

apps/sensenet/src/components/appbar/desktop-nav-menu.tsx

@@ -9,7 +9,7 @@ import { clsx } from 'clsx'
 import React, { ChangeEvent, Dispatch, FunctionComponent, SetStateAction, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { PATHS, resolvePathParams } from '../../application-paths'
-import { useCurrentUser } from '../../context/current-user-provider'
+import { useAuth } from '../../context/auth-provider'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization, usePersonalSettings } from '../../hooks'
 import { pathWithQueryParams, PersonalSettings } from '../../services'
@@ -83,7 +83,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
   const globalClasses = useGlobalStyles()
   const theme = useTheme()
   const service = injector.getInstance(PersonalSettings)
-  const currentUser = useCurrentUser()
+  const { user } = useAuth()
   const repo = useRepository()
   const localization = useLocalization()
   const { openDialog } = useDialog()
@@ -134,7 +134,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
           <TuneOutlined />
         </IconButton>
         <UserAvatar
-          user={currentUser}
+          user={user!}
           repositoryUrl={repo.configuration.repositoryUrl}
           style={{
             height: '35px',
@@ -167,7 +167,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
                         backgroundColor: theme.palette.primary.main,
                         color: globals.common.headerText,
                       }}
-                      user={currentUser}
+                      user={user}
                       repositoryUrl={repo.configuration.repositoryUrl}
                     />
                   </ListItemIcon>
@@ -179,7 +179,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
                         marginLeft: '20px',
                         color: theme.palette.type === 'light' ? globals.light.textColor : globals.dark.textColor,
                       },
-                      title: `Full-name: ${currentUser.DisplayName}` || currentUser.Name,
+                      title: `Full-name: ${user?.DisplayName}` || user?.Name,
                     }}
                     secondaryTypographyProps={{
                       style: {
@@ -188,10 +188,10 @@ export const DesktopNavMenu: FunctionComponent = () => {
                         marginLeft: '20px',
                         color: theme.palette.type === 'light' ? globals.light.textColor : globals.dark.textColor,
                       },
-                      title: `Login-name: ${currentUser.LoginName}` || currentUser.Name,
+                      title: `Login-name: ${user?.LoginName}` || user?.Name,
                     }}
-                    primary={`${currentUser.DisplayName || currentUser.Name}`}
-                    secondary={`${currentUser.LoginName || currentUser.Name}`}
+                    primary={`${user?.DisplayName || user?.Name}`}
+                    secondary={`${user?.LoginName || user?.Name}`}
                   />
                 </MenuItem>
                 <MenuItem className={classes.userMenuItem}>
@@ -203,7 +203,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
                         params: { browseType: 'explorer', action: 'edit' },
                       }),
                       newParams: {
-                        content: currentUser.Path,
+                        content: user?.Path,
                         needRoot: 'false',
                       },
                     })}>

apps/sensenet/src/components/dashboard/index.tsx

@@ -2,7 +2,7 @@ import { Container, createStyles, makeStyles, Typography } from '@material-ui/co
 import { Group } from '@sensenet/default-content-types'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
 import React, { useEffect, useState } from 'react'
-import { useCurrentUser } from '../../context'
+import { useAuth } from '../../context/auth-provider'
 import { useLocalization } from '../../hooks'
 import { LearnMoreWidget } from './learn-more-widget'
 import { SubscriptionWidget } from './subscription-widget'
@@ -44,7 +44,7 @@ const Dashboard = () => {
   const classes = useStyles()
   const repository = useRepository()
   const localization = useLocalization().dashboard
-  const currentUser = useCurrentUser()
+  const { user } = useAuth()
   const [data, setData] = useState<DashboardData>()
   const logger = useLogger('Dashboard')
   const [isAdmin, setIsAdmin] = useState(false)
@@ -70,7 +70,7 @@ const Dashboard = () => {
     ;(async () => {
       try {
         const result = await repository.load<any>({
-          idOrPath: currentUser.Path,
+          idOrPath: user!.Path,
           oDataOptions: {
             select: ['AllRoles'] as any,
             expand: ['AllRoles'] as any,
@@ -87,7 +87,7 @@ const Dashboard = () => {
         }
       }
     })()
-  }, [currentUser, logger, repository])
+  }, [user, logger, repository])
 
   if (!data) return null
 

apps/sensenet/src/components/dialogs/change-password.tsx

@@ -2,7 +2,7 @@ import { Button, DialogActions, DialogContent } from '@material-ui/core'
 import TextField from '@material-ui/core/TextField'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
 import React, { useState } from 'react'
-import { useCurrentUser } from '../../context'
+import { useAuth } from '../../context/auth-provider'
 import { useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { DialogTitle, useDialog } from '.'
@@ -15,7 +15,7 @@ export function ChangePasswordDialog() {
   const logger = useLogger('change-password')
   const globalClasses = useGlobalStyles()
   const repo = useRepository()
-  const currentUser = useCurrentUser()
+  const { user } = useAuth()
   const [passwordFields, setPasswordFields] = useState<{
     [K in PasswordFieldKeys]?: string
   }>({
@@ -32,7 +32,7 @@ export function ChangePasswordDialog() {
 
     try {
       await repo.executeAction({
-        idOrPath: currentUser.Path,
+        idOrPath: user!.Path,
         name: 'ChangePassword',
         method: 'POST',
         body: {

apps/sensenet/src/components/dialogs/logout.tsx

@@ -1,17 +1,16 @@
 import { Button, DialogActions, DialogContent, DialogContentText } from '@material-ui/core'
-import { useOidcAuthentication } from '@sensenet/authentication-oidc-react'
 import { useRepository } from '@sensenet/hooks-react'
 import React from 'react'
-import { authConfigKey, useCurrentUser } from '../../context'
+import { authConfigKey } from '../../context'
+import { useAuth } from '../../context/auth-provider'
 import { useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { Icon } from '../Icon'
 import { DialogTitle, useDialog } from '.'
 
 export function LogoutDialog() {
   const { closeLastDialog } = useDialog()
-  const currentUser = useCurrentUser()
-  const { logout } = useOidcAuthentication()
+  const { user, logout } = useAuth()
   const repository = useRepository()
   const localization = useLocalization().logout
   const globalClasses = useGlobalStyles()
@@ -25,7 +24,7 @@ export function LogoutDialog() {
               margin: '0 1em 0 0',
               transition: 'filter linear 1s, opacity linear 1.5s',
             }}
-            item={currentUser}
+            item={user}
           />
           {localization.logoutDialogTitle}
         </div>
@@ -35,7 +34,7 @@ export function LogoutDialog() {
           <DialogContentText style={{ wordBreak: 'break-word' }}>
             {localization.logoutConfirmText(
               repository.configuration.repositoryUrl,
-              currentUser?.DisplayName ?? currentUser?.Name ?? 'Visitor',
+              user?.DisplayName ?? user?.Name ?? 'Visitor',
             )}
           </DialogContentText>
         </DialogContent>

apps/sensenet/src/components/settings/api-keys-tab.tsx

@@ -1,22 +1,25 @@
 import { Tab as MuiTab, withStyles } from '@material-ui/core'
 
-export const Tab = withStyles((theme) => ({
-  root: {
-    textTransform: 'none',
-    minWidth: 72,
-    fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(4),
-    '&:hover': {
-      color: theme.palette.primary.main,
-      opacity: 1,
-    },
-    '&$selected': {
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium,
-    },
-    '&:focus': {
-      color: theme.palette.primary.main,
-    },
-  },
-  selected: {},
-}))(MuiTab)
+export const Tab = withStyles(
+  (theme) =>
+    ({
+      root: {
+        textTransform: 'none',
+        minWidth: 72,
+        fontWeight: theme.typography.fontWeightRegular,
+        marginRight: theme.spacing(4),
+        '&:hover': {
+          color: theme.palette.primary.main,
+          opacity: 1,
+        },
+        '&$selected': {
+          color: theme.palette.primary.main,
+          fontWeight: theme.typography.fontWeightMedium,
+        },
+        '&:focus': {
+          color: theme.palette.primary.main,
+        },
+      },
+      selected: {},
+    } as any),
+)(MuiTab)