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?