BA-1430: dependencies update (#97)

Author: anicioalexandre

apps/docs/pages/auth/index.tsx

@@ -1,5 +1,5 @@
 import { axios, useLogin } from '@baseapp-frontend/core'
-import { ButtonWithLoading, PasswordField, TextField } from '@baseapp-frontend/design-system-mui'
+import { ButtonWithLoading } from '@baseapp-frontend/design-system-mui'
 
 import { Divider, useTheme } from '@mui/material'
 import MockAdapter from 'axios-mock-adapter'
@@ -43,8 +43,6 @@ export default function Auth() {
         onSubmit={mockForSuccessAndLogIn}
         style={{ display: 'flex', flexDirection: 'column', maxWidth: '300px' }}
       >
-        <TextField name="email" label="Email" form={form} sx={{ marginBottom: '14px' }} />
-        <PasswordField name="password" label="Password" form={form} sx={{ marginBottom: '14px' }} />
         <div style={{ display: 'flex' }}>
           <ButtonWithLoading
             variant="contained"

apps/docs/pages/components/index.tsx

@@ -1,11 +1,6 @@
 import { useState } from 'react'
 
-import {
-  ButtonWithLoading,
-  CheckboxField,
-  ImageUploader,
-  PasswordField,
-} from '@baseapp-frontend/design-system-mui'
+import { ButtonWithLoading, ImageUploader } from '@baseapp-frontend/design-system-mui'
 
 import { Divider, useTheme } from '@mui/material'
 
@@ -30,17 +25,6 @@ export default function Docs() {
 
       <Divider style={{ margin: theme.spacing(2, 0) }} />
 
-      <div style={{ width: theme.spacing(48) }}>
-        <h2>{`<PasswordField />`}</h2>
-        <PasswordField name="password" />
-
-        <PasswordField name="password" helperText="Type your password." />
-
-        <PasswordField name="password" error helperText="Incorrect entry." />
-      </div>
-
-      <Divider style={{ margin: theme.spacing(2, 0) }} />
-
       <h2>{`<ImageUploader />`}</h2>
       <div style={{ width: theme.spacing(48) }}>
         <ImageUploader
@@ -52,10 +36,6 @@ export default function Docs() {
           buttonRemoveLabel="Remove"
         />
       </div>
-
-      <Divider style={{ margin: theme.spacing(2, 0) }} />
-
-      <CheckboxField name="checkbox" label="Checkbox" />
     </div>
   )
 }

apps/storybook-app/components/Checkbox/index.tsx

@@ -8,7 +8,7 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "turbo run build",
+    "build": "turbo run build --filter=docs^...",
     "clean": "turbo run clean && rm -rf node_modules && rm -rf ./apps/*/node_modules && rm -rf ./packages/*/node_modules && rm -rf",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
@@ -26,11 +26,11 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
     "prettier": "^2.8.8",
-    "turbo": "latest"
+    "turbo": "^2.0.3"
   },
   "engines": {
     "npm": ">=7.0.0",
-    "node": ">=14.0.0"
+    "node": ">=18.0.0"
   },
   "lint-staged": {
     "apps/**/*.{js,ts,jsx,tsx}": [

apps/storybook-app/components/Checkbox/stories.tsx

@@ -1,5 +1,21 @@
 # @baseapp-frontend/authentication
 
+## 3.0.0
+
+### Major Changes
+
+- Migrate to React Query v5. This includes adapting the code due to breaking changes of the library.
+- Update several dependencies.
+- Remove deprecated `usePreAuth` hook. We should now pre authenticate on the server side using the `preAuthenticate` function.
+- Renamed a couple of type interfaces, mainly removing the `I` prefix from it.
+- Move `react`, `@baseapp-frontend/provider` and `@baseapp-frontend/utils` to `peerDependencies` for better compatibility between the packages and the consumer app.
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/provider@2.0.0
+  - @baseapp-frontend/utils@2.4.0
+
 ## 2.2.0
 
 ### Minor Changes

apps/storybook-app/components/PasswordField/index.tsx

@@ -15,6 +15,3 @@ export type * from './useResetPassword/types'
 
 export { default as useSignUp } from './useSignUp'
 export type * from './useSignUp/types'
-
-export { default as usePreAuth } from './usePreAuth'
-export type * from './usePreAuth/types'

apps/storybook-app/components/PasswordField/stories.tsx

@@ -1,13 +1,13 @@
 import { baseAppFetch } from '@baseapp-frontend/utils/functions/fetch/baseAppFetch'
-import type { IJWTResponse } from '@baseapp-frontend/utils/types/jwt'
+import type { JWTResponse } from '@baseapp-frontend/utils/types/jwt'
 
 const preAuthenticateJWT = async (token?: string) => {
   try {
     if (!token) {
       throw new Error('No token provided.')
     }
 
-    const response = await baseAppFetch<IJWTResponse>('/auth/pre-auth/jwt', {
+    const response = await baseAppFetch<JWTResponse>('/auth/pre-auth/jwt', {
       method: 'POST',
       body: { token },
     })

apps/storybook-app/components/TextField/index.tsx

@@ -2,14 +2,14 @@ import { ZOD_MESSAGE } from '@baseapp-frontend/utils'
 
 import { z } from 'zod'
 
-import { ILoginRequest } from '../../../types/auth'
+import { LoginRequest } from '../../../types/auth'
 
 export const DEFAULT_VALIDATION_SCHEMA = z.object({
-  email: z.string().nonempty(ZOD_MESSAGE.required).email(ZOD_MESSAGE.email),
-  password: z.string().nonempty(ZOD_MESSAGE.required),
+  email: z.string().min(1, ZOD_MESSAGE.required).email(ZOD_MESSAGE.email),
+  password: z.string().min(1, ZOD_MESSAGE.required),
 })
 
-export const DEFAULT_INITIAL_VALUES: ILoginRequest = {
+export const DEFAULT_INITIAL_VALUES: LoginRequest = {
   email: '',
   password: '',
 }

apps/storybook-app/components/TextField/stories.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 
 import {
@@ -16,19 +18,19 @@ import AuthApi from '../../../services/auth'
 import MfaApi from '../../../services/mfa'
 import { USER_API_KEY } from '../../../services/user'
 import {
-  ILoginJWTResponse,
-  ILoginMfaRequest,
-  ILoginRequest,
-  ILoginSimpleTokenResponse,
+  LoginJWTResponse,
+  LoginMfaRequest,
+  LoginRequest,
+  LoginSimpleTokenResponse,
 } from '../../../types/auth'
 import { isJWTResponse, isLoginMfaResponse } from '../../../utils/login'
 import { CODE_VALIDATION_INITIAL_VALUES, CODE_VALIDATION_SCHEMA } from '../../mfa/constants'
 import { useSimpleTokenUser } from '../../user'
 import { DEFAULT_INITIAL_VALUES, DEFAULT_VALIDATION_SCHEMA } from './constants'
-import { IUseLogin } from './types'
+import { UseLoginOptions } from './types'
 
 const jwtSuccessHandler = (
-  response: ILoginJWTResponse,
+  response: LoginJWTResponse,
   cookieName: string,
   refreshCookieName: string,
 ) => {
@@ -41,7 +43,7 @@ const jwtSuccessHandler = (
 }
 
 const simpleTokenSuccessHandler = (
-  response: ILoginSimpleTokenResponse,
+  response: LoginSimpleTokenResponse,
   cookieName: string,
   onSuccess: () => void,
 ) => {
@@ -62,21 +64,21 @@ const useLogin = ({
   refreshCookieName = REFRESH_COOKIE_NAME,
   ApiClass = AuthApi,
   enableFormApiErrors = true,
-}: IUseLogin = {}) => {
+}: UseLoginOptions = {}) => {
   const queryClient = useQueryClient()
   const [mfaEphemeralToken, setMfaEphemeralToken] = useState<string | null>(null)
   const { refetch: refetchUser } = useSimpleTokenUser({ options: { enabled: false } })
 
   /*
    * Handles login success  with the auth token in response
    */
-  async function handleLoginSuccess(response: ILoginJWTResponse | ILoginSimpleTokenResponse) {
+  async function handleLoginSuccess(response: LoginJWTResponse | LoginSimpleTokenResponse) {
     if (isJWTResponse(tokenType, response)) {
       jwtSuccessHandler(response, cookieName, refreshCookieName)
     } else {
       simpleTokenSuccessHandler(response, cookieName, () => {
         // by invalidating the cache we force a reload of /v1/users/me and the state used by useUser hook
-        queryClient.invalidateQueries(USER_API_KEY.getUser())
+        queryClient.invalidateQueries({ queryKey: USER_API_KEY.getUser() })
         refetchUser()
       })
     }
@@ -89,7 +91,7 @@ const useLogin = ({
   })
 
   const mutation = useMutation({
-    mutationFn: (data: ILoginRequest) => ApiClass.login(data),
+    mutationFn: (data: LoginRequest) => ApiClass.login(data),
     ...loginOptions, // needs to be placed bellow all overridable options
     onError: (err, variables, context) => {
       loginOptions?.onError?.(err, variables, context)
@@ -113,7 +115,8 @@ const useLogin = ({
     mode: 'onBlur',
   })
 
-  const mfaMutation = useMutation((data: ILoginMfaRequest) => MfaApi.loginStep2(data), {
+  const mfaMutation = useMutation({
+    mutationFn: (data: LoginMfaRequest) => MfaApi.loginStep2(data),
     ...mfaOptions, // needs to be placed bellow all overridable options
     onError: (err, variables, context) => {
       mfaOptions?.onError?.(err, variables, context)
@@ -122,6 +125,7 @@ const useLogin = ({
       }
     },
     onSuccess: (response, variables, context) => {
+      // @ts-ignore BA-1206: fix typing
       handleLoginSuccess(response)
       mfaOptions?.onSuccess?.(response, variables, context)
     },

package.json

@@ -4,15 +4,20 @@ import { UseMutationOptions } from '@tanstack/react-query'
 import { z } from 'zod'
 
 import AuthApi from '../../../services/auth'
-import { ICookieName, ILoginMfaRequest, ILoginRequest, LoginResponse } from '../../../types/auth'
+import {
+  CustomCookieNames,
+  LoginMfaRequest,
+  LoginRequest,
+  LoginResponse,
+} from '../../../types/auth'
 
 type ApiClass = Pick<typeof AuthApi, 'login'>
 
-export interface IUseLogin extends ICookieName {
+export interface UseLoginOptions extends CustomCookieNames {
   validationSchema?: z.ZodObject<z.ZodRawShape>
-  defaultValues?: ILoginRequest
-  loginOptions?: UseMutationOptions<LoginResponse, unknown, ILoginRequest, any>
-  mfaOptions?: UseMutationOptions<LoginResponse, unknown, ILoginMfaRequest, any>
+  defaultValues?: LoginRequest
+  loginOptions?: UseMutationOptions<LoginResponse, unknown, LoginRequest, any>
+  mfaOptions?: UseMutationOptions<LoginResponse, unknown, LoginMfaRequest, any>
   tokenType?: TokenTypes
   ApiClass?: ApiClass
   enableFormApiErrors?: boolean

packages/authentication/CHANGELOG.md

@@ -27,8 +27,8 @@ describe('useLogout hook', () => {
     result.current.logout()
 
     expect(Cookies.remove).toHaveBeenCalled()
-    expect(mockResetQueries).toHaveBeenCalledWith(USER_API_KEY.getUser())
-    expect(mockResetQueries).toHaveBeenCalledWith(MFA_API_KEY.default)
+    expect(mockResetQueries).toHaveBeenCalledWith({ queryKey: USER_API_KEY.getUser() })
+    expect(mockResetQueries).toHaveBeenCalledWith({ queryKey: MFA_API_KEY.default })
   })
 
   test('should call the onLogout callback if provided', async () => {

packages/authentication/modules/access/index.ts

@@ -10,21 +10,21 @@ import Cookies from 'js-cookie'
 
 import { MFA_API_KEY } from '../../../services/mfa'
 import { USER_API_KEY } from '../../../services/user'
-import { ILogoutOptions } from './types'
+import { UseLogoutOptions } from './types'
 
 const useLogout = ({
   cookieName = ACCESS_COOKIE_NAME,
   refreshCookieName = REFRESH_COOKIE_NAME,
   onLogout,
   emitLogoutEvent = true,
-}: ILogoutOptions = {}) => {
+}: UseLogoutOptions = {}) => {
   const queryClient = useQueryClient()
 
   const logout = () => {
     Cookies.remove(cookieName)
     Cookies.remove(refreshCookieName)
-    queryClient.resetQueries(USER_API_KEY.getUser())
-    queryClient.resetQueries(MFA_API_KEY.default)
+    queryClient.resetQueries({ queryKey: USER_API_KEY.getUser() })
+    queryClient.resetQueries({ queryKey: MFA_API_KEY.default })
     onLogout?.()
     if (emitLogoutEvent) {
       eventEmitter.emit(LOGOUT_EVENT)

packages/authentication/modules/access/preAuthenticateJWT/index.ts

@@ -1,6 +1,6 @@
-import { ICookieName } from '../../../types/auth'
+import { CustomCookieNames } from '../../../types/auth'
 
-export interface ILogoutOptions extends ICookieName {
+export interface UseLogoutOptions extends CustomCookieNames {
   onLogout?: () => void
   emitLogoutEvent?: boolean
 }