> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/development/frontend-api.md).

# Frontend API

We have to create Laravel APIs before testing the frontend API Call.

We have implemented login method in our `AuthLogin.vue` component file. You can find this file here: `resources/ts/views/authentication/AuthLogin.vue`

```typescript
async function login() {
  try {
    const res = await $api('/auth/login', {
      method: 'POST',
      body: {
        email: credentials.value.email,
        password: credentials.value.password,
      },
    })

    const { accessToken, userData, userAbilityRules } = res

    useCookie('userAbilityRules').value = userAbilityRules
    ability.update(userAbilityRules)

    useCookie('userData').value = userData
    useCookie('accessToken').value = accessToken

    // Redirect to `to` query if exists, otherwise redirect to index route
    await router.replace(route.query.to ? String(route.query.to) : '/dashboards/default')
  }
  catch (error) {
  // Handle errors
    console.error(error)
    errors.value.apiError = 'Invalid email or password' // Set error message for invalid credentials
  }
}
```