Vue.js
What will we build?
In this quickstart, we will add the Frontegg hosted login box to your Vue application.
In 5 minutes from now, your application will have a login box with Sign in, Sign up, and SSO. All this with just a few lines of code using redirects, Open Id Connect, and OAuth2.
Ready to start?
⚡ Before you start: ⚡
Getting your Frontegg subdomain
Frontegg creates a unique subdomain for every workspace created on the account. In order to retrieve the subdomain that will act as the
baseUrlin the integration, navigate to your workspace administration menu, and copy the workspace domain.You will need them for this guide.
STEP 1: Create Vue application
If you have an existing app, skip this step.
To create a new app, use the following script.
vue create my-project
cd my-project
If you run Vue.JS version 2x, you should have vue-router v3.x installed before completing STEP 2.
STEP 2: Install
Run the following command to install the Frontegg Vue.JS library.
npm install @frontegg/vue
yarn add @frontegg/vue
STEP 3: Configure
Add Frontegg to the main application.
For Vue.JS v2.x
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { Frontegg } from '@frontegg/vue';
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
});
Vue.use(Frontegg, {
contextOptions: {
baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
clientId: '[YOUR_CLIENT_ID]'
},
authOptions: {
// keepSessionAlive: true // Uncomment this in order to maintain the session alive
},
hostedLoginBox: true,
router,
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
For Vue.JS v3.x
import { createApp } from "vue";
import App from "./App.vue";
import { Frontegg } from "@frontegg/vue";
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory("/"),
routes: [
{ name: "HomePage", path: "/", component: App },
],
});
const app = createApp(App).use(router);
app.use(Frontegg, {
contextOptions: {
baseUrl: "https://[YOUR_SUBDOMAIN].frontegg.com",
clientId: '[YOUR_CLIENT_ID]'
},
authOptions: {
// keepSessionAlive: true // Uncomment this in order to maintain the session alive
},
hostedLoginBox: true,
router,
});
app.mount("#app");
Under the hosted login configuration, add http://localhost:8080/oauth/callback as the allowed redirectUrl
Configure Each Environment
Configure the hosted login for each environment separately.
STEP 4: Redirect to login
Sending your non-authenticated users to the login page is available by calling the loginWithRedirect hook.
Authenticated users context will have their state mapped as shown below.
<template>
<div id="app" v-if="fronteggLoaded">
<div v-if="this.authState.user">
<span>Logged in as: {{this.authState.user.name}}</span>
<button v-if="this.authState.user" v-on:click="logout">Log out</button>
</div>
<div>
<button v-if="this.authState.user" v-on:click="showAccessToken">What is my access token?</button>
<button v-if="!this.authState.user" v-on:click="loginWithRedirect">Not logged in. Click to Login</button>
</div>
</div>
</template>
<script>
import { mapLoginActions } from "@frontegg/vue";
import { ContextHolder } from '@frontegg/rest-api';
export default {
name: "App",
// Available from v1.0.22 for automatic redirect to your app / login box.
// updated() {
// this.loginIfNeeded();
// },
methods: {
// Use either loginWithRedirect or loginIfNeeded.
loginWithRedirect: mapLoginActions('loginWithRedirect'),
showAccessToken() {
alert(this.authState.user.accessToken);
},
// loginIfNeeded: function() {
// if (!this.$data.authState.isLoading && !this.$data.authState.isAuthenticated) {
// this.loginWithRedirect();
// },
logout() {
const baseUrl = ContextHolder.getContext().baseUrl;
window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
}
},
data() {
return {
...this.mapAuthState(),
}
}
};
</script>
Great, Frontegg is now integrated with your app!
Try it now!
Run the app and click on the Login button in order to navigate to the Login dialog.
npm run serve
yarn serve
Updated 28 days ago