Frontegg SDKs & Libraries: Integration Guides (2026)

SDKs overview

Frontegg offers a suite of Software Development Kits (SDKs) designed to facilitate the integration of authentication and user management functionalities into web applications. These SDKs are categorized into frontend framework-specific libraries and backend language-specific libraries, providing tools for both client-side user interface interactions and server-side logic and API communication. The objective of these SDKs is to reduce the development effort required to implement secure identity features, allowing developers to focus on core application logic rather than building authentication from scratch. They encapsulate common identity flows, such as user registration, login, password reset, and multi-factor authentication (MFA), into reusable components and functions.

The SDKs are designed to be embedded directly into SaaS applications, providing a customizable experience for end-users. This approach contrasts with external identity providers that redirect users away from the application's domain for authentication. Frontegg's embedded model aims to maintain brand consistency and a smoother user journey. The SDKs also support advanced features like Single Sign-On (SSO), role-based access control (RBAC), and audit logging, which are critical for enterprise-grade applications. For a comprehensive overview of the platform's capabilities, developers can consult the official Frontegg API reference documentation.

Official SDKs by language

Frontegg provides official SDKs for several popular frontend frameworks and backend programming languages. These SDKs are maintained by Frontegg and offer direct integration with the platform's services. The table below outlines the primary official SDKs, their corresponding package names, and typical installation commands.

Installation

Installation of Frontegg SDKs typically involves using package managers specific to the programming language or framework. For JavaScript-based frameworks like React, Angular, Vue.js, and Next.js, npm or yarn are the primary tools. Python projects utilize pip, Go projects use go get, and Java projects integrate dependencies via Maven or Gradle. The general process involves adding the SDK package as a dependency to your project and then initializing the SDK with your Frontegg environment variables.

Frontend SDKs (Example: React)

For React applications, after installing the @frontegg/react package, you typically wrap your application with the FronteggProvider component. This provider makes the Frontegg context available throughout your application, enabling access to authentication state, user information, and authentication methods.

Configuration requires your Frontegg clientId and baseUrl, which are obtained from your Frontegg portal. These credentials establish the connection between your application and your Frontegg tenant. For detailed instructions, refer to the Frontegg React quickstart guide.

Backend SDKs (Example: Node.js)

Backend SDKs, such as @frontegg/node, are used to perform server-side operations, including validating access tokens, managing users programmatically, and interacting with Frontegg's management APIs. Installation follows the standard Node.js package management process.

After installation, you would typically initialize the SDK with API keys or other credentials to authenticate your backend service with Frontegg. This allows your server to make secure calls to Frontegg for tasks like fetching user roles or issuing new tokens. More information is available in the Frontegg Node.js quickstart documentation.

Quickstart example

This quickstart example demonstrates how to integrate the Frontegg React SDK into a basic React application. This setup enables user login, registration, and access to user context.

First, ensure you have a React project set up. If not, you can create one using Create React App or Next.js.

npx create-react-app my-frontegg-app
cd my-frontegg-app
npm install @frontegg/react react-router-dom

Next, modify your src/index.js or src/App.js to include the FronteggProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: 'https://[YOUR_FRONTEGG_DOMAIN].frontegg.com',
  clientId: '[YOUR_CLIENT_ID]',
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
      <App />
    </FronteggProvider>
  </React.StrictMode>
);

reportWebVitals();

Replace [YOUR_FRONTEGG_DOMAIN] and [YOUR_CLIENT_ID] with your actual Frontegg environment details. The hostedLoginBox={true} prop tells Frontegg to handle the login UI. After this setup, your application will be able to leverage Frontegg's authentication services. You can then use hooks like useAuth from @frontegg/react to access user information and authentication methods within your components.

import React from 'react';
import { useAuth, useLoginWithRedirect } from '@frontegg/react';

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();

  // Redirect to login if not authenticated
  React.useEffect(() => {
    if (!isAuthenticated) {
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);

  const logout = () => {
    window.location.href = `${contextOptions.baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location.origin}`;
  };

  return (
    <div>
      <h1>Welcome to Frontegg App</h1>
      {isAuthenticated ? (
        <div>
          <p>Hello, {user?.name || user?.email}</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <p>Loading user data...</p>
      )}
    </div>
  );
}

export default App;

This example demonstrates a basic flow where unauthenticated users are redirected to the Frontegg hosted login page, and authenticated users see a welcome message and a logout button. For more advanced use cases, such as custom login forms or fine-grained authorization, further integration with Frontegg's API and SDK features would be required. The user object contains profile information, while isAuthenticated indicates the user's authentication status. OAuth 2.0 and OpenID Connect (OIDC) are the underlying standards used for these authentication flows, providing a secure and interoperable framework for identity management, as detailed by the OAuth.net documentation.

Community libraries

While Frontegg provides a comprehensive set of official SDKs, the open-source community may develop additional libraries, plugins, or integrations that extend Frontegg's functionality or adapt it to specific niche use cases not directly covered by official support. These community-driven efforts can range from wrappers for less common languages or frameworks to specialized UI components or integrations with other third-party services. Developers often share these resources on platforms like GitHub, npm, or language-specific package repositories.

Community libraries are typically developed and maintained independently of Frontegg. Their quality, security, and ongoing support can vary significantly. Before using any community-contributed library, it is advisable to review its source code, check for active maintenance, and assess its compatibility with your project's security and stability requirements. The Frontegg documentation on open-source projects may list notable community contributions or provide guidelines for contributing to or utilizing such projects. Developers interested in contributing to the Frontegg ecosystem can explore creating their own libraries or extending existing ones, adhering to best practices for API integration and security, such as those outlined by the W3C developer resources.