## Vue.js hosted login quickstart

Quickly integrate Frontegg’s login box into your Vue.js app with support for Sign In, Sign Up, and SSO — using built-in support for redirects, OpenID Connect, and OAuth2.

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-SUB-DOMAIN].frontegg.com",
          clientId: "[YOUR-CLIENT-ID]",
          appId: "[YOUR_APP_ID]"
}},
   authOptions: {
	 keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: true,
  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-SUB-DOMAIN].frontegg.com",
    appId: "[YOUR_APP_ID]"
  },
  authOptions: {
    keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
  },
  hostedLoginBox: true,
  router,
});

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

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

br
### Step 4: Redirect to login

Sending your non-authenticated users to the login page is available by calling the `loginWithRedirect` method.
Authenticated users context will have their state mapped as displayed below.


```typescript
//Composition API is supported for Vue3 from @frontegg/vue@2.0.13

<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,
  ContextHolder,
  useFronteggAuthGuard
} from "@frontegg/vue";


export default {
  setup() {
    const { fronteggLoaded, authState, loginWithRedirect } = useFrontegg();;
   
    useFronteggAuthGuard(); // auto redirects the user to the login page / application
    
    const goToLogin = () => {
      loginWithRedirect();
    };
    
    const logout = () => {
      const baseUrl = ContextHolder.getContext().baseUrl;
      window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
    };
    
    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>
			<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, ContextHolder } from "@frontegg/vue";

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>
```

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

Great, Frontegg is now integrated with your app!
Run the app and click on the `Login` button in order to navigate to the Login dialog.


```
npm run serve
```


```
yarn run serve
```

br