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.

Check out the sample package on GitHub

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.

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

Step 3: Configure environment details

Add Frontegg to the main application.

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 // Uncomment this in order to maintain the session alive
  },
  hostedLoginBox: true,
  router,
});

app.mount("#app");

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.

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

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