## Vue.js embedded login quickstart

This guide walks you through integrating Frontegg’s login box into your Vue.js app, with built-in support for Sign In, Sign Up, SSO, and automatic redirects—all in just a few lines of code.

br
Check out the sample package on GitHub

br
Getting your Frontegg subdomain and `clientId`
Frontegg creates a unique subdomain and client id for every environment created on the account. In order to retrieve the clientId `subdomain` that will act as the `baseUrl` in the integration, navigate to your workspace `Keys & domains` menu, and copy the Frontegg domain and `clientId`.

br
### Step 1: Create a Vue application


```
vue create my-project

cd my-project
```

### Step 2: Install Frontegg Vue library


```
// for Vue.JS v3.x
npm install @frontegg/vue vue-router

// for Vue.JS v2.x
npm install @frontegg/vue vue-router@3
```


```
// for Vue.JS v3.x
yarn add @frontegg/vue vue-router

// for Vue.JS v2.x
yarn add @frontegg/vue vue-router@3
```

### Step 3: Configure environment details

Add `Frontegg` to the main application.


See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) and [`hostedLoginBox`](/ciam/sdks/components/fronteggappoptions#hostedLoginBox) for more information.


```typescript
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",
    appId: '[YOUR-APP-ID]'
  },
   authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: false,
  router,
});

app.mount("#app");
```


```typescript
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',
    appId: '[YOUR-APP-ID]'
  },
   authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: false,
  router,
});

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

See [`keepSessionAlive`](/ciam/sdks/components/fronteggstoreoptions#keepsessionalive) for more information.


Wrap your application on the `fronteggLoaded` attribute to make sure you have the right context.


```typescript
<template>
  <div id="app" v-if="fronteggLoaded">
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
</template>
```

### Step 4: Redirect to login

Frontegg exposes the user context and the authentication state via a global set of mixins and state mappers. You can access the authentication state via the `mappedAuthState` as in the following sample:


```typescript
<template>
  <div id="app" v-if="fronteggLoaded">
    <div v-if="authState.user">
      <span>Logged in as: {{ authState.user.name }}</span>
    </div>
    <div>
      <button v-if="authState.user" v-on:click="logout">Logout</button>
      <button v-if="authState.user" v-on:click="showAccessToken">
        What is my access token?
      </button>
      <button v-if="!authState.user" v-on:click="goToLogin">Login</button>
    </div>
  </div>
</template>

<script>
import {
  useFrontegg,
  useFronteggAuthGuard
} from "@frontegg/vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    useFronteggAuthGuard(); // auto redirects the user to login / application
    
    const router = useRouter();

    const { fronteggLoaded, authState } = useFrontegg();

    const goToLogin = () => {
      router.push("/account/login");
    };
    const logout = () => {
      router.push("/account/logout");
    };
    const showAccessToken = () => {
      alert(authState.user.accessToken);
    };

    return {
      fronteggLoaded,
      authState,
      goToLogin,
      logout,
      showAccessToken,
    };
  },
};
</script>
```


```typescript
<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="logout">Logout</button>
      <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="goToLogin">Login</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    goToLogin() {
      this.$router.push('/account/login');
    },
    showAccessToken() {
      alert(this.authState.user.accessToken);
    },
    logout() {
      this.$router.push('/account/logout');
    }
  },
  data() {
    return {
      ...this.mapAuthState(),
    }
  }
};
</script>
```

### Step 5: Run the app, signup & login

You're all set. Let's run the application and see Frontegg in action.


```
npm run serve
```


```
yarn run serve
```

br
**Login and logout routes have been added to your app:**

- Signup screen is at `http://localhost:8080/account/sign-up`
- Login screen is at `http://localhost:8080/account/login`


br
If you are already logged in, go to `http://localhost:8080/account/logout` and log out.