Quickstart guide
Frontegg lets you easily add authentication, user management, and entitlements to your app — without building it all from scratch. This guide will walk you through the two main ways to integrate authentication into your application:
- Hosted login: Use a secure, prebuilt login page hosted by Frontegg with minimal setup.
- Embedded login: Fully embed the login flow inside your app using Frontegg SDKs and customizable UI.
You'll also learn how to configure your environment, set up frontend logic, and validate tokens in your backend. Whether you're building a quick MVP or a fully branded user experience, this guide helps you get started fast — and securely.
Create your Frontegg account
Your first step is to create an account and access the Frontegg Portal, if you don’t already have one.
- Go to https://frontegg.com and click Start for free.
- Sign up with your email or GitHub/Google account.
- After logging in, you’ll be taken to the Frontegg Portal — your central dashboard for managing environments, login configuration, user roles, and more.
Set up your environment
Frontegg uses environments to organize and isolate configuration settings for different stages of your application — such as Development, Staging, or Production. Each environment defines how users authenticate, what features are enabled, and which domains are allowed to interact with Frontegg services.
When you first log into the Frontegg Portal, a default environment is automatically created for you. This environment is your workspace for configuring authentication, testing login flows, and managing user access.
Choose your login method
Frontegg supports two main authentication integration styles:
- Hosted login: A prebuilt, Frontegg-hosted login page available at a dedicated URL.
- Embedded login: A customizable login component rendered directly inside your app, powered by Frontegg's client SDKs.
Both options support modern authentication methods like social logins (Google, GitHub), SSO (SAML, OIDC), and passwordless flows (e.g., passkeys, magic links). Choose the option that best fits your product and UI requirements.
Hosted login is enabled by default. You can switch to embedded login as described in this guide.
Set up your application
Upon signing up to Frontegg, an application is automatically being created on the development environment and two essential environment variables are automatically generated and utilized accross the environment for redirect URLs, emails and etc. Learn more about them here:
{{APP_URL}}
: The base URL of your application (e.g.,https://your-app.com
){{LOGIN_URL}}
: The hosted / embedded login URL of your application. The URL structure depends on the login method. More details can be found here.
These variables are used by default in:
Authentication → Login method → Hosted login → Redirect URLs
By default, Frontegg sets{{LOGIN_URL}}
as the post-login redirect URI. You can customize this later by changing the actual Application Login URL in application settings.Keys & domains → Allowed Origins
Both{{APP_URL}}
and{{LOGIN_URL}}
are pre-populated here to allow your application to communicate with Frontegg services securely.
Set up authentication on the client side
- In the Frontegg Portal, go to [ENVIRONMENT] → Builder → Login Box.
- Customize branding, login methods, colors, and social login options as described here.
- Click Review to publish to make the login page live.
- You can access your hosted login page at:
https://{{YOUR-FRONTEGG-DOMAIN}}/oauth/account/login
, where{{YOUR-FRONTEGG-DOMAIN}}
is the URL of your Frontegg domain (from Keys & domains). - To automatically check a user's authentication status and redirect to your login page, integrate one of Frontegg’s client-side SDKs below. The built-in methods will handle all necessary authentication logic out of the box.


React


Next.js


Angular


Vue.js


Vanilla.js
To test Frontegg’s authentication flows without integrating, you can use one of our sample applications tailored to your tech stack.
Secure your backend by validating tokens
Once the user is authenticated on the frontend, you can optionally validate their JWT and additional properties (such as the access token) on your backend—either using one of Frontegg’s backend SDKs or JWKS. While not required, this validation is strongly recommended to secure private APIs and ensure requests are made by authenticated users.
- Read the JWT from the Authorization header of incoming requests, in the format:
Authorization: Bearer <token>
. - Use one of the below Frontegg’s backend SDK or JWKS endpoint (can be found under [Environment] → Authentication → SSO → Identity provider ) to validate the token’s signature and claims.
Backend samples for unofficially supported frameworks can be found in the sample applications
Troubleshooting
If you encounter any errors during testing or authentication, we recommend reviewing the logs under [Environment] → Analytics → Monitoring and consulting our FAQs for common solutions.
Configure additional features
Now that authentication is working and your backend is secure, you can start enabling other Frontegg features based on your needs.
Authentication options: Configure social login, passwordless flows, multi-factor authentication, and single sign-on (SSO).
Entitlements and authorization: Implement RBAC, ReBAC, and feature gating using entitlements.
Emails: Customize email templates for login flows, MFA, invitations, and account security. Email templates are tied to each application's redirect URLs, so it's important to review and enable the relevant templates (e.g., Magic Code, Magic Link) based on the authentication flows you've enabled.
Frontegg AI: Integrate identity and permission management into AI agents and workflows.
Security options: Enforce security rules, IP/domain restrictions, session policies, and step-up authentication.
Environment settings: Customize environment-level configurations like JWT expiration, allowed origins, and redirect URIs and a custom domain.
Manage users: View and manage users, accounts, invitations, and sub-account access.
Integrations: Connect with external systems using webhooks, SCIM, prehooks, or third-party apps.
Monitoring: Track login events, session activity, and audit logs across your application.