Firstline Vue

This library enables you to add authentication to your Vue app.

Helpful resources

- Quick setup - our guide for quickly adding login, logout and user information to a Vue app using Firstline.
- Vue sample app - a full-fledged Vue application integrated with Firstline.
- Firstline docs - explore our docs site and learn more about Firstline.

Getting started

$3

1. Follow the Quick setup to configure a Firstline Application.
2. Add a Firstline API as shown in Secure API.

Important: Don't forget to configure the Application URIs.

$3

Using npm:

``sh
npm install @first-line/firstline-vue
`

Using yarn:

`sh
yarn add @first-line/firstline-vue
`

$3

Add the following code to your Vue project. Replace DOMAIN, API_IDENTIFIER and CLIENT_ID with the settings you configured in the setup step. You can also find them in the Application's and API's "Configure" tab in your dashboard.

`ts
// main.ts
import { createFirstline } from "@first-line/firstline-vue";

const app = createApp(App);

app.use(
createFirstline({
domain: 'DOMAIN',
audience: 'API_IDENTIFIER', // = audience
client_id: 'CLIENT_ID',
redirect_uri: window.location.origin,
logout_uri: ${window.location.origin}/logout, // or window.location.origin to redirect back to home after logout
})
);

app.mount('#app');
`

$3

Implement the following component in your frontend and you have a fully functional login/logout.

`html




`

You can call useFirstline() from anywhere in your application to
- log in
- log out
- check if the user is signed in
- retrieve the logged in user

$3

Here is sample code on how to make an API request to a secured endpoint.

`html
// CallAPIComponent.vue



`

In this example, we assume that the API endpoint http://localhost:8080/posts exists.

Important: The user must be logged in when calling getAccessToken(). Therefore, use isAuthenticated`.