Auth as entity

[chertik77]

Can auth be an entity?

I have auth service -

export const authService = {
  async signup(data: SignupDto) {
    const signupDto = parse(SignupDtoSchema, data)

    const response = await axiosInstance.post(
      authApiEndpoints.signup,
      signupDto
    )

    const parsedData = parse(AuthResponseDtoSchema, response.data)

    return parsedData
  },

  async signin(data: SigninDto) {
    const signinDto = parse(SigninDtoSchema, data)

    const response = await axiosInstance.post(
      authApiEndpoints.signin,
      signinDto,
      { skipAuthRefresh: true }
    )

    const parsedData = parse(AuthResponseDtoSchema, response.data)

    return parsedData
  },

  async signinWithGoogle(data: GoogleSigninDto) {
    const googleSigninDto = parse(GoogleSigninDtoSchema, data)

    const response = await axiosInstance.post(
      authApiEndpoints.google,
      googleSigninDto
    )

    const parsedData = parse(AuthResponseDtoSchema, response.data)

    return parsedData
  },

  async getTokens(data: RefreshTokenDto) {
    const refreshTokenDto = parse(RefreshTokenDtoSchema, data)

    const response = await axiosInstance.post(
      authApiEndpoints.tokens,
      refreshTokenDto
    )

    const parsedData = parse(TokensDtoSchema, response.data)

    return parsedData
  },

  async logout() {
    await axiosInstance.post(authApiEndpoints.logout)
  }
}

It's located in shared/api folder, because my axios instance depends on auth service to retrieve the token. So it's impossible to move auth into entities and then import into shared. However, i also have auth store, and it's located to shared, but is it a domain specific feature? I struggle to handle this correctly due to complexity of my project.

export const {
  useStore: useUserStore,
  getState: getUserStore,
  actions: userActions
} = createStore(
  {
    user: storage<UserSchema>({
      id: '',
      name: '',
      email: '',
      avatar: '',
      theme: DEFAULT_THEME
    }),
    tokens: storage({ accessToken: '', refreshToken: '' }),
    get isAuthenticated() {
      return [this.tokens.accessToken, this.tokens.refreshToken].every(Boolean)
    }
  },
  ({ actions, reset }) => ({
    authenticate: ({ user, ...tokens }: AuthDtoTypes.AuthResponseDto) => {
      actions.setUser(user)
      actions.setTokens(tokens)
    },
    getCurrentUser: async () => {
      actions.setUser(await userService.getCurrentUser())
    },
    logout: () => {
      reset()
      localStorage.clear()
    }
  })
)

My store also uses userService to get current user, so i need to move user api to shared folder again, and same goes with other entities, so my shared folder holds domain specific apis, constants, etc. I'm lost in trying to find the right way to handle that.

And also if i moves user and auth to entites, store needs AuthDto types, so i would need to make cross imports just for one type?

[noveogroup-amorgunov]

Hey!

Can auth be an entity?

You can see my pet project nukeapp with entity/session to work with auth. So a user session can be an entity.

But It's okay to move logic with access token to shared/api (and store access/refresh tokens inside this segment). Read more in documentation guide https://feature-sliced.github.io/documentation/docs/guides/examples/auth

I think you can use any of these approaches.

It's located in shared/api folder, because my axios instance depends on auth service to retrieve the token.

You can see PR noveogroup-amorgunov/nukeapp#37 (not merged yet), where shared/api use access token which stored in entity/session. I used dependency inversion principle here.

However, i also have auth store, and it's located to shared, but is it a domain specific feature?

Auth store can be considered an infrastructure service (not domain specific feature) that is needed to work with the shared/api. It is the part about working with API, not with the business logic of the application. For example, if you connect another API (for example shared/api2), tokens for this API can be stored inside the segment. But I like move auth service (auth store) move from shared/api for more collocation.

And also if i moves user and auth to entites, store needs AuthDto types, so i would need to make cross imports just for one type?

You can use @x to resolve cross-import OR move DTO type inside shared/api. I think if we have common dto object which used in many entities It should be stored in shared/api.

[chertik77]

Hey, thanks for your response. Speaking of attaching token to be used inside of shared api, i also have a refresh functionality , which uses auth service directly, and store actions.

And i also refactored auth to @/entities/session

Do u have ideas how i can handle it?

Here is an example:

  const {
          tokens: { refreshToken }
        } = getSessionStore()

        const tokens = await sessionService.getTokens({ refreshToken })

        sessionActions.setTokens(tokens)

        return axiosInstance(originalRequest)

[noveogroup-amorgunov]

Could you please provide more details for your example? I don't understand the problem.

In base case, refresh token logic could be placed in shared/api. Also, you need some mechanism to provide updated tokens to entity/session storage. This is also implemented through dependency inversion.

For example, in redux-toolkit you can trigger some event from shared/api and listen it in entity/session like:

// ~/shared/api/request.ts

export async function request(...) {
  try {} catch (err) {
    // ...

    // refresh tokens ...
   
    // dispatch event about new tokens
    dispatch(apiAccessTokenIsUpdatedEvent(newTokens)) // event is delcare in `shared/api/*`
  }
}

// ~/entities/session/model/slice.ts

import { apiAccessTokenIsUpdatedEvent } from '~/shared/api'

export const sessionMiddleware = createListenerMiddleware<AppState, AppDispatch>()

// listen to event `apiAccessTokenIsUpdatedEvent`
sessionMiddleware.startListening({
  actionCreator: apiAccessTokenIsUpdatedEvent,
  effect: async () => {
    // ... store new tokens
  },
})

// or

export const sessionSlice = createSlice({
  name: 'session',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(apiAccessTokenIsUpdatedEvent, (state, { payload }) => {
        // ... store new tokens
        // state.tokens = payload.tokens
      })
  },
})

[chertik77]

here is full code (with incorrect imports)

import axios, { AxiosError } from 'axios'

import {
  getSessionStore,
  sessionActions,
  sessionService
} from '@/entities/session'

import { env } from '../config'
import { router } from '../lib'

export const axiosInstance = axios.create({
  baseURL: env.VITE_API_BASE_URL
})

axiosInstance.interceptors.request.use(config => {
  const {
    tokens: { accessToken }
  } = getSessionStore()

  if (config?.headers && accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }

  return config
})

axiosInstance.interceptors.response.use(
  r => r,
  async error => {
    const originalRequest = error.config

    if (
      error?.response?.status === 401 &&
      !originalRequest._retry &&
      !error.config.skipAuthRefresh
    ) {
      originalRequest._retry = true

      try {
        const {
          tokens: { refreshToken }
        } = getSessionStore()

        const tokens = await sessionService.getTokens({ refreshToken })

        sessionActions.setTokens(tokens)

        return axiosInstance(originalRequest)
      } catch (e) {
        if (
          e instanceof AxiosError &&
          e.response?.data?.message === 'ERR_JWT_EXPIRED'
        ) {
          sessionActions.logout()

          return router.navigate({ to: '/' })
        }

        throw e
      }
    }

    throw error
  }
)

async getTokens(data: RefreshTokenDto) {
   const refreshTokenDto = parse(RefreshTokenDtoSchema, data)

   const response = await axiosInstance.post(
     sessionApiEndpoints.tokens,
     refreshTokenDto
   )

   const parsedData = parse(TokensDtoSchema, response.data)

   return parsedData
 },

i'm using stan-js for store management, and i'm not really sure if they have this type of functionality you showed above. I''l take a look, but i want getTokens function to be a part of sessionService.

[chertik77]

Maybe i can do something like this in the root?

const sessionApi = {
  setTokens: (tokens) => sessionActions.setTokens(tokens),
  logout: () => sessionActions.logout(),
  getTokens: (params) => sessionService.getTokens(params)
}

setSessionApi(sessionApi)

The same way as attaching token

[chertik77]

Hey, I've done something like this:

// shared/api/apiMemoryStorage

type Tokens = {
  accessToken: string
  refreshToken: string
}

type ApiMemoryStorage = {
  accessToken: string
  refreshToken: string
  refreshTokens: (data: Pick<Tokens, 'refreshToken'>) => Promise<Tokens>
  updateTokens: (data: Tokens) => void
  logout: () => void
}

let __internalMemoryStorage: () => ApiMemoryStorage

export const attachInternalApiMemoryStorage = (data: ApiMemoryStorage) => {
  __internalMemoryStorage = () => data
}

export const getApiAccessToken = () => {
  const { accessToken } = __internalMemoryStorage()

  return accessToken
}

export const getApiRefreshToken = () => {
  const { refreshToken } = __internalMemoryStorage()

  return refreshToken
}

export const getRefreshedTokens = (data: Pick<Tokens, 'refreshToken'>) => {
  const { refreshTokens } = __internalMemoryStorage()

  return refreshTokens(data)
}

export const setTokens = (data: Tokens) => {
  const { updateTokens } = __internalMemoryStorage()

  return updateTokens(data)
}

export const logUserOut = () => {
  const { logout } = __internalMemoryStorage()

  return logout()
}

And i'm giving the needed data in the app entry:

  const { tokens, setTokens, logout } = useSessionStore()

  attachInternalApiMemoryStorage({
    accessToken: tokens.accessToken,
    refreshToken: tokens.refreshToken,
    refreshTokens: sessionService.getTokens,
    updateTokens: setTokens,
    logout
  })

Is it fine? What do you think?

[noveogroup-amorgunov]

I think it's good solution with session entity.

[chertik77]

I think it's good solution with session entity.

Alright, I appreciate your help!