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.
Getting your Frontegg subdomain and clientId
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");
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.
//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>
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