How to use a custom typescript interface in Pinia Store + Sidebase/nuxt-auth?

1k Views Asked by At

I'm working on a Vue/Nuxt 3 project using composition API. Therefore I'd like to use the composition api in my Pinia stores as well.

I'm trying to setup a Pinia store to store my user data that I get from my backend using the @sidebase/nuxt-auth package.

I made a Typescript interface that represents my user: User. This is the same as my response from /user, the endpoint that the nuxt-auth package uses to get my user data.

Currently I can't figure out how to do it without errors, or without doing: const user = ref<any>(null)

This is my current code for my store:

import { User } from '~/types/User.interface'

export const useUserStore = defineStore('user', () => {
  const { signIn, data, token } = useAuth()
  const config = useRuntimeConfig()
  const user = ref<User>(null)
  const loading = ref<boolean>(false)

  async function loginUser(credentials: { emailAddress: string; password: string }) {
    loading.value = true
    try {
      await signIn(
        { email_address: credentials.emailAddress, password: credentials.password },
        { callbackUrl: '/shows' }
      )
      user.value = data.value
      loading.value = false
      return 200
    } catch (e: any) {
      loading.value = false
      return e.status
    }
  }

This is my user type:

export interface User {
  id: number
  email_address?: string
  phone_number?: string
  public_id: null
  account_type: string
  created_at: string
  updated_at: string
  last_login_at: string
  active: number
  locale: string
  selected_publisher_uuid?: string
  permissions: { [key: string]: boolean }
  should_see_changelog_modal: boolean
  two_factor_confirmed: boolean
  do_two_factor_challenge: boolean
}

The type I can find for Signin()

export type SignInFunc<PrimarySignInOptions, SignInResult> = (primaryOptions: PrimarySignInOptions, signInOptions?: SecondarySignInOptions, paramsOptions?: Record<string, string>) => Promise<SignInResult>;

This is the error I get: Type 'SessionData | null | undefined' is not assignable to type 'User | undefined'.

How do I properly set the type of my user ref inside the Pinia store, and how do I set it to be the api response that nuxt-auth receives from my backend?

0

There are 0 best solutions below