Vue.js embedded 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_SUBDOMAIN].frontegg.com",
    appId: '[YOUR-APP-ID]'
  },
   authOptions: {
    // keepSessionAlive: true // Uncomment this in order to maintain the session alive
  },
  hostedLoginBox: false,
  router,
});

app.mount("#app");

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

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

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:

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

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

npm run serve

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

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