Vanilla JS

What will we build?

In this quick start, we will add the Frontegg hosted login box to your Vanilla JS application.

5 minutes from now, your application will have a login box with Sign in, Sign up, and SSO. All this with just a few lines of code using redirects, Open Id Connect, and OAuth2.

⚡️ The code in the sample below is available in our Frontegg Samples repository in GitHub ⚡️

Ready to start?


alt textalt text

⚡ Before you start: ⚡

📘

Getting your Frontegg subdomain and clientId

Frontegg creates a unique subdomain and client id for every workspace created on the account. In order to retrieve the clientId subdomain that will act as the baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain and clientId.

You will need them for this guide.

STEP 1: Adding Frontegg to your app

Frontegg can be added to your app via NPM / script on your application head

npm install @frontegg/js
yarn add @frontegg/js
<head>
    ...
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/@frontegg/js/umd/frontegg.production.min.js"></script>
</head>

STEP 2: Configure

Frontegg works with Context options and needs to be initialized with this context. In order to initialize Frontegg use the following code snippet

Add the following script to initialize Frontegg on your application and to interact with the login page

<script type="text/javascript">
  // Initialize the frontegg instance
  const app = Frontegg.initialize({
     contextOptions: {
        baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
        clientId:'[YOUR-CLIENT-ID]'
      },
      authOptions = {
        // keepSessionAlive: true // Uncomment this in order to maintain the session alive
      },
      hostedLoginBox: true
    });

    // When the login with redirect button is closed, redirect to the login page
    document.getElementById("loginWithRedirect").addEventListener('click', () => {
      app.store.dispatch({
        type: 'auth/requestHostedLoginAuthorize'
      });
    });
</script>

Add the representative HTML button that will redirect the UI to the login page. Clicking on the button should take you to the login dialog.

<body>
  <div id="app-root" style="display: none">
      <button id="loginWithRedirect">
          Login With Redirect
      </button>
  </div>
</body>

STEP 3: Grab the user context

The user context is available from the Frontegg app. Upon initialization, you can subscribe to state notifications which will include whether the user is authenticated or not and what is the JWT of the user.

In order to subscribe to user state notifications add the following code snippet:

<script type="text/javascript">
  // Initialize the frontegg instance
  const app = Frontegg.initialize({
     contextOptions: {
        baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
        clientId:'[YOUR-CLIENT-ID]'
      },
      authOptions = {
        // keepSessionAlive: true // Uncomment this in order to maintain the session alive
      },
      hostedLoginBox: true
    });

    ...
    ...
    
    // When the login with redirect button is closed, redirect to the login page
    app.store.subscribe(() => {
      const state = app.store.getState();
      const user = state.auth.user;
      const accessToken = user.accessToken; // Use this one to make calls to the backend
    });
</script>

Great, Frontegg is now integrated with your app!


Did this page help you?