feat: add server auth

README.md

@@ -43,4 +43,4 @@ _Link to the backend repo:_ https://github.com/chertik77/TaskPro-backend
 
 ## Languages and Tools
 
-![Languages and Tools](https://skills.syvixor.com/api/icons?i=ts,react,dndkit,radixui,tanstack,stanjs,axios,datefns,reactdatepicker,reacthookform,valibot,tailwind,tailwindmerge,commitlint,eslint,prettier,githubactions,fsd,yarn,vercel,vite,vscode,figma&perline=8)
+![Languages and Tools](https://skills.syvixor.com/api/icons?i=ts,react,dndkit,radixui,tanstack,axios,datefns,reactdatepicker,reacthookform,valibot,tailwind,tailwindmerge,commitlint,eslint,prettier,githubactions,fsd,yarn,vercel,vite,vscode,figma&perline=8)

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.85.0",
+    "@tanstack/react-query-devtools": "^5.85.3",
     "@tanstack/react-router": "1.131.8",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",

src/app/providers/RouteProvider.tsx

@@ -1,16 +1,19 @@
-import { RouterProvider as TanStackRouterProvider } from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { RouterProvider as TanstackRouterProvider } from '@tanstack/react-router'
 
-import { useSessionStore } from '@/entities/session'
+import { sessionService } from '@/entities/session'
+import { userQueries } from '@/entities/user'
 
+import { attachInternalApiMemoryStorage } from '@/shared/api'
 import { router } from '@/shared/lib'
 
 export const RouterProvider = () => {
-  const session = useSessionStore()
+  const queryClient = useQueryClient()
 
-  return (
-    <TanStackRouterProvider
-      router={router}
-      context={{ session }}
-    />
-  )
+  attachInternalApiMemoryStorage({
+    refreshTokens: sessionService.refreshTokens,
+    logout: () => queryClient.resetQueries({ queryKey: userQueries.current() })
+  })
+
+  return <TanstackRouterProvider router={router} />
 }

src/app/providers/ToastProvider.tsx

@@ -1,23 +1,19 @@
 import { Toaster } from 'sonner'
 
-import { useSessionStore } from '@/entities/session'
-
 import { useTabletAndBelowMediaQuery } from '@/shared/lib'
 
 export const ToastProvider = () => {
-  const {
-    user: { theme }
-  } = useSessionStore()
-
   const isTabletAndBelow = useTabletAndBelowMediaQuery()
 
+  // const { data: user } = useQuery(userQueries.me())
+
   return (
     <Toaster
       position={isTabletAndBelow ? 'top-center' : 'bottom-right'}
       richColors
       closeButton
       duration={5000}
-      theme={theme === 'dark' ? 'dark' : 'light'}
+      // theme={user?.theme === 'dark' ? 'dark' : 'light'}
       className='text-balance'
     />
   )

src/app/routes/__root.tsx

@@ -1,35 +1,38 @@
-import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import {
+  createRootRouteWithContext,
+  Outlet,
+  redirect
+} from '@tanstack/react-router'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/react'
 
-import { sessionService, useSessionStore } from '@/entities/session'
-
-import { attachInternalApiMemoryStorage } from '@/shared/api'
+import { userQueries } from '@/entities/user'
 
 type RouterContext = {
-  session: ReturnType<typeof useSessionStore>
+  queryClient: QueryClient
 }
 
-const RootRoute = () => {
-  const { tokens, setTokens, logout } = useSessionStore()
-
-  attachInternalApiMemoryStorage({
-    accessToken: tokens.accessToken,
-    refreshToken: tokens.refreshToken,
-    refreshTokens: sessionService.refreshTokens,
-    setTokens,
-    logout
-  })
-
-  return (
-    <>
-      <Analytics />
-      <SpeedInsights />
-      <Outlet />
-    </>
-  )
-}
+const RootRoute = () => (
+  <>
+    <Analytics />
+    <SpeedInsights />
+    <ReactQueryDevtools />
+    <Outlet />
+  </>
+)
 
 export const Route = createRootRouteWithContext<RouterContext>()({
+  beforeLoad: async ({ context: { queryClient } }) => {
+    try {
+      const user = await queryClient.fetchQuery(userQueries.me())
+
+      if (user) throw redirect({ to: '/dashboard' })
+    } catch {
+      return
+    }
+  },
   component: RootRoute
 })

src/app/routes/auth/_auth-layout.tsx

@@ -1,10 +1,14 @@
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
 
+import { userQueries } from '@/entities/user'
+
 import { AuthNavigation } from '@/widgets/auth-navigation'
 
 export const Route = createFileRoute('/auth/_auth-layout')({
-  beforeLoad: ({ context: { session } }) => {
-    if (session.isAuthenticated) throw redirect({ to: '/dashboard' })
+  beforeLoad: ({ context: { queryClient } }) => {
+    const isAuthenticated = queryClient.getQueryData(userQueries.current())
+
+    if (isAuthenticated) throw redirect({ to: '/dashboard' })
   },
   component: () => (
     <div className='bg-soft-green flex h-dvh items-center justify-center'>

src/app/routes/dashboard/layout.tsx

@@ -1,9 +1,13 @@
 import { DashboardPage } from '@/pages/dashboard'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
+import { userQueries } from '@/entities/user'
+
 export const Route = createFileRoute('/dashboard')({
-  beforeLoad: ({ context: { session } }) => {
-    if (!session.isAuthenticated) throw redirect({ to: '/' })
+  beforeLoad: ({ context: { queryClient } }) => {
+    const isAuthenticated = queryClient.getQueryData(userQueries.current())
+
+    if (!isAuthenticated) throw redirect({ to: '/' })
   },
   component: DashboardPage
 })

src/app/routes/index.tsx

@@ -1,9 +1,13 @@
 import { WelcomePage } from '@/pages/welcome'
 import { createFileRoute, redirect } from '@tanstack/react-router'
 
+import { userQueries } from '@/entities/user'
+
 export const Route = createFileRoute('/')({
-  beforeLoad: ({ context: { session } }) => {
-    if (session.isAuthenticated) throw redirect({ to: '/dashboard' })
+  beforeLoad: ({ context: { queryClient } }) => {
+    const isAuthenticated = queryClient.getQueryData(userQueries.current())
+
+    if (isAuthenticated) throw redirect({ to: '/dashboard' })
   },
   component: WelcomePage
 })

src/entities/board/ui/FormBgImageSelector.tsx

@@ -2,7 +2,7 @@ import type { ControllerRenderProps, FieldValues } from 'react-hook-form'
 
 import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group'
 
-import { useSessionStore } from '@/entities/session/@x/board'
+import { useMe } from '@/entities/user/@x/board'
 
 import { FormControl, FormItem } from '@/shared/ui'
 
@@ -12,9 +12,7 @@ export const FormBgImageSelector = <T extends FieldValues>({
   value,
   onChange
 }: ControllerRenderProps<T>) => {
-  const {
-    user: { theme }
-  } = useSessionStore()
+  const { theme } = useMe()
 
   return (
     <FormControl>

src/entities/session/api/contracts.ts

@@ -16,19 +16,6 @@ export const InitiateGoogleResponseDtoSchema = v.object({
   redirectUrl: v.pipe(v.string(), v.url())
 })
 
-export const GoogleSigninDtoSchema = v.object({
-  code: v.pipe(v.string(), v.minLength(1)),
-  state: v.pipe(v.string(), v.minLength(1))
-})
-
-export const RefreshTokenDtoSchema = v.object({
-  refreshToken: v.pipe(v.string(), v.minLength(1))
-})
-
 export const SessionResponseDtoSchema = v.object({
-  accessToken: v.string(),
-  refreshToken: v.string(),
   user: v.lazy(() => UserDtoSchema)
 })
-
-export const TokensDtoSchema = v.omit(SessionResponseDtoSchema, ['user'])

src/entities/session/api/endpoints.ts

@@ -6,7 +6,6 @@ class SessionApiEndpoints {
   refresh = `${this.baseUrl}/refresh`
   logout = `${this.baseUrl}/logout`
   googleInitiate = `${this.baseUrl}/google/initiate`
-  googleCallback = `${this.baseUrl}/google/callback`
 }
 
 export const sessionApiEndpoints = new SessionApiEndpoints()

src/entities/session/api/service.ts

@@ -1,22 +1,14 @@
-import type {
-  GoogleSigninDto,
-  RefreshTokenDto,
-  SigninDto,
-  SignupDto
-} from './types'
+import type { SigninDto, SignupDto } from './types'
 
 import { parse } from 'valibot'
 
 import { axiosInstance } from '@/shared/api'
 
 import {
-  GoogleSigninDtoSchema,
   InitiateGoogleResponseDtoSchema,
-  RefreshTokenDtoSchema,
   SessionResponseDtoSchema,
   SigninDtoSchema,
-  SignupDtoSchema,
-  TokensDtoSchema
+  SignupDtoSchema
 } from './contracts'
 import { sessionApiEndpoints } from './endpoints'
 
@@ -49,37 +41,17 @@ export const sessionService = {
   },
 
   async initiateGoogleSignin() {
-    const response = await axiosInstance.get(sessionApiEndpoints.googleInitiate)
-
-    const parsedData = parse(InitiateGoogleResponseDtoSchema, response.data)
-
-    return parsedData
-  },
-
-  async signinWithGoogle(data: GoogleSigninDto) {
-    const googleSigninDto = parse(GoogleSigninDtoSchema, data)
-
     const response = await axiosInstance.post(
-      sessionApiEndpoints.googleCallback,
-      googleSigninDto
+      sessionApiEndpoints.googleInitiate
     )
 
-    const parsedData = parse(SessionResponseDtoSchema, response.data)
+    const parsedData = parse(InitiateGoogleResponseDtoSchema, response.data)
 
     return parsedData
   },
 
-  async refreshTokens(data: RefreshTokenDto) {
-    const refreshTokenDto = parse(RefreshTokenDtoSchema, data)
-
-    const response = await axiosInstance.post(
-      sessionApiEndpoints.refresh,
-      refreshTokenDto
-    )
-
-    const parsedData = parse(TokensDtoSchema, response.data)
-
-    return parsedData
+  async refreshTokens() {
+    await axiosInstance.post(sessionApiEndpoints.refresh)
   },
 
   async logout() {

src/entities/session/api/types.ts

@@ -1,20 +1,14 @@
 import type { InferOutput } from 'valibot'
 import type {
-  GoogleSigninDtoSchema,
   InitiateGoogleResponseDtoSchema,
-  RefreshTokenDtoSchema,
   SessionResponseDtoSchema,
   SigninDtoSchema,
-  SignupDtoSchema,
-  TokensDtoSchema
+  SignupDtoSchema
 } from './contracts'
 
 export type SessionResponseDto = InferOutput<typeof SessionResponseDtoSchema>
-export type TokensDto = InferOutput<typeof TokensDtoSchema>
 export type SigninDto = InferOutput<typeof SigninDtoSchema>
 export type SignupDto = InferOutput<typeof SignupDtoSchema>
-export type GoogleSigninDto = InferOutput<typeof GoogleSigninDtoSchema>
-export type RefreshTokenDto = InferOutput<typeof RefreshTokenDtoSchema>
 export type InitiateGoogleResponseDto = InferOutput<
   typeof InitiateGoogleResponseDtoSchema
 >

src/entities/session/index.ts

@@ -1,6 +1,3 @@
-export * as SessionTypes from './model/types'
 export * as SessionDtoTypes from './api/types'
-export * as SessionContracts from './model/contracts'
 export * as SessionDtoContracts from './api/contracts'
 export { sessionService } from './api/service'
-export { useSessionStore, getSessionStore, sessionActions } from './model/store'

src/entities/user/@x/board.ts

@@ -0,0 +1 @@
+export { useMe } from '../model/useMe'