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 (start your stopwatch), your application will have a login box with Sign-in, Signup, 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 baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain.

You will need it for this guide.

STEP 1: Create a New 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

STEP 2: Install Frontegg Libraries

Run the following command to Install Frontegg Vue.JS library.

npm install @frontegg/vue

yarn add @frontegg/vue

STEP 3: Configuration

Add Frontegg to the main application.

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]'
  },
  hostedLoginBox: true,
  router,
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Under the hosted login configuration, add http://localhost:8080/oauth/callback as the allowed redirectUrl

STEP 4: Log in your users

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>
    </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";
export default {
  name: "App",
  methods: {
    loginWithRedirect: mapLoginActions('loginWithRedirect'),
    showAccessToken() {
      alert(this.authState.user.accessToken);
    },
  },
  data() {
    return {
      ...this.mapAuthState(),
    }
  }
};
</script>

STEP 5: Run the app, signup & login

We are all set. Let's run the application and see Frontegg in action.

npm start

yarn start

Great, Frontegg is now integrated with your app!

Click on the Login button in order to navigate to the Login dialog.

And you are good to go!