Firstline SDK for Vue Single Page Applications (SPA)
npm install @first-line/firstline-vuesh
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
Loading ...
{{ user.email }}
`
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
{{errorMessage}}
-
{{ post.text }}
`
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`.