Getting started overview
Integrating Frontegg into an application involves several key steps, beginning with account creation and the retrieval of necessary credentials. Frontegg is designed to provide embedded authentication and user management functionalities, allowing developers to integrate features such as user registration, login, multi-factor authentication (MFA), and single sign-on (SSO) directly into their software-as-a-service (SaaS) applications Frontegg documentation introduction. The platform offers SDKs for various frontend frameworks and backend languages, streamlining the integration process Frontegg SDKs overview.
This guide focuses on the initial setup required to make a first authenticated call to the Frontegg API. It covers account creation, tenant setup, obtaining client IDs and secrets, and executing a basic API request to verify the setup. Understanding these foundational steps is crucial for developers looking to implement Frontegg's user management and authentication features effectively.
The typical workflow for getting started includes:
- Signing up for a Frontegg account.
- Creating a new tenant or workspace within the Frontegg portal.
- Configuring an application and obtaining API keys (Client ID and Client Secret).
- Making an initial API call to authenticate and retrieve a token.
- Using the retrieved token to make subsequent authenticated requests.
This structured approach ensures that all prerequisites are met before proceeding with more complex integrations.
Create an account and get keys
To begin using Frontegg, developers must first create an account and then configure an application within the Frontegg portal to obtain the required API credentials.
1. Sign up for a Frontegg account
Navigate to the Frontegg website and sign up for the Developer Plan. This free tier provides access to core features necessary for initial development and testing Frontegg Developer Plan details. The signup process typically involves providing an email address and creating a password, followed by email verification.
2. Create a new tenant (workspace)
After signing up and logging in, you will be prompted to create a new tenant (also referred to as a workspace or environment). A tenant acts as an isolated environment for your application's users and configurations. Provide a name for your tenant and select the desired region.
3. Create an application
Within your Frontegg tenant, navigate to the 'Applications' section. Click on 'Create Application' to set up a new application instance. You will need to provide an application name and specify the type of application (e.g., Single Page Application, Regular Web Application, Mobile, or Backend). For most initial integrations, a 'Regular Web Application' or 'Single Page Application' might be appropriate if you are integrating a frontend, while a 'Backend' application might be used for direct API integrations.
4. Obtain Client ID and Client Secret
Once your application is created, Frontegg will generate a unique Client ID and Client Secret. These credentials are essential for authenticating your application with the Frontegg API. The Client ID identifies your application, while the Client Secret acts as a password for your application. It is crucial to keep the Client Secret secure and not expose it in client-side code Frontegg security best practices.
- Navigate to your application's settings.
- Locate the 'API Keys' or 'Credentials' section.
- Copy both the Client ID and Client Secret.
- Note your Frontegg Base URL, which typically follows the format
https://[your-tenant-name].frontegg.comorhttps://app.frontegg.com/oauth/tokenfor authentication endpoints Frontegg authentication API endpoints.
Quick Reference: Account and Key Setup
| Step | What to Do | Where |
|---|---|---|
| 1. Sign Up | Register for a Developer Plan account. | Frontegg Homepage |
| 2. Create Tenant | Define your isolated workspace. | Frontegg Portal (post-login) |
| 3. Create Application | Register your application within the tenant. | Frontegg Portal > Applications |
| 4. Get Credentials | Retrieve Client ID, Client Secret, and Base URL. | Frontegg Portal > Applications > Your App > Settings |
Your first request
After obtaining your Client ID, Client Secret, and Frontegg Base URL, the next step is to make an authenticated request to the Frontegg API. This typically involves exchanging your credentials for an access token using the OAuth 2.0 Client Credentials flow OAuth 2.0 specification. This token can then be used to authorize subsequent API calls.
1. Obtain an Access Token (Client Credentials Flow)
To get an access token, send a POST request to Frontegg's token endpoint. This request must include your Client ID, Client Secret, and the grant_type set to client_credentials.
Example using curl:
curl -X POST \
'https://[YOUR_TENANT_NAME].frontegg.com/oauth/token' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=client_credentials&client_id=[YOUR_CLIENT_ID]&client_secret=[YOUR_CLIENT_SECRET]'
Replace [YOUR_TENANT_NAME], [YOUR_CLIENT_ID], and [YOUR_CLIENT_SECRET] with your actual credentials. The response will contain an access_token and its expires_in duration.
Example Response:
{
"access_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6...",
"expires_in": 3600,
"token_type": "Bearer"
}
2. Make an Authenticated API Call
Once you have the access_token, you can use it to make authenticated calls to other Frontegg API endpoints. Include the token in the Authorization header of your requests, prefixed with Bearer.
Example: Fetching users (requires appropriate permissions)
curl -X GET \
'https://api.frontegg.com/identity/resources/v1/users/v2' \
-H 'Authorization: Bearer [YOUR_ACCESS_TOKEN]' \
-H 'Content-Type: application/json'
This example attempts to retrieve a list of users. Ensure your application has the necessary permissions configured in the Frontegg portal to access user data. If successful, you will receive a JSON response containing user information.
Common next steps
After successfully making your first authenticated API call, consider these common next steps to further integrate Frontegg:
- Integrate an SDK: Frontegg provides SDKs for popular frontend frameworks like React, Angular, and Vue.js, as well as backend languages such as Node.js, Python, and Go Frontegg SDKs list. Using an SDK can simplify the integration of login flows, user profiles, and other UI components.
- Configure Authentication Methods: Explore setting up additional authentication methods such as social logins (Google, GitHub), SAML/OIDC for enterprise SSO, or multi-factor authentication (MFA) Frontegg authentication methods guide.
- User Management: Begin utilizing Frontegg's user management APIs or SDK components to create, update, and manage users programmatically. This includes features like roles, permissions, and organization management.
- Authorization Policies: Define and implement fine-grained authorization policies to control access to resources within your application based on user roles and attributes Frontegg authorization documentation.
- Webhooks: Set up webhooks to receive real-time notifications about events occurring within your Frontegg tenant, such as user sign-ups, password changes, or organization updates Frontegg webhooks guide.
- Customization: Customize the appearance and branding of Frontegg's hosted login pages and embedded UI components to match your application's design Frontegg UI customization options.
- Explore Audit Logs: Access and review audit logs to monitor user activity and system events, which is crucial for security and compliance Frontegg audit logs overview.
Troubleshooting the first call
Encountering issues during the initial API call is common. Here are some troubleshooting tips:
- Incorrect Client ID or Client Secret: Double-check that you have copied the correct Client ID and Client Secret from your Frontegg application settings. Even a single character mismatch will cause authentication failure.
- Incorrect Frontegg Base URL: Ensure the base URL for your token endpoint is correct. It should typically be
https://[your-tenant-name].frontegg.com/oauth/token. Verify the tenant name is accurate. grant_typeMismatch: Thegrant_typeparameter in the token request must be exactlyclient_credentialsfor this flow.Content-TypeHeader: For the token exchange endpoint, theContent-Typeheader should beapplication/x-www-form-urlencoded. For subsequent API calls, it is typicallyapplication/json.- Missing
AuthorizationHeader: For authenticated API calls (after obtaining the token), ensure theAuthorizationheader is present and correctly formatted asBearer [YOUR_ACCESS_TOKEN]. - Expired Access Token: Access tokens have a limited lifespan (e.g., 3600 seconds). If your token has expired, you will need to request a new one before making further authenticated calls. The token's expiration is indicated by the
expires_infield in the token response. - Insufficient Permissions: If you receive a
403 Forbiddenerror on an authenticated API call, it likely means your application (identified by its Client ID) does not have the necessary permissions to perform that action. Review the permissions configured for your application in the Frontegg portal. - Network Issues: Verify your internet connection and ensure no firewalls or proxies are blocking access to Frontegg's API endpoints.
- Check Frontegg Status Page: In rare cases, Frontegg's services might be experiencing an outage. Check the Frontegg Status Page for any reported issues.
- Consult Documentation: Refer to the Frontegg API Reference for specific endpoint details and error codes.