Vue.js hosted login quickstart

This guide will seamlessly walk you through integrating Frontegg's login box into your Vue application, with robust functionalities including Sign In, Sign Up, and Single Sign-On (SSO). Streamline your authentication process with just a few lines of code, leveraging the power of redirects, OpenID Connect, and OAuth2.

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