Support
This integration is supported by Cymatic. Learn more
Cymatic User Risk Analytics
Visualize and eliminate user login and session risk easily
Cymatic instantly adds rich and informative user risk insights and analytics to Auth0’s award-winning authentication platform. With Cymatic’s powerful, real-time risk insights and analytics, you can get a detailed picture of your users’ security hygiene and your organization’s risk exposure-level across logins, sessions, devices, locations, user behaviors and credentials. Cymatic plugs directly within Auth0 forms to ensure a fast and seamless integration and user experience.
Support
This integration is supported by Cymatic. Learn more
Understand User Risk and Compliance Gaps
Comply with security regulations (like NIST and SOC2) by identifying non-compliance across your user-base. Print board-level compliance reports and/or use the UI to drill into each user interaction and risk category.
Add Additional Security and Insight to Auth0 Forms
Ensure your users and business are safe from data breaches by discovering and remediating leaked credentials, geo-location risks, malicious automation, script injections and more before hackers can use these techniques to breach your business.
Enrich User Profiles with Risk Signals
Infuse Cymatic risk signals with Auth0 user profiles to increase your visibility around leaked credentials, location risks, device risk, impossible time travel events, malicious ATO automation, and much more.
Prerequisites
There are a few things you'll need to get started
- An Auth0 Account. You can sign up for a free Auth0 account here.
- A Cymatic account. You can sign up for a free Cymatic account here.. Choose to sign up with your email address or via Google social login and follow the steps to activate your account.
Step 1: Create a Cymatic account and integration snippet
If you'd rather watch a video on this, please go here.
- Go to the Cymatic dashboard > Organizations.
- Name your Organization. An Organization is your top level entity in Cymatic. For example, Meta or Alphabet. We will also create your first company automatically to streamline your experience, but don't worry you can rename this later on.
- Once your Organization is created, you will see the organization screen. Click on your newly created Organization to create your first site.
- Now let's create your first site.
- Enter a name for your site (the application you are protecting with Auth0).
- Enter your site's URL. We already added the protocol (HTTP/S), so please only enter
www.your_domain.comoryour_domain.com. - Click 'Create Site'
- Add the selectors specific to your Auth0 login form. Unless you renamed the default selectors in your Auth0 forms, you can just add the following:
- Login form selector: form
- Username field selector: form input[type=email]
- Password field selector: form input[type=password]
- Submit button selector: form button[type=submit]
- Login form selector: form
- Click 'Continue'
- Copy the snippet on the next screen to your clipboard. You will need this in Step 3.
- Before moving further in the setup wizard, please go to Step 2 below.
Step 2: Allow Cymatic to trust your Auth0 account domain
If you'd rather watch a video on this, please go here.
In this example, http://localhost:3000 is our application's FQDN and https://dev-xza5b0nd.us.auth0.com is Auth0's FQDN (where users login, register, change passwords, etc.). Let's make sure Cymatic trusts and allows Auth0's domain by adding it as an "Additional Url"
- Following on from Step 1, click on 'Settings' found in the left-hand menu bar.
- Under 'General -> Site', expand the 'Site Restrictions' section and add your Auth0 FQDN in the 'Additional URL' field. You will not need to add a Key/Value pair. Leave these blank.
- Click 'Save Changes'. You will now be exited out of the site creation wizard and ready to connect Cymatic with your Auth0 environment.
Step 3 : Add Cymatic's integration snippet to Auth0's universal forms
How the Cymatic snippet is added depends on which version of Universal Login you are using.
New Universal Login experience
In order to add Cymatic to the New Universal Login experience, you will need to add a custom login page template. Before you start, please see the documentation on Universal Login page templates. Make sure all customize options are turned off.
To use page templates, you will need to set up a custom domain. Follow the instructions to add and verify your domain before adding the Cymatic snippet. Make sure that this is the domain that is added as the Auth0 FQDN in Step 2 above.
Add your Cymatic JavaScript snippet in the <head> section and the init() method call before the ending </body> tag. See below for an example with the script tag embedded within the page template. Do not use the exact snippet below; your application will have its own.
<!DOCTYPE html>
<html>
<head>
<!-- Change the snippet below to the one for your application -->
<script src='https://sdk.cymatic.io/company_id/site_id/sdk'></script>
{%- auth0:head -%}
</head>
<body>
{%- auth0:widget -%}
<script>
CymaticXid.v2.init({
login : {
selector :'form',
username :'form input#username',
password :'form input#password',
submit :'form button[type=submit]'
}
});
</script>
</body>
</html>Make sure the login request happens on your custom domain, not the default auth0.com domain.
Classic Universal Login experience
In order to add Cymatic to the Classic Universal Login experience, you will need to customize the login page code. Before you start, please see the documentation on advanced customization.
If you'd rather watch a video on this process, please go here.
Load Cymatic
- Go to Branding > Universal Login in the Auth0 Dashboard
- Under the 'Login' tab, select the 'HTML' tab if it is not highlighted.
- During your site creation in Step 1, you should have copied Cymatic's javascript snippet to your clipboard. If you did not copy the snippet during site setup, you will need to go back through the setup process discussed in Step 1.
- Add your Cymatic JavaScript snippet in the
<head>section. The Cymatic javascript snippet will look like the one below. Do not use the exact snippet below; your application will have its own.
<!-- Snippet for http://localhost:3000 -->
<script src="https://sdk.cymatic.io/company_id/site_id/sdk" ></script>Here is an example with the script tag embedded within the Auth0 template:
Initialize Cymatic
We will initialize as soon as Auth0 shows the sign-in form through the Auth0 Lock mechanism.
At the bottom of the HTML template after the line lock.show();, add the following code:
var lock = new Auth0Lock( ... );In this case for lock variable we will listen for event signin ready and initialize the script as follow (if you did not customize the selectors, you can just copy and paste the code below):
lock.on('signin ready', () => {
CymaticXid.v2.init({
login : {
selector :'form',
username :'form input[type=email]',
password :'form input[type=password]',
submit :'form button[type=submit]'
}
});
});As soon as someone logins to your application, Cymatic will see this attempt and activate additional features in the platform. At this point, you can go back to the Cymatic UI and see this data.
Step 4 - Optional: Add Cymatic session tracking to your application
If you'd rather watch a video on this, please go here.
By configuring this optional step, Cymatic will be able to provide deeper level insights into your users' risks and activity. In order to provide this capability, Cymatic needs to know about your users. Instead of having to map your users to Cymatic, Cymatic offers an easy way to do this mapping for you through the use of a Cymatic session cookie. In order for Cymatic to identify your users, please create a session cookie by following the steps below.
Set a cookie when session is created:
res.cookie("cymatic", "some value");Clear cookie when session is closed:
res.clearCookie("cymatic"); Finally, you will need to load and initialize Cymatic's script on your application. Please note that this step is in addition to Step 3 above as we are now initializing Cymatic within your application, not Auth0's login flow. The script's src URL will be the same, however.
<head>
<script src="https://sdk.cymatic.io/company_id/site_id/sdk"></script>
<script>CymaticXid.init()</script>
</head>Support
This integration is supported by Cymatic. Learn more