📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
The Auth0 ACUL JS SDK enables you to work with Advanced Customization for Universal Login.
It simplifies integrating authentication screens (login, signup, passwordless, passkey enrollment, etc.) into your web applications, providing the necessary tools for seamless implementation.
⚠ This feature is still in Limited EA. Please contact your Account Manager to get this feature enabled on your Auth0 tenant. read more...
- Quickstart - our guide for setting up the SDK on your app.
- Guides - more guides for common use cases
- Examples - code snippets for different customization use cases.
- FAQs - Find answers to frequently asked questions about the Auth0 ACUL JS SDK.
- Boilerplate app - Get up and running quickly with our boilerplate starter template
Before starting, ensure that you have the following setup:
- Custom Domain: Ensure that a custom domain is configured for your Auth0 tenant.
- Screen Configuration: Set up the required authentication screens within your Auth0 flow.
For detailed steps, refer to the Management API documentation.
You can easily install the SDK via npm:
npm install @auth0/auth0-acul-jsAfter installing the SDK, you can import the relevant screen module, which you want to configure
// Default import of any particular screen, eg: login-id screen
import LoginId from '@auth0/auth0-acul-js/login-id';
// Named import of any screen
import { LoginId } from '@auth0/auth0-acul-js';
// Default import of all screens
import * as Screens from '@auth0/auth0-acul-js'; Note: For more details on import paths for all screens, refer to the FAQ's.
Let’s look at an example for adding logic to the login-id screen.
import LoginId from '@auth0/auth0-acul-js/login-id';
const loginIdManager = new LoginId();
// Trigger the login method on button click
loginIdManager.login({
username: <USERNAME_FIELD_VALUE>
});const { transaction } = loginIdManager
const requiredFields = transaction.getActiveIdentifiers();To allow users to login via social connections (e.g., Google, Facebook), use the following snippet
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
// Check if alternateConnections is available and has at least one item
if (!loginIdManager.transaction.getAlternateConnections()) {
console.error('No alternate connections available.');
}
// Select the first available connection (users can select any available connection)
const selectedConnection = alternateConnections[0];
// Log the chosen connection for debugging or informational purposes
console.log(`Selected connection: ${selectedConnection.name}`);
// Proceed with social login using the selected connection
loginIdManager.continueWithFederatedLogin({
connection: selectedConnection.name,
})For more examples, visit our examples
Get up and running quickly with our boilerplate starter template: Link
Explore more screens...
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
To provide feedback or report a bug, please raise an issue on our issue tracker.
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
Early Access. This SDK and its associated product are made available only in Early Access (“EA”) format and are governed by the Free Trial terms of the Okta Master Subscription Agreement. If Okta elects to make a version of this SDK and its associated product Generally Available (“GA”), such GA version may have different pricing, product and feature configurations, and use of the GA product and SDK will be subject to the standard terms of the Agreement (or other such titled written or electronic agreement addressing the same subject matter) between Okta and Customer."
Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?
This project is licensed under the MIT license. See the LICENSE file for more info.