I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

Learn how to seamlessly integrate Auth0 into your newsletter sign-up process, ensuring compliance with GDPR regulations. This simple guide walks you through different methods to collect user consent for newsletter signups.

Engaging your users and keeping them informed about the latest features you deploy is crucial for any successful online business. However, it's equally important to ensure your communication efforts comply with users’ right to privacy and regulations like GDPR.

Thankfully, if you're already using Auth0 for user authentication, you have a powerful tool at your disposal to streamline the process of obtaining consent for email communications.

In this article, we'll delve into how you can leverage Auth0's capabilities to seamlessly integrate GDPR-friendly newsletter sign-ups directly into your existing user registration or onboarding flows. We'll cover best practices for obtaining explicit consent using two different approaches. By the end, you'll have a streamlined system that not only grows your email list but also fosters trust and transparency with your users.

## Method 1: Customize Signup and Login Prompts

Auth0's Universal Login feature provides a convenient way to add a newsletter sign-up option directly into your existing login or registration process. You can easily customize the Universal Login sign-up form to include an input checkbox for newsletter subscriptions.

When designing this checkbox, it's crucial to use clear and concise language that leaves no room for ambiguity. The checkbox should be unchecked by default, and the wording should explicitly state that the user is agreeing to receive marketing emails from your company.

Here's an example using Auth0 signup prompts for gathering consent:

![Example of Auth0 signup prompts for gathering consent for marketing purposes](https://images.ctfassets.net/23aumh6u8s0i/4n1CUQRKeGZDfnh4WaPoH/310a9792c14981c94634e94498d98b72/checkbox-consent-example.png)

Once the user submits the form, Auth0 can store their consent status as a custom field in their user profile. This allows you to easily track who has opted in to receive your newsletter and segment your audience accordingly.

The documentation provides great detail on [how to customize signup and login prompts](https://auth0.com/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts), so I won't be covering the steps here, but I'll share some of the code I used to set up the example above.

To add the new field to the signup form, I made the following call to the management api:

```shell
curl -L -X PUT 'https://{auth0-domain}/api/v2/prompts/signup/partials' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {access-token}' \
-d '{"signup":{"form-content-end":"<div class=\"ulp-field\"><input type=\"checkbox\" name=\"ulp-newsletter-consent\" id=\"newsletter-consent\"><label for=\"newsletter-consent\">I agree to receive information and commercial offers to my e-mail.</label></div>"}}'
```

Which will inject the following HTML after the login form.

```html
<div class="ulp-field">
    <input type="checkbox" name="ulp-newsletter-consent" id="newsletter-consent" />
    <label for="newsletter-consent">I agree to receive information and commercial offers in my e-mail.</label>
</div>
```

Then, I'm using Auth0 Actions to automatically sign up the user to my newsletter service. Here's the code for the action:

```javascript
exports.onExecutePreUserRegistration = async (event, api) => {
  const consent = event.request.body['ulp-newsletter-consent'];

  if(consent) {
    api.user.setUserMetadata("newsletter_consent", consent);
    api.user.setUserMetadata("newsletter_consent_date", Date.now());

    // Call the newsletter service API to subscribe the user
    await fetch(`https://newsletter-api.example.com/u/${event.user.email}`, {
      method: "POST"
    })
  }
};
```

You'll have to adapt the HTTP call to match your newsletter service API, or, what I prefer to do, is to add the email to a processing queue, which then triggers the newsletter subscription.

<include 
    src="LinkCard" 
    title="There's a lot more you can do with prompts" 
    link="https://auth0.com/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts" 
    description="Explore the documentation to find out other use cases and examples for prompts." 
/>

### Key considerations for this approach:

- **Integrated with Sign-Up Form**: This method seamlessly blends the newsletter sign-up with the user's initial interaction.
- **Social Login & Passkeys**: Keep in mind that this approach won't work if your primary login methods are social logins (e.g., Google, Facebook) or passkeys.
- **Custom Domain and Custom Page Template Required**: To leverage this functionality, you'll need to have a custom domain set up for your Auth0 tenant.

## Method 2: Using Auth0 Forms for Dedicated Consent Collection Step

If you need a more comprehensive consent collection solution or want to gather additional information beyond a simple yes/no for the newsletter, [Auth0 Forms](https://auth0.com/docs/customize/forms) is the solution for you. This approach involves presenting users with a dedicated form during the authentication process, allowing for more detailed data collection and tailored consent options.

Auth0 Forms is a powerful visual editor that empowers you to create custom, dynamic forms that integrate seamlessly with your authentication flows. These forms can be, for example, used for:

- **Progressive profiling**: Collect user preferences, demographics, or any other data relevant to your business.
- **Enforce Policies**: Require users to accept updated terms and conditions or privacy policies before accessing your application.
- **Customize Authentication Flows**: Add steps to your login or sign-up processes, such as email or phone number verification, OTP, account linking, or consent collection.
- **Trigger Custom Actions**: Initiate backend processes or workflows based on user input.

### How Can Auth0 Forms Be Used for Consent?

Auth0 Forms provide a flexible framework for obtaining and managing user consent in various scenarios:

- **Newsletter Sign-Ups**:  Create a dedicated form with clear and concise language to request explicit consent for email communications.
- **Terms and Conditions Acceptance**:  Present updated terms or policies to users and require their acceptance before continuing.
- **Data Usage Consent**:  Seek permission for specific data processing activities, such as personalized advertising or data analytics.
- **Granular Permissions**:  Offer users fine-grained control over their data by allowing them to choose which types of communication they want to receive.

Here's an example of a form that collects information about the user and asks for marketing consent the second time the user logs into the application.

![Example of Auth0 Forms to collect user information and marketing consent](https://images.ctfassets.net/23aumh6u8s0i/74OX4QmLN20UuPpyIbglk4/acfcc586f1f472584b3aacea98974da3/auth0-forms-consent.png)

<include 
    src="LinkCard" 
    title="Auth0 Forms is a great resource to further customize your authentication flow." 
    link="https://auth0.com/docs/customize/forms" 
    description="Explore the documentation to find out how to build your own forms or use pre-defined templates for common use cases." 
/>

### Key considerations for this approach:

- **Universal Compatibility**: Auth0 Forms works seamlessly with all authentication methods, including social logins and passkeys, providing flexibility for your user base.
- **Additional Step**: Be aware that this method adds an extra step to the authentication flow, which, only for the purposes of asking consent, can potentially affect user experience. Consider balancing the need for comprehensive consent with the desire for a streamlined login process.
- **Versatile Usage**: Auth0 Forms aren't limited to just newsletter sign-ups. They can be used for a variety of scenarios, such as accepting terms and conditions, requesting permission for specific data usage, or collecting user preferences. This versatility makes Auth0 Forms a valuable tool for managing ongoing compliance and user engagement.

## Best Practices for Obtaining Explicit Consent

To ensure your newsletter sign-up process is fully GDPR-compliant, there are several best practices you should follow. First and foremost, use clear and concise language on your sign-up forms. Avoid legalese or confusing terminology, and be upfront about what the user is signing up for.

Additionally, consider offering granular consent options. Instead of just one checkbox for all types of communication, you could provide separate checkboxes for newsletters, product updates, or other types of emails. This gives users more control over the emails they receive and can improve engagement rates.

Another effective strategy is implementing a double opt-in process. This means that after a user submits their email address, they receive a confirmation email with a link they must click to verify their subscription. This extra step helps ensure that the email address is valid and that the user genuinely wants to receive your newsletter.

Finally, it makes it easy for users to manage their communication preferences. Provide a clear link in your emails where users can update their subscriptions or unsubscribe altogether. This demonstrates respect for their privacy and can help prevent spam complaints.

## Conclusion

By following the steps outlined in this article, you can seamlessly integrate GDPR-friendly newsletter sign-ups into your Auth0-powered website or application. This not only ensures compliance with data protection regulations but also builds trust with your users, leading to higher engagement and a more successful email marketing program.

Thanks for reading!

Using Auth0 to Collect Consent for Newsletter Signups

Learn how to leverage Auth0 Actions to create custom MFA (Multi-Factor Authentication) workflows, enforce enrollment of users based on specific conditions, and validate user authentication.

Multi-factor authentication (MFA) is an essential security measure that helps to protect your organization's data and assets. By requiring users to provide an additional authentication factor, such as a security token or fingerprint, in addition to their username and password, MFA can significantly reduce the risk of unauthorized access.

However, implementing MFA can sometimes create friction in the user experience, potentially leading to frustration and reduced productivity. Additionally, not all users or scenarios may require the same level of security, making a one-size-fits-all MFA approach impractical.

Auth0 Actions is a powerful feature that allows you to customize and extend the functionality of Auth0. With Actions, you can create custom workflows that trigger in response to specific events, such as user login or registration. This enables you to tailor your MFA implementation to meet your organization's specific needs.

For example, you can use Actions to:

- **Enforce MFA based on user roles or permissions**: You can require certain users, such as administrators or those with access to sensitive data, to use MFA while allowing others to bypass it.
- **Implement risk-based authentication**: You can use Actions to assess the risk level of a login attempt based on factors such as the user's location, device, and IP address. If the risk is high, you can then require the user to provide an additional factor of authentication.

## Prepare your Tenant

Before diving into customizing your Multi-Factor Authentication (MFA) flows, let's make sure we have the essentials in place. This quick guide will walk you through the initial setup steps:

- **Activate MFA**: Head over to your Auth0 Dashboard (<a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID"  data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">Get a free account</a> if you don't already have one) and navigate to [Security > Multi-factor Auth](https://manage.auth0.com/#/security/mfa). Here, you'll be able to activate MFA for your tenant.

- **Choose Your Factors**: [MFA comes in various forms](https://auth0.com/blog/not-all-mfa-is-created-equal/). Decide which factors suit your security needs and enable them on the same Multi-factor Auth page. You might choose options like push notifications, SMS codes, or even biometrics.
    ![Auth0 Dashboard > Security > Multi-factor Auth](https://images.ctfassets.net/23aumh6u8s0i/5NSKKAcGSjkj40ZkTmUlDD/3165f217e14e7a85b9f0304695fdf9d5/MFA_Auth.png)

- **Enable Customization**: To personalize your MFA flows, toggle on the "Customize MFA Factors using Actions" setting. This is like unlocking a secret level – it opens the door to fully customized experiences for your users.
    ![Auth0 Dashboard > Security > Multi-factor Auth > Additional Settings](https://images.ctfassets.net/cdy7uua7fh8z/2hv0ELTkkka3t230SXfxw/46def5395652b2451cfc9e0ad01a371a/MFA_actions.png)

> Actions with `enrollWith` or `enrollWithAny` commands override any existing policies or rules that enable or disable MFA in a tenant.

## Understand the APIs

Once you've enabled Multi-Factor Authentication (MFA) in your Auth0 tenant, you can go beyond the basic settings and create truly customized enrollment flows using Auth0 Actions. Actions are snippets of code that run at specific points in the user's authentication journey, giving you granular control over your authentication workflow and, in particular, how MFA is presented.

To customize your MFA experiences, Auth0 Actions provides a set of APIs designed for enrollment and requiring authentication challenges. Here's a breakdown of the four key APIs you can use: 

### `enrollWith(factor, options)`

Initiates MFA enrollment for a specific factor (e.g., `otp`, `push-notification`, `webauthn-roaming`, etc. Visit the docs to learn about [all supported values](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow/api-object#:~:text=api.authentication.enrollWith(factor%2C%20options)).

Example:

```javascript
api.authentication.enrollWith({type: 'otp'})
```

### `enrollWithAny(factors)`

Similar to `enrollWith` but prompts the user to select an MFA factor to enroll in from the supplied list.

Example:

```javascript
api.authentication.enrollWithAny([{type: 'otp'}, {type: 'webauthn-roaming'}])
```

### `challengeWith(factor, options)`

Challenge the user with one or more specified multifactor authentication factors. This method presents the default challenge first, then allows the user to select a different option if additional factors have been supplied. If the user has not enrolled in any of the factors supplied (including both the default and any additional factors), the command fails.

Example:

```javascript
api.authentication.challengeWith({type: 'otp'})
```

### `challengeWithAny(factors)`

Trigger a MFA challenge and allow the user to select their preferred factor from the supplied list.

Example:

```javascript
api.authentication.challengeWithAny([{type: 'otp'}, {type: 'webauthn-roaming'}])
```

## Create a New Auth0 Action

To begin, let's create a new [Auth0 Action](https://auth0.com/docs/customize/actions/actions-overview). Actions are serverless functions that run in a secure Auth0 environment.

To create an Action, log into your [Auth0 Dashboard](https://manage.auth0.com/#/actions/flows), select Actions from the left sidebar menu, then select Flows. This page shows the different flows you can customize. For our use case, we’ll choose the “Login” flow.

![The “Actions” page of the Auth0 dashboard.](https://images.ctfassets.net/23aumh6u8s0i/3Es0FEV0EEyNeKgN6LXEeM/67763781d697663da79113ba381e8610/actions_flows.png)

This will take you to the “Login” flow page, where you can install, create, and add Actions to the flow.

![The “Login” flow page of the Auth0 dashboard.](https://images.ctfassets.net/23aumh6u8s0i/5dveq8h22H0Nje8Rub6sa9/7071335d4db1571af98440e527f1b999/actions_login_flow.png)

The screen has two main sections: the diagram in the center of the page shows the login flow and the Actions panel.

On the diagram, we can see the default login flow, which contains two states.

- **Start:** The user completed the login form and is ready to log in.
- **Complete:** The system issues the user’s credentials (an ID token and, if required, an access token).

You can drag and drop Actions in between these states to add custom logic to the login flow or deny the login request before the tokens are issued.

On the right panel, we have the Actions panel with two tabs.

- **Installed**: Pre-installed Actions from the [Auth0 Actions Marketplace](https://marketplace.auth0.com/features/actions)
- **Custom:** Actions created for this tenant

To create an Action, click the plus icon on the Actions panel and select "Build from scratch".

![Create a custom Action using the Actions panel](https://images.ctfassets.net/23aumh6u8s0i/3TABItaKOdq9dpsUIdQIpx/47d5010f5642123942ba3b7afd710300/actions_login_flow_create_menu.png)

After that, a modal window will appear to enter the information for our Action: you’ll have to provide a name, and you can leave the trigger and runtime as the default values. For my Action, I’ll name it “Require webauthn MFA for admins”.

![Enter the Action name and click create](https://images.ctfassets.net/23aumh6u8s0i/H6zvDcXGyg2a773gW790H/07ce6e74ee07f115d0e58d6e3863642f/actions_login_flow_create_dialog.png)

After clicking on "Create", you’ll be taken to the Action’s code editor, where you can write the code for your Action, install packages, test it, and more:

![Auth0 Actions code editor page](https://images.ctfassets.net/23aumh6u8s0i/6OzG8Oe3XU8lFnzLIr5Ver/4644c79782edaa0d279d4cf2112ae32c/actions_editor.png)

An Action can make use of two JavaScript functions to alter the Login flow:

- `onExecutePostLogin`: defines what should happen immediately after the user provides login credentials that Auth0 verified. This method receives two parameters, `event` and `api`.
    - `event`: contains details about the login request, such as the user and the context.
    - `api`: contains methods to manipulate the login’s behavior.
- `onContinuePostLogin`: defines what should happen when control returns to the Login Action after a redirect to another web page. It’s used only when the user returns after being redirected, which is why it’s commented out by default.

For this tutorial, we’ll focus on the `onExecutePostLogin` method.

## Writing the Actions Code

Next, we'll write the Action's code that will require users under the Admin's group to use `webauthn` as an additional authentication step. If the user isn't already enrolled with `webauthn`, the first time they login they will be prompted to do so.

The action will make use of the APIs `challengeWith` and `enrollWith`, in addition to using the user's property `enrolledFactors` to determine if the user has an MFA factor enrolled already.

Here's the actual code:

```javascript
exports.onExecutePostLogin = async (event, api) => {
    // Check if the user is an admin, enforce webauthn
    if (event.authorization?.roles?.includes('Admin')) {
        // Check if the user is already enrolled with webauthn
        if (event.user.enrolledFactors && event.user.enrolledFactors.some(m => m.type === 'webauthn-roaming')) {
            api.authentication.challengeWith({type: 'webauthn-roaming'})
        } else {
            api.authentication.enrollWith({type: 'webauthn-roaming'})
        }
    }
};
```

## Attach an Auth0 Action to the Login Flow

After coding and testing your Actions, it’s time to deploy and use them as part of the login flow. Once you are ok with your testing results, you can hit the `Deploy` button on the top right corner of the screen. This will take the existing code and settings and generate a function snapshot you can use in your login flow.

If you ever need to change the code on the function, all changes will automatically be saved as a new draft, and if you want the changes to become effective, you’ll have to deploy your latest version once again.

Once your code is deployed, it doesn’t mean it is actively used as part of your login flow. To check for that, please refer back to the [login flow screen](https://manage.auth0.com/#/actions/flows/login/), where the login diagram is shown. If you don’t see your Action as part of the diagram, it means that, even if your Action is deployed, it has not yet been activated. To activate the Action as part of the flow, click on the “Custom” tab on the Actions panel, locate your Action by name, and simply drag and drop the box over the login diagram between the "Start" and "Complete" steps. After that, you can apply changes using the “Apply” button on the top right corner of the screen.

![Apply an Auth0 Action to the Login Flow](https://images.ctfassets.net/23aumh6u8s0i/5IKiEeHy8WharqTOjJnSLh/eb5025dfd22de94c2446ccc22f1b524d/actions_attach_to_flow.gif)

## Test Your New Authentication Flow

Now, you can try your new Action by logging into your Auth0-powered application using both admin and non-admin accounts. When you log using any method (e.g. username/password, or social login) with a non-admin user, you'll get direct access to your application or continue with the authentication flow as you have it specified for your tenant.

When you log in using an admin user (a member of the group "Admin", as we defined it on the Action), you'll be prompted to either register or validate your account with webauthn. The screen may look something like this:

![Auth0 MFA Validation Step](https://images.ctfassets.net/23aumh6u8s0i/7duWHgEkhhz2e7rLgLJV1X/d174ce044c7a8011f660cd83be1cc815/mfa_validate.png)

## Conclusion

Auth0 Actions provides a versatile and powerful toolkit to revolutionize your organization's MFA implementation. By harnessing the flexibility of Actions, you can create personalized, risk-based, and context-aware MFA workflows that enhance security without compromising user experience.

The ability to tailor MFA requirements based on user roles, risk assessments, and specific applications empowers you to implement a layered security approach. This means that you can enforce stricter MFA for high-risk scenarios, such as administrative access or sensitive data handling while offering a streamlined experience for regular users.

As you explore the possibilities of Auth0 Actions, remember that Customization is key. By experimenting with different workflows and conditions, you can fine-tune your MFA implementation to perfectly align with your organization's unique security requirements and user expectations.

Thanks for reading!

Using Actions to Customize Your MFA Factors

Learn how to create customizable and secure login pages that match your branding to enhance user experience and conversion rates.

So, you've built an outstanding application. Your landing page is meticulously designed, compelling, and has a high conversion rate. You've carefully crafted every detail of the user experience, but what about the entry points to your app – the signup and login pages?

Often overlooked in the design process, these critical touchpoints serve as the users’ gateways into your application. They should be as compelling, user-friendly, and beautiful as the rest of your application. Just as the landing page captures the user's attention, the login and signup pages are where you can truly start to engage users, encouraging them to join your application.

In this article, we'll explore how Auth0 makes it easy to build login and signup experiences that not only align seamlessly with your branding but also provide a superior user experience. A poorly designed login page can lead to user frustration and higher abandonment rates, whereas a well-designed one establishes trust and encourages engagement. Because every aspect of your application, even the seemingly mundane, should be nothing short of beautiful.

Let's dive into how Auth0 can elevate your login experience, covering the importance of UI and UX, and offering practical tips to create extraordinary login flows.

## The Importance of the Login Page Design

The login page is often the first impression a user has of your application. It sets the tone for the entire user experience and can make or break a user's decision to continue using your app.

The design of a login page encompasses both UI and UX. It should not only be pretty but also easy to use while conveying a sense of security and trustworthiness to the user.

If you need inspiration or to learn some tips on what makes good login pages extraordinary, check out these [ten tips](https://www.invisionapp.com/inside-design/login-page-design/).

## Getting Started

Auth0 offers a variety of [customization options to match your application's branding and design](https://auth0.com/blog/customize-auth0-universal-login-with-auth0-cli/). With Auth0, you can rest assured that your login and signup pages will be not only beautiful and match your brand but also secure and reliable.

In many scenarios, those out-of-the-box settings are all you need to make your login and signup pages match your brand and style. But in case you want a completely customized page, Auth0 offers the possibility to create your own styles and designs using [HTML, CSS, and JavaScript templates](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates). 

> Custom templates require enabling [custom domains](https://auth0.com/docs/customize/custom-domains), which is a paid feature.

In this article, we’ll focus on creating our own template to have full control over the login experience. However, if you would like to know how to set up your branding settings instead, you can refer to this article on [Customize Auth0 Universal Login with Auth0 CLI](https://auth0.com/blog/customize-auth0-universal-login-with-auth0-cli/).

You can work with templates either through the [Auth0 Dashboard](https://manage.auth0.com/#/login_page) with an integrated code editor and preview mode, or you can use the [Auth0 CLI](https://github.com/auth0/auth0-cli) with your editor of choice and [Storybook](https://storybook.js.org/) to preview your designs.

Throughout the article, we'll use the Auth0 CLI to customize the templates as it provides a rich developer experience.

## Setting up the Auth0 CLI

The Auth0 CLI is a powerful tool that allows you to manage your entire Auth0 tenant from the command line. The Auth0 CLI helps you simplify your workflows and set up automation on your Auth0 account.

### Install the Auth0 CLI

The Auth0 CLI is available for macOS, Linux, and Windows. To install it on your preferred OS, please follow [these installation instructions](https://github.com/auth0/auth0-cli#installation).

After your installation completes, you can verify the installation by running the following command:

```bash
auth0 -v
```

### Connect the CLI to your Auth0 Account

To connect the CLI to your Auth0 account, you'll need to log in. Run the following command in your terminal and follow the instructions to authenticate:

```bash
auth0 login
```

First, the CLI will prompt for one of two authentication methods, `As a user` or `As a machine`. For now, we’ll select `As a user` since it is the recommended option for a personal computer. However, for automation scenarios, it is recommended to select the latter.

Next, we need to authenticate in the browser using [device authorization flow](https://auth0.com/docs/get-started/authentication-and-authorization-flow/device-authorization-flow). The Auth0 CLI will show a code on the screen and will open a browser session, where the code should match, and after verification, you’ll have to authorize the CLI on all the requested scopes.

## Activate a Custom Domain

As mentioned before, a requirement for editing custom templates is to activate custom domains, which is a good practice for production. Since custom domains come in different configurations and multiple steps, I won’t be covering them in this article. Instead, I can refer you to the [custom domains documentation](https://auth0.com/docs/customize/custom-domains), where you can find all the information you’ll need with step-by-step instructions.

Once you have a custom domain set up on your account, you can continue with the rest of the article.

## Customizing the Universal Login UI

To start customizing the Universal Login UI, run the following command on your terminal:

```bash
auth0 universal-login customize
```

This will open the Auth0 customization editor on your browser which will allow you to change any visual settings in Universal Login, from colors, logo, texts, and you can design your own templates with live preview in this app.

![Auth0 Universal Login Editor Preview](https://images.ctfassets.net/23aumh6u8s0i/5YNs9FYoGfPXrMon6OMpkY/88008ca9b492268c60724883011271f0/Screenshot_2024-04-18_at_09.41.25.png)

Any changes that you make locally can then be deployed to your Auth0 tenant from the same UI.

### Exploring the UI

The UI customization tool is divided into three sections:

- **Navigation bar**: It allows you to work on different areas of customization, from settings, theme, page template and custom texts. It also allows you to navigate through the different prompts like login, signup, etc.
- **Editor**: On the left side, it's the editor. It will display information about the current state of your page in either JSON for settings or HTML code for the page template editor.
- **Preview window**: The preview window gives you a live preview of your changes and how your UL page will look like when deployed to your tenant.

## Building a Beautiful Template

If you jump into the **Page Template** section, the editor will load the current template available for your tenant. If you have never customized your template, it will display the default template which looks like this:

```html
<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body>
</html>
```

There's some custom code in that template, let's explore what each of those sections do:

- `{%- auth0:head -%}`: This will set all the head elements that are required for universal login to work, like importing scripts, basic styles, etc.
- `{%- auth0:widget -%}`: This will place the login widget on the screen.

Templates use [Liquid syntax](https://shopify.github.io/liquid/basics/introduction/), with variables you can use to further customize your experience. You can read about all variables available [here](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates).

One of the benefits of using Auth0's rich templating system is the ability to customize logic depending on the current prompt. For example, you could have some parts of the UI shown on the signup screen but not on the login or other prompts. The term prompt is used to refer to a specific step in the login flow. Each prompt can have one or more screens. For example, the `reset-password` prompt would have multiple screens for resetting password requests, checking your email, entering a new password, and confirming your change. You can find the complete list of prompts and screens on the [official template variables documentation](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates#:~:text=screen%20being%20rendered.-,The%20term%C2%A0prompt,-is%20used%20to).

You can do that by implementing conditionals over the variable `prompt.name`. Here's an example that renders additional content when the user is signing up.

```text
{% if prompt.name == "signup" %}
Show this only if the user is signing up
{% end %}
```

As part of templating, you can also set custom brand parameters, such as the brand's primary color, background, and logo, which you can use throughout the template by accessing the `branding` variable.

For example, if you need a button that aligns with the branding's primary color, you could implement it as follows:

```html
<button style="background-color: {{branding.colors.primary}}" ...>My Button</button>
```

Now that we know what we can do with the templating system, it's time to build your own.

Here's what I'll build. Feel free to copy and paste this template and customize it to your application or use it as a baseline for your own.

- Signup screen:
	![Custom Signup Screen](https://images.ctfassets.net/23aumh6u8s0i/5u5pK7O3FLMInWmakSjRAr/99dce5b115abc63d90ea271440f1afa6/custom-template-signup.png)
- Login screen:
	![Custom Login Screen](https://images.ctfassets.net/23aumh6u8s0i/3dzWx5rQ3xiIgqUTyBTqXT/0fee59fa6b4f593f5771ed4e25d8100d/custom-template-login.png)

What’s interesting about this design is that the signup page looks different from the rest as it provides additional information about the product, so users know what they are signing up for. I also make use of variables to set the branding color on custom elements and I added some responsive elements for tablets and mobile devices.

Here is my template for your reference:

```html
<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}

    <style>
        body {
            background-color: #fff;
        }

        .wrapper {
            max-width: 80rem;
            margin: 0 auto;
        }

        {% if prompt.name == "signup" %} 
        .container {
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }

        @media screen and (max-width: 720px) {
            .container {
                display: flex;
                flex-direction: column;
            }
        }

        .container > .info {
            max-width: 28rem;
            padding: 1rem;
        }
        {% else %}
        .container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container > .info {
            display: none;
        }
        {% endif %}

        .container > .info h2.title {
            font-size: 3rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            font-weight: bold;
        }

        .container > .info p.subtitle {
            color: #718096;
        }

        .container > .info ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .container > .info li {
            color: #1A202C;
        }

        .container > .info li svg {
            color: #5CC98D;
            vertical-align: text-bottom;
            margin-top: 1.5rem;
        }

        .container > .login-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4rem;
        }

        .container > .login-box svg {
            position: absolute;
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div class="wrapper">
        <div class="container">
            <div class="info">
                <h2 class="title">My Product</h2>
                <p class="subtitle">My product is awesome and it offers the following features:</p>
                <ul role="list">
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 1
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 2
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 3
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 4
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 5
                    </li>
                </ul>
            </div>
            <div class="login-box">
                <svg width="1013" height="890" viewBox="0 0 1013 890" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M180.462 795.681L40.8315 567.776C19.5801 533.09 8.95466 515.747 4.64446 497.091C0.831363 480.586 0.608543 463.413 3.99145 446.712C7.81567 427.835 17.9843 409.924 38.3214 374.102L184.235 117.101C203.682 82.8483 213.405 65.722 227.028 52.9648C239.084 41.6743 253.303 32.9153 268.81 27.225C286.332 20.7958 306.003 19.8141 345.345 17.8502L644.507 2.91668C685.874 0.851143 706.557 -0.18069 725.22 4.94606C741.731 9.48141 757.023 17.479 770.074 28.4042C784.827 40.7544 795.51 58.1913 816.877 93.066L955.838 319.878C977.009 354.434 987.595 371.712 991.91 390.3C995.728 406.747 995.98 423.86 992.649 440.515C988.883 459.337 978.815 477.215 958.678 512.969L811.011 775.156C791.315 810.127 781.466 827.612 767.593 840.563C755.316 852.023 740.811 860.86 724.997 866.515C707.127 872.905 687.074 873.638 646.968 875.103L350.229 885.943L350.228 885.944C309.449 887.433 289.06 888.178 270.689 882.944C254.434 878.313 239.396 870.318 226.557 859.48C212.045 847.23 201.517 830.047 180.462 795.681Z" fill="{{branding.colors.primary}}"/>
                    <path d="M179.711 769.196L58.7659 539.848C40.3585 504.942 31.155 487.489 28.2839 469.088C25.744 452.808 26.7984 436.065 31.3778 419.97C36.5543 401.778 47.9229 384.859 70.66 351.022L233.792 108.259C255.534 75.9041 266.405 59.7266 280.801 48.0099C293.543 37.6402 308.23 29.8499 323.963 25.1169C341.74 19.7693 361.233 19.8416 400.221 19.9857L696.692 21.0815C737.687 21.2325 758.184 21.3089 776.23 27.2798C792.194 32.562 806.699 41.1538 818.774 52.4806C832.423 65.2849 841.676 82.8321 860.183 117.928L980.548 346.176C998.887 380.95 1008.06 398.337 1010.94 416.674C1013.49 432.897 1012.46 449.584 1007.94 465.636C1002.82 483.778 991.558 500.669 969.023 534.451L803.775 782.175C781.734 815.216 770.713 831.737 756.054 843.629C743.084 854.153 728.106 862.004 712.074 866.687C693.957 871.978 674.104 871.643 634.398 870.973L340.624 866.016L340.623 866.016C300.251 865.335 280.065 864.994 262.316 858.934C246.611 853.572 232.358 844.996 220.486 833.765C207.067 821.072 197.948 803.779 179.711 769.196Z" fill="{{branding.colors.primary}}"/>
                </svg>
                {%- auth0:widget -%}
            </div>
        </div>
    </div>
  </body>
</html>
```

## Explore Your Own Designs

By the end of this article, you can now design and customize signup and login experiences with Auth0 that are as beautiful and user-friendly as the rest of your application. With the power of custom templates, you can integrate your brand's color palette, unique fonts, and more. I'd love to see the unique and effective login experiences you create! Please share screenshots or links in the comments below.

Thanks for reading!

Building Beautiful Login Pages with Auth0

michael-swanson

I live in Austin, TX with my wife, Anneke, and our two kiddos, Ilya (5) and Everett (2). I am a native Texan but lived in multiple places across the southern US as a kid. I have family in Houston TX and Midland TX that we visit on a regular basis. Prior to joining Okta, I worked with early stage startups as a hands-on Product Manager, team lead, and product designer, while also writing (mostly frontend) code. 
<br>

When I am not working you can usually find me chasing my kids around, reading sci-fi or fantasy novels, or playing needlessly complex strategy board games with friends. I am also a huge Star Wars fan and am always down to talk about the latest Star Wars movies, TV, and/or books. Additionally, Anneke and I love to travel and have been all over the world together. Much of our travel focuses on getting out of the Texas heat, tasting and learning about wine, and sampling the amazing food we find along the way!


Senior Product Manager

Michael Swanson

Businesses using Auth0 by Okta’s Universal Login, can leverage a pro-code option to customize signup and login flows to address unique needs.

Every company has unique user registration and login requirements. For example, needing to capture a first and a last name during signup or requiring users to agree to terms and conditions before they can create an account. 

To meet those specific business needs and use cases, we have introduced pro-code customizations for signup and login to the Universal Login experience. This capability is available to customers on our Enterprise and Professional plans.

Using this capability, customers can insert additional form fields and custom content into the signup and login screens and include client and server-side validations to ensure that required data, such as TOS acceptance, are completed and validated before completing the authentication process. 

Use cases include:

* Adding new fields to collect necessary customer data (name, phone number, email, preferences, consent, etc.)
* Adding new form elements for presenting and capturing TOS/privacy policy and opt-in before signup
* Adding custom content such as URLs, images, or marketing information
* Localizing custom elements in different languages

### Getting started

The new [Partials API](https://auth0.com/docs/api/management/v2/prompts/get-partials) allow developers to insert custom HTML, CSS, and Javascript into the Signup and Login screens. Developers can insert new form elements and custom content, perform asynchronous client-side validation via Javascript, and leverage [Liquid syntax](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) to perform conditional logic and insert dynamic variables. Here is an example of inserting custom code into the Signup screen:

```js
# eg: PUT /api/v2/prompts/signup/partials

# Request Body
{
  "signup": {
    "form-content-start": "<div class='ulp-field'><label for='first-name'>Full Name</label><input type='text' name='ulp-full-name' id='full-name'></div>",
    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a></label></div>",
  }
}

```

Once the user submits the Signup form customers will have access to the data via Actions. Here is an example of saving user provided custom data to the user_metada for the end user

```js
/**
* Given this code in the signup form:
* <div class="ulp-field">
*   <label for="full-name">Full Name</label>
*   <input type="text" name="ulp-full-name" id="full-name">
* </div>
* <div class="ulp-field">
*   <label for="terms-of-service">
*     I agree to the <a href='https://my.app/terms' target='_blank'>Terms of service</a>
*   </label>
*   <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
* </div>
**/

exports.onExecutePreUserRegistration = async (event, api) => {
  const fullName = event.request.body['ulp-full-name'];
  const terms = event.request.body['ulp-terms-of-service'];
  
  if(!fullName) {
    api.validation.error("invalid_payload", "Missing Name");
    return;
  }
  
  if(!terms) {
    api.validation.error("invalid_payload", "Acceptance is Required");
    return; 
  }

  api.user.setUserMetadata("fullName", fullName);
  api.user.setUserMetadata("termsAcceptance", terms);
};

```

To learn more about how Signup and Login Prompt Customizations works and to view tutorials and examples, refer to the public documentation.

* Custom-facing Documentation: [Customize Signup and Login Prompts](https://auth0.com/docs/customize/universal-login-pages/customize-signup-and-login-prompts)
* Management API Documentation: [Auth0 Management API v2: Manage Partials](https://auth0.com/docs/api/management/v2/prompts/get-partials)

Customizations for Signup and Login are Generally Available

Sam Yapkowitz

I began my career in enterprise software development and got exposure to lots of different frameworks and methodologies. I quickly realized my passion was in the architecture and design of solutions to unique problems. I now get to use these skills to help my customers build high-quality experiences using Okta. When not at work you can find me on the golf course, playing Rocket League or watching football with my friends.

Senior Solutions Engineer

Learn how to perform A/B testing on the Universal Login page using Liquid templates and custom parameters.

There is no way to natively A/B test the Universal Login as of today. But, it can be achieved with the use of the [Liquid](https://shopify.github.io/liquid/basics/introduction/) templates that power the Universal Login, custom parameters passed from the client side, and an A/B testing platform such as [Split.io](http://split.io/), [Google Optimize](https://marketingplatform.google.com/about/optimize/), or [LaunchDarkly](https://launchdarkly.com/).  A/B testing, also known as split testing, refers to a randomized experimentation process wherein two or more versions of a variable (web page, page element, etc.) are shown to different segments of website visitors at the same time to determine which version leaves the maximum impact and drives business metrics.

## What Is the Universal Login?

Auth0 Universal Login (UL) defines your login flow, which is the key feature of an authorization server. Whenever a user needs to prove their identity, your applications redirect to Universal Login, and then Auth0 will do what is needed to guarantee the user's identity.

When using Universal Login, you don't have to do any integration work to handle different methods of authentication. You can start off using a simple username and password, and then add other features, such as social login and multi-factor authentication (MFA).

Configuring Universal Login is dynamic (and does not require application-level changes) because all functionality is driven by the web pages served by the centralized Authentication Server. Your applications benefit from any improvements Auth0 makes in the login flow without the need for you to change your code.

You can create a consistent, branded login experience by customizing the login page appearance and behavior from the Auth0 Dashboard. For advanced use cases, you can even change the code of each page.

To learn more about the differences between Universal Login and embedded login, read [Centralized Universal Login vs. Embedded Login](https://auth0.com/docs/authenticate/login/universal-vs-embedded-login).

## Universal Login Liquid Templates

The UL can be modified through the use of Liquid [templates](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates).  To work with these Liquid templates, you will need to configure a [Custom Domain](https://auth0.com/docs/customize/custom-domains). These templates allow you to define the HTML, CSS, and JS that are shipped to the client when making an `authorize` request. These Liquid templates allow you to run conditional logic based on the Liquid syntax. This functionality allows you to provide a unique UX based on things such as application, organization, tenant, locale, and specific screen. There is the ability to pass specific query parameters during an `authorize` request that can be accessed inside the Liquid template syntax for even further customization options. These parameters must be prefixed with `ext-` to be honored by the UL. These can be accessed through `transaction.params.ext-{param}`. With these parameters, we can now specify different versions of the UL to render for a user. Here is a Liquid template example of conditionally branding the UL based on one of the custom query parameters. This example leverages the param `ext-alt-brand`:

```html
<!DOCTYPE html>
<html lang="{{locale}}">

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if transaction.params.ext-alt-brand == "portal_0" %}
      body {
        background-image: radial-gradient(blue, rgb(200, 200, 200));
      }
      #custom-prompt-logo {
        background-image: url('https://banner2.cleanpng.com/20180328/roq/kisspng-circle-logo-symbol-font-templates-5abbf957bfda53.1977074015222685037859.jpg');
      }
      {% elsif transaction.params.ext-alt-brand == "portal_1" %}
      body {
        background-image: url("https://images.unsplash.com/photo-1592450865877-e3a318ec3522?ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      #custom-prompt-logo {
      background-image: url('https://bootstraplogos.com/wp-content/uploads/edd/2017/11/logo-51.png');
      }
      .prompt-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 480px;
        height: 100%;
        justify-content: center;
        background-color: rgb(247, 198, 233);
      }
      {% else %}
      body {
        background: linear-gradient(-45deg, #ff44dd, #3885ff, #3ec6eb, #1bc99f);
        background-size: 100% 100%;
      }
      #custom-prompt-logo {
        background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
      }
      {% endif %}
      {% if organization != null && organization != undefined %}
        #custom-prompt-logo {
            background-image: url({{ organization.metadata.logo_url }});
        }
        body {
            background: linear-gradient({{ organization.metadata.linear_gradient }})
        }
      {% endif %}

  </style>
  </head>
  <body class="_widget-auto-layout _use-custom-prompt-logo">
      <div class="prompt-wrapper">
        {%- auth0:widget -%}
      </div>
  </body>
</html>
```

When the value of the param `ext-alt-brand` is `portal_0`, the following version of the login page (say, version A) will be shown:

![Universal Login test page version A](https://images.ctfassets.net/23aumh6u8s0i/HaEPIJiEdF8m9l9XI96i2/a2b427c463052ef25e8e1395d83497ab/universal-login-test-a.png)

When the value of the param `ext-alt-brand` is `portal_1`, version B of the login page is shown:

![Universal Login test page version B](https://images.ctfassets.net/23aumh6u8s0i/5hWtq9COZWNfSAXgvzwB4r/ad29b45a10bd7d3f3843f87c8c93eeba/universal-login-test-b.png)

> Note: You can see the domain and application are the same, yet we have a unique UX for an A/B test.

## Client-Side Implementation

There are many ways to accomplish an A/B test with the Universal Login now that we understand how to render separate versions of the UX. A traditional A/B test will have equal weights between all of the options, and upon a user entering one of these flows, the first step would be to check the browser for a cookie indicating whether a particular user has entered into the experiment already.

If the user is new, they will be assigned one of the pathways for the experiment and then be delivered the content for the item. If a user has previously entered the experiment, we can examine their cookie to determine which pathway they belong to and continue delivering them that same content to provide a consistent UX for the lifetime of the experiment.

This can be implemented manually, but many providers offer this service OOTB, such as Split and LaunchDarkly, to help you make this piece more flexible as you run more experiments or implement feature flagging from a deployment perspective. For this writeup, I have built out examples leveraging both Split and Google Optimize.

To put the final piece in place, my application is built with Next.JS and deployed on Vercel to take advantage of their [Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware) capability. This piece is purely preference, and is very dependent on your current implementation of CIC. The Edge Middleware functionality on Vercel allows you to intercept requests on the edge and rewrite URLs extremely quickly. This allows you to decouple the A/B test from your client-side authentication logic. For instance, any place in my application can continue to leverage the same login route without needing more logic to be added. The Edge Middleware then interfaces with my A/B provider to read/write cookies as well as modify the login route to supply the proper parameter during the `authorize` request. You can view the source code for the [Google Optimize](https://github.com/samyap4/auth0-ab-testing-optimize) example and the [Split](https://github.com/samyap4/auth0-ab-testing-split) example on my GitHub.

## Live Examples

Here are snippets of the live examples in action on [Split](https://auth0-ab-testing-split.vercel.app/). The cookie being set here is called `flag-universal_login`. This is version A in action:

<AmpContent>
<amp-youtube
    data-videoid="dnjnnIVDp-Q"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  class='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/dnjnnIVDp-Q'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

Here is version B in action:

<AmpContent>
<amp-youtube
    data-videoid="zgj5SpiRuVo"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  class='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/zgj5SpiRuVo'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

You can see the application is the same, and I can generate a different UX based on the cookie being set by my [Split.io](http://split.io/) configuration.

## Implementing Analytics

Now that we have demonstrated how to deliver different experiences to different users, the final step of the A/B testing journey will be to start gathering metrics about how users are interacting with your content. We already discussed that we can leverage the templates to bring in custom scripts to your Universal Login screens. You can use whatever service you like for tag management, such as [Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/).

## Conclusion

At Auth0, we aim to provide a high-quality service and developer experience for our customers. The first interaction with your customers is often times a login screen, so we understand how important it is for the user experience to be top-notch. With our hosted Universal Login, we take away the burden of deploying and maintaining these highly secure workflows. With the capabilities of our templates outlined in this post, we are able to help your teams iterate more quickly and customize the experience to be sticky for your brand and ultimately help your business grow.


Universal Login A/B Testing

william_johnson

  Will Johnson is a Developer Advocate at Auth0. He loves teaching topics in a digestible way to empower more developers. He writes blog posts, records screencasts, and writes eBooks to help developers. He's also an instructor on <a target='_blank' rel='noopener noreferrer' href='https://egghead.io'><strong><b>egghead.io</b></strong></a>.


Developer Advocate

Will Johnson

Use the Auth0 CLI to customize the colors of the Universal Login page.

Your login screen is the very first thing people see before they enter their personal information on your website. You want to give the best impression possible. Securing their data with Auth0 is a great first step. It also leads to a login page branded with the colors and the logo of Auth0. Don't get me wrong, the branding looks excellent, but the inconsistent branding can startle some users.

Today you'll learn how to use the [Auth0 CLI](https://github.com/auth0/auth0-cli) to customize your login page without leaving your terminal.

## What You'll Need

You need a couple of things in place to follow along with this tutorial: 

* **Auth0 Account.** If you do not have one, you can sign up for a <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">free Auth0 account</a>.

* **Application in your Auth0 tenant.** If you don't have an application in your Auth0 dashboard, don't worry; I will show you how to download one of Auth0's quickstarts.

## What Is the Auth0 CLI

Auth0 wants to create tools that make developers' work more manageable since we are a  developer-first company. With the CLI, we're reducing the number of steps and clicking around you have to do on the Auth0 Dashboard and keeping your workflow in the terminal. 

This allows you to set up your applications faster, test logging in, get error log information, and more within the terminal. I'm blown away by how many features are packed in this tool. Today, I'll show how to update an application's login page in your Auth0 Dashboard.

> Get an introduction to the Auth0 CLI by reading [this blog post](https://auth0.com/blog/introducing-auth0-cli/).


## Install the Auth0 CLI 

You can install the Auth0 CLI on macOS, Windows, and Linux. Here are the commands for each:

### macOS with Homebrew

```bash
brew tap auth0/auth0-cli && brew install auth0
```

### Windows manual installation

* Download the Windows binary from the latest release: [https://github.com/auth0/auth0-cli/releases/latest/](https://github.com/auth0/auth0-cli/releases/latest/)
* Extract
* Run `auth0.exe`

### Linux with Homebrew

```bash
 brew tap auth0/auth0-cli && brew install auth0
```

I always like to double-check after I install new tools. With the newly available `auth0` command, type `auth0 -v` to check the version and confirm the installation. The next thing you need is to sign to your Auth0 account and authenticate the CLI.

### Connect CLI and login to Auth0 account

Sign in to your Auth0 account from the CLI by typing:

```bash
auth0 login
✪ Welcome to the Auth0 CLI 🎊

If you don't have an account, please go to https://auth0.com/signup

Your Device Confirmation code is: JKHH-QKFM

 ▸ Press Enter to open the browser to log in or ^C to quit...
```

You'll get welcomed to the Auth0 CLI, and you'll get a confirmation code. Press **Enter** on your keyboard. This will open a page in your browser asking you to verify the code on this page matches the one on the CLI. Click **Confirm**.

![Auth0 CLI Device Confirmation Page](https://images.ctfassets.net/23aumh6u8s0i/44GTGeMlFm6LTsdejiHGyl/fa7b4b313b99a3af9276a7e8f07a0ab4/device-confifmation.png)

Next, you meet the _Authorize App_ page. You can choose which Auth0 tenant you want to log in to if you have more than one. You'll see a long list of permissions that the Auth0 CLI wants to have on your account. Scroll down and click **Accept**

![Auth0 Authorize App Page](https://images.ctfassets.net/23aumh6u8s0i/2jFFU4iSSeFng3B18oPWH3/d5b71fc09e702d7d59cba32c2848a0c0/auth-cli.png)

Back in your terminal, you'll see a message that you're logged in successfully. 

```bash
Waiting for login to complete in browser... done

 ▸    Successfully logged in.
 ▸    Tenant: YOUR_AUTH0_DOMAIN.us.auth0.com
```

If you already have an application in your Auth0 tenant, you can skip to **[Edit the Universal Login Page](#Edit-the-Universal-Login-Page)**.

### Create a new application with Auth0 quickstart

If you don't have an application registered in the Auth0 Dashboard, you can create one from the CLI. Run the following command:

```bash
auth0 app create
```
The CLI will ask you to name your application and write a description for it. Then, you'll be asked to choose a type in this example, I'll a React application, so select **Single Page Application**. After that, you'll be asked to enter _Allowed Callback URL_ then _Configure Logout URLs_ enter `http://localhost:3000` to follow along with this example. You'll get a message confirming you created your new application successfully.


```bash
 Name: New CLI app
 Description: testing this out
 Type: Regular Web Application
 Allowed Logout URLs: http://localhost:3000
```


Now that you're logged and have an application created, you can edit the login page.

## Edit the Universal Login Page

There are two ways to edit the login page. One way requires a custom domain on your Auth0 account because it sets up a custom page template with custom HTML and JavaScript. 

The second option lets you only update the colors and logos. This post will show you the latter.

> Custom domains is an Auth0 paid feature that lets you use your own domain name on the login page. Learn more about them by [checking out the Custom Domain docs](https://auth0.com/docs/customize/custom-domains)

Run the `branding update` command to customize the colors and logo.

```bash
auth0 branding update
```

The first prompt that you'll get will ask for the accent color. It will take hex color code. I'm going to use this lovely shade of purple `#664EAE`

The following prompt is for the background color. This changes the color of the _Login_ button. The default is black; I will use `#FFF` for white.

```bash
Accent Color: [? for help] #664EAE
Background Color: [? for help] #FFF
```

After that, you'll get a message in the terminal saying your tenants' branding is updated.

Below that, you'll see some other options you can update as well. Like the favicon and the logo:

```bash
 ACCENT COLOR #664EAE 
 BACKGROUND COLOR #FFF 
 LOGO URL 
 FAVICON URL 
 CUSTOM FONT URL 
```
Let's replace the Auth0 logo with yours. Make sure that the logo URL uses the `https` scheme.

To update the logo, run the `auth0 branding update` command, but this time add the `--logo` flag with the URL for the logo:

```bash
auth0 branding update --logo "https://URL_OF_LOGO"
```
You'll then see another message confirming that the branding for this Auth0 domain has been updated.

```bash
=== YOUR_AUTH0_DOMAIN.auth0.com branding updated
```

You'll probably want to see the beautiful login page. Right? You can do that right from the command line without running your whole app.


## Test the New Login Screen

Testing out logins on the Auth0 dashboard is a fast process. With just two clicks on the mouse, you could have a login screen for your account up and running.

It's even faster with the CLI. First, enter the `auth0` test command with the `login` option. Next, you're asked to select which application you want to test. Then, you are asked to choose a domain. Finally, you're asked, `Do you wish to proceed?`. Type `Y` for yes:

```bash
> auth0 test login
 Client ID: Testing CLI (Eo2zq27soy4CzgCugBGGLGub3kkWvf3c)
 Custom Domain: none (use dev-training-test.us.auth0.com)
 ▸ A browser window will open to begin this client's login flow.
 ▸ Once login is complete, you can return to the CLI to view user profile information and tokens.

 Do you wish to proceed? Yes
```

After that, a browser window will open, and you'll see your new custom login page! 

![Auth0 Custom Login Page](https://images.ctfassets.net/23aumh6u8s0i/7suWtKxX7i3N3pF6OIQamW/75c6e9c156ab5aef8018ddc7ca515f42/custom_login.png)


## Summary

The Auth0 CLI takes several features from the Auth0 dashboard and puts them right at your fingertips. 

It can handle logging in and connecting to your Auth0 account. 
You can create and configure new applications. 
You can even update the colors and preview the login page! 

You can use all these features and more without leaving your terminal.

The Auth0 CLI has even more features to explore that will improve your workflow! You can find out other commands and features by reading the [Auth CLI docs](https://auth0.github.io/auth0-cli/).

Let me know in the comments what you find out! 

Customize Auth0 Universal Login with Auth0 CLI

auziros:jeana-tahnk

Jeana has been in the tech industry for 15+ years, both as a communications professional and writer. As Director of Global Communications at Auth0, she works with her internal team and external agencies to amplify the company's visibility worldwide and establish its leadership in the identity industry. When she is not working, she can most likely be found on a field watching one of her three kids playing sports, or cleaning up after her one-year-old retriever who chews everything.

Senior Director, Global Communications

Jeana Tahnk

Social login integration for popular app now available to all Auth0 customers


**TOKYO -- August 26, 2019 --**  [Auth0](https://auth0.com/), a global leader in Identity-as-a-Service (IDaaS) today announced that [LINE](https://line.me/en/), the dominant communication app in Japan, is now supported as a social identity provider for Auth0. [LINE Login](https://developers.line.biz/en/services/line-login/) enables developers to quickly and seamlessly integrate it into their applications, making social login easier for millions of consumers across Japan.

With more than 81 million monthly active users in Japan, LINE is one of the most widely-used messaging apps for seamlessly connecting people, information, services, business, and brands. Now available on the Auth0 platform, LINE is joining more than 30 other social identity providers, enabling Auth0 customers to integrate LINE Login in as little as a few minutes.

"Our mission is to make connections possible for our customers, whenever and wherever they want them," said Shinichro Isago, Platform Evangelist Manager, Developer Relations at LINE Corporation. "By enabling LINE Login via its platform, Auth0 is helping to extend our customer philosophy of facilitating connections and access to information as conveniently as possible."

Social login provides many advantages to users and the brands that implement it. Consumers benefit from hassle-free and secure logins, brand consistency across channels (web, mobile), and a much better overall experience. Brands offering social login with LINE can realize many benefits as well, including increased user registrations, in-depth user profiles for personalized content campaigns, centralized user management, and increased brand satisfaction.

"Customers understand the positive impact social login has on their users, and more importantly, the friction it eliminates from any interaction with their brand," said Jun Fujita, general manager of Auth0 Japan. "We are excited to offer integration for the most dominant messaging app in Japan, and look forward to seeing its implementation throughout our customer base."

Learn more about the [LINE Login integration](https://auth0.com/blog/line-login-now-supported-with-auth0/) with Auth0.

<include src="asides/AboutAuth0" />

### Media Contacts

Jeana Tahnk<br>
Corporate Communications<br>
Auth0<br>
[jeana.tahnk@auth0.com](mailto:jeana.tahnk@auth0.com)


Auth0 Integrates Social Login for LINE

diegopoza

System Engineer, geek, foodie, technology lover, speaker.

Sr Manager, Developer Advocacy

Diego Poza

Enable your upmarket strategy with the right technical infrastructure



Enterprise customers are demanding.

Long sales cycles, filled with requests for custom features and integrations, can monopolize your developers and your sales team. If a contract falls through, a lot of time and money will fall through with it.

But the [_move upmarket_](https://auth0.com/blog/how-to-go-upmarket-and-grow-your-revenue-by-20x/) doesn't need to be such a struggle. If you're willing to slightly alter your sales strategy, you can quickly impress new clients and close enterprise deals.

Enterprise clients present three primary challenges to growing B2B companies:

1. **Legacy technology stacks**: Enterprises prioritize stability and often favor products from companies that have long histories in their industries.
2. **Intensive security demands**: Enterprises handle large volumes of data that make security breaches especially risky.
3. **Unique needs**: Enterprises have numerous stakeholders who need to be satisfied, some of whom will demand simplicity and others customization.

With Auth0's [_B2B federation_](https://auth0.com/b2b-enterprise-identity-management/), you can shorten the sales cycle with compatible infrastructure, ensure that the connections between your product and their employees are secure, and address their unique needs with custom configurations.

![Auth0 helps B2B companies grow](https://images.ctfassets.net/23aumh6u8s0i/76cbcjek9FIZY6nxQmvdZR/f0a096097a955ecfb53f099394e91092/b2b_1)

## Offer Compatibility Options to Shorten Your Sales Cycles with Enterprise Customers

The bigger an organization gets, the more internal and third-party tools — all potentially built on different stacks with different protocols — are likely to be in use. The person you're initially selling to might not even know all the infrastructure complications lying in wait.

A primary example is identity and access management (IAM) providers. Your ability to integrate with whichever provider your customers use can drastically shorten or lengthen the sales cycle. If they use Active Directory (and _[hundreds of thousands do](https://auth0.com/blog/analysis-of-enterprise-connections-data/)_), you'll need to implement that before you can close the deal.

If you let the sales cycle stretch out (already _[estimated at 3-6 months](https://saasmetrics.co/benchmark-for-b2b-saas-sales-cycles/)_ for deals that exceed \$100,000 in annual contract value), your internal advocate might move to a different position or company, or the benefits of your initial pitch might not remain relevant. Meanwhile, you might be losing out on other opportunities as you pay expensive developers to make your back end work with theirs.

Worse, if your next customer has a different back end, you'll have to do it all over again.

Auth0 offers B2B federation that _[integrates with 10+ IAM providers](https://auth0.com/blog/how-enterprise-federation-helps-shorten-the-sales-cycle/)_. With a few lines of code, you can configure any enterprise connection, including Active Directory, LDAP, ADFS, SAML, and more.

![Auth0 enterprise connections](https://images.ctfassets.net/23aumh6u8s0i/6HTuHDmDrVhGoM64N5W5VT/fbf838da10673560329d5dfcd92070f3/why-federation-is-your-secret-weapon-for-enterprise_auth0-enterprise-connections)

B2B federation provides the technical compatibility that makes your product more trustworthy and easier to use. By configuring your app with Auth0, you effectively configure it for numerous providers at once.

A sustainable [_enterprise sales strategy_](https://sapphireventures.com/oiling-the-enterprise-it-sales-engine/) builds from one company to the next, so you don't need to start over each time.

<include src="TweetQuote" quoteText="Auth0 offers B2B federation that integrates with 10+ IAM providers. Active Directory, LDAP, ADFS, SAML? Bring it on!"/>

## Show Enterprise Customers They Can Trust You

High-profile [_data breaches_](https://auth0.com/blog/what-is-a-data-breach/) have made enterprises increasingly risk-averse. To a wary enterprise, another partnership might seem like another vulnerability. New products, though they might be valuable, risk widening an enterprise's attack surface.

Enterprises are more likely than SMBs to have security and compliance teams that will take a critical look at your product. These teams need more than assurance. Their input for your service-level agreements will go beyond up-times and scalability and into strict security parameters and compliance standards.

If you provide federation through Auth0, however, maintaining security and compliance in the authentication process is much easier. Auth0 combines the simplicity of a federated identity provider with customizable security features. Your customers can enable tools like multi-factor authentication (MFA) and reinforce compliance procedures as necessary.

![Auth0 multi-factor authentication](https://images.ctfassets.net/23aumh6u8s0i/5zHCdntb8UHVwFG6QBnhd4/2b9f2ba4cfbcab1461b35f82e76d4e8c/why-federation-is-your-secret-weapon-for-enterprise_auth0-multi-factor-authentication)

With MFA, your enterprise clients know that access to sensitive materials won't be granted to anyone with a username and password. Despite these barriers to malicious access, administrators can approve requests easily across a variety of devices.

Guardian, Auth0's MFA application, also provides Mobile SDKs for [_iOS_](https://auth0.com/docs/multifactor-authentication/developer/libraries/ios) and [_Android_](https://auth0.com/docs/multifactor-authentication/developer/libraries/android) that enable you to build a white-labeled MFA application that matches a customer's branding.

Auth0 is compliant with a [_wide range of security, privacy, and compliance standards_](https://auth0.com/security/), such as HIPAA BAA, SOC 2 Type II, and PCI DSS, so you can demonstrate an understanding of your customer's industry-specific needs.

If you're competing with other products that have similar value propositions, the trust you build with enterprise customers can tip a decision in your favor. With Auth0 backing you, it's easier to address concerns from security and compliance teams. The faster and better you can satisfy these stakeholders, the closer you can get to completing a deal.

<include src="TweetQuote" quoteText="Auth0 is compliant with a wide range of security, privacy, and compliance standards such as HIPAA BAA, SOC 2 Type II, and PCI DSS that lets you cover your customer's industry-specific needs."/>

## Sell across Organizations with Single Sign on and Customization

Selling to an enterprise requires selling across levels and [_pleasing different parties_](https://www.copper.com/blog/enterprise-sales-prospecting). Your point of contact might be excited by the core value proposition, but the project managers might be worried about its execution. If all decision-makers aren't in agreement, a deal months in the making can fall apart.

Authentication can be a significant hurdle. IT staff, for example, might resist a new product if it threatens to increase their account-management workloads. Other stakeholders might resist the sheer addition of more credentials to memorize.

Single sign-on (SSO) can dispatch these concerns. With Auth0, employees will only have to enter their credentials once.

![Auth0 single sign-on](https://images.ctfassets.net/23aumh6u8s0i/51MTEF6y286lEpPFiuWMMC/5b67cb0f5643bb655fe06ddf981240cc/why-federation-is-your-secret-weapon-for-enterprise_auth0-single-sign-on)

Enterprises have a higher volume of users and tools, so the ability to sign on once is compelling.

Safari, a company that provides access for corporate learning materials, [_leveraged Auth0's SSO capabilities_](https://auth0.com/learn/safari-case-study/) to expand to enterprise customers. SSO cut support calls for account management without Safari having to dedicate specialized resources. They have since added numerous enterprise customers, differentiating their offering with easy authentication across desktop and mobile devices.

If you need to make integration and usage even smoother, Auth0 also provides customizable _[Rules](https://auth0.com/docs/rules)_. With this customization engine, you can make unique authentication and authorization stages for the customers that need it.

You can use Rules to assist migration by reusing information from existing databases, maintain a white list for particular users, notify systems of login attempts, and more.

## Moving Upmarket Requires a Renewed Strategy

Moving upmarket is more complicated than aiming your sales team at a different target. While you might be able to [_validate product/market fit_](https://www.intercom.com/blog/podcasts/the-myths-of-product-market-fit/) with smaller companies first, moving to enterprise clients requires significant planning.

Moving too fast can threaten your stability. A big contract might seem like a win at first, but without a [diverse customer base](https://www.inc.com/magazine/201606/jason-fried/saying-no-to-large-enterprise-customers.html), too much of your sustainability might hinge on a single large customer. If you shift your business to serve only a few clients, then your future belongs to those contracts—and that's a position no one wants to be in.

Closing deals with enterprise customers means closing the gap between a legacy provider's track record and your ability to meet the needs of your customer. The better you can tailor your product to their needs, the more you'll be able to _[shorten the sales cycle](https://blog.getbase.com/3-hurdles-slowing-sales-cycle)_ and build more valuable relationships for the long-run.

<include src="asides/AboutAuth0" />


Why Federation Is Your Secret Weapon for Enterprise

Enhanced Universal Login experience enables enterprises to swiftly manage change and support additional login capabilities


**BELLEVUE, Wash. -- June 19, 2019 --**  [Auth0](https://auth0.com/), a global leader in Identity-as-a-Service (IDaaS), today announced the integration of [Sign In with Apple](https://auth0.com/blog/try-sign-in-with-apple-in-your-auth0-apps-today/) as a beta platform feature of its improved [Universal Login](https://auth0.com/universal-login) offering for enterprises. The rapid integration into Auth0's platform reflects the company's continued commitment to providing the most versatile authentication platform to its customers, allowing them to quickly adapt to changing market needs.

[Sign In with Apple](https://auth0.com/blog/what-is-sign-in-with-apple-a-new-identity-provider/), recently announced at Apple's Worldwide Developers Conference (WWDC), is a new feature that will enable users to log into third-party apps with their Apple ID. When it's commercially available later this year, Sign In with Apple will be required for apps on Apple's platforms that employ third-party sign-in options. As a result, Auth0 rapidly integrated the feature into its platform, which now enables any enterprise to prepare to meet this requirement, with the flip of a toggle switch.

![Auth0 Dashboard showing how to implement Sign In with Apple with the flip of a Toggle Switch](https://images.ctfassets.net/23aumh6u8s0i/3rMC0k1THr4rYHnQ22y2zx/891a90db2e67aed1b0e233a26713139b/social-connections)

[Universal Login is Auth0's latest implementation of the login flow](https://auth0.com/blog/introducing-the-new-auth0-universal-login-experience/), and enables developers to completely customize their branded authentication experience quickly, regardless of the authentication and authorization features they need, such as social connections, multi-factor authentication (MFA), anomaly detection, and much more. Universal Login enables faster time to market and easier change management by allowing customers to deploy new features, such as Sign in with Apple, via a simple toggle switch and without needing to change their application.

"Sign In with Apple is an exciting development and speaks to the overall demand for customizable login methods with a focus on confidentiality and privacy of personal information. This feature is still in beta at Apple, and we integrated it with Auth0 quickly so that we can learn how our customers want to use it and how we can best support them," said Matias Woloski, CTO and co-founder of Auth0. "This is a big event in the industry, and its integration in our platform represents the versatility of our platform and how our customers can quickly deploy new features with ease using Universal Login."

In addition to Sign In with Apple integration, additional key new features of the Universal Login experience for developers include:

-   **Localization**: Customers can serve their global audience with the click of a button. [Fourteen languages](https://auth0.com/docs/universal-login/i18n) are currently supported out-of-the box, with many more being added soon.

-   **Simple, Customizable Login Flows**: Features like consent management, password resets, device flow, and user registration give developers lightweight modern login pages that are "plug-and-play" to the login flow based their enterprise's specific requirements.

-   **Enhanced Security**: Multiple MFA authenticators enable end users to authenticate how they want, while maintaining an even stronger security posture.

The enhancements to Universal Login are now generally available to all Auth0 customers. Apple has released Sign In with Apple as beta, and therefore, Auth0's integration is in beta as well. Its integration will continue to adapt to Apple's guidelines as Sign In with Apple comes out of beta and becomes generally available later this year.

Auth0 will be at Identiverse, June 24-28 in Washington, D.C. and will be demoing its Sign In with Apple functionality in Hospitality Suite #1. Come see a demo on June 25th at 6 p.m. and 7 p.m., June 26th at 3 p.m., and June 27th at 3 p.m. For one-on-one demos at the show, email <meetings@auth0.com>.

<include src="asides/AboutAuth0" />

### Media Contacts

Jeana Tahnk<br>
Corporate Communications<br>
Auth0<br>
[jeana.tahnk@auth0.com](mailto:jeana.tahnk@auth0.com)

Kasia Hall<br/>
Matter for Auth0<br/>
[khall@matternow.com](mailto:khall@matternow.com)<br/>
971-246-7898


Auth0 Adds ‘Sign In with Apple’ as Out-of-the-Box Integration

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Help your customers fall in love with your application by providing a secure and easy authentication experience they don't have to remember.



Ah, Valentine's Day! Love is in the cloud. Billions of people are either signing up for or logging in to web services to wish their loved ones a happy day. They are ordering flowers, buying chocolates, or sharing the most intimate of thoughts through messages. Building scalable authentication the right way to sustain spikes in demand can leave developers with a heavy heart. 

However, Auth0 can help you prepare for the best and the worst today and every day. Let me show you why using Auth0 can make you fall in love with authentication through these solid Auth0 features that make modern authentication a walk in the park.

## <a class="toc-target" id="single-sign-on-will-keep-us-together"></a>Single Sign-On Will Keep Us Together

According to the [2018 World Password Survey run by MacAfee](https://securingtomorrow.mcafee.com/consumer/consumer-threat-notices/security-world-password-day/), consumers who responded to the survey have an average of **23 online accounts** that require a password but **on average only use 13 unique passwords** for those accounts. With so many passwords to track, forgetting a password is common.

Going through the motions of resetting a password can bring some heartache... Imagine if one of the "Challenge Questions" is asking you about the favorite vegetable of your ex. However, not being able to recover the account or getting it compromised can truly unleash the worst of heartbreaks. 

This all could be alleviated if we only needed to remember one username and one password, right? Find _the_ one and be forever happy with easy access to all of our accounts. This sounds like a fairy tale but it's not. Fortunately for us, Password Charming exists in the form of **Single Sign-On**. 

Single sign-on (SSO) allows users to simply log in once and use all applications they have been granted access to. You could use your Google account to authenticate yourself with a dating site or any other application that decided to delegate the responsibility to create, maintain, and protect your username and password to Google.

![Single sign-on example login authentication in action](https://images.ctfassets.net/23aumh6u8s0i/7cMIHIB6DD65M59E8b60JU/3e95a93f4bd9fd5d532a890de2b5b49f/auth0-single-sign-on-flow)

Building and maintaining an identity platform with Single Sign-On can become expensive, time-consuming, and difficult to get right &mdash; just like love. In a [recent survey](https://auth0.com/forrester-total-economic-impact/), 94% of organizations said they were able to implement Auth0 in less than a month. That is possible because with Auth0’s SSO solution you get:

* [Over 40 supported Identity Providers](https://auth0.com/docs/identityproviders) including mainstream social providers such as MySpace. Kidding!

![Auth0 has built-in identity providers such as Facebook, Twitter, Google, GitHub, LinkedIn, Dropbox, and many more.](https://images.ctfassets.net/23aumh6u8s0i/6oH8TXss4ErZM3RzJ9n7Rp/d31d514b9368daa63782d5a4da15fafb/new-grid-02b)

* The ability to authenticate the social butterfly by consolidating duplicate accounts across various providers with account linking &mdash; while [increasing conversion rates](https://auth0.com/retail/).

* Ease of use by having the freedom to write your code once and integrate any configured connection. One login screen to rule them all.

* Like meeting the expectations of even the strictest of parents, [compliance with leading organizations including SOC2, GDPR, HIPAA, and others](https://auth0.com/docs/compliance). 

[Let Auth0 help you get SSO right today](https://auth0.com/single-sign-on) to help your customers fall in love with an amazing authentication user experience. Don't let any customer be the one that got away because he or she forgot to remember you.

## <a class="toc-target" id="rules-to-love"></a>Rules to Love

Relationship needs are not static. They change as the relationship grows... or dwindles. Authentication is one of the most critical relationships you'll ever form with your customers. This process helps you understand who they are and how you can help them based on an established and ongoing relationship around identity. Therefore, authentication needs to be extensible, flexible, and customizable.

With Auth0 Rules, you can customize your authentication workflow. Auth0 Rules are JavaScript functions that execute when a user authenticates to your application. They run once the authentication process is complete. You can use them to customize and extend Auth0's capabilities.

### Use Auth0 Rules to:

* Enrich user profiles: query for information on the user from a database/API, and add it to the user profile object.

* Create authorization rules based on complex logic (anything that can be written in JavaScript).

* Reuse information from existing databases or APIs for migration scenarios.

* Keep a white-list of users and deny access based on email.

* Notify other systems through an API when a login happens in real-time.

* Modify tokens: Change the returned scopes of the Access Token and/or add claims to it, and to the ID Token.

[Let Auth0 help you rule the authentication game today](https://auth0.com/docs/rules). 

## <a class="toc-target" id="universal-login-one-form-one-heart"></a>Universal Login: One Form, One Heart

One of the easiest ways to improve your customers’ experience while boosting security is through consistency. Imagine that each login form in your application is a physical door. If the look and feel of this door are not consistent throughout the application, your customers' user experience when logging in may look like this:

![Doors metaphorically representing the UX and UI of an app's login form flow.](https://images.ctfassets.net/23aumh6u8s0i/4qZC52zb2rkifVRgofbtvh/1f1e5140952a12c0126b8b456ef6c6f6/valid-doors-valid-login-forms)

Each door that represents a login form looks different. They are all valid entryways for the customer's credentials, but your customer can't anticipate what the login form should look like. This inconsistency can let a malicious actor to phish your customers. Here’s how:

![Invalid door metaphorically representing introduction of a phishing login form.](https://images.ctfassets.net/23aumh6u8s0i/7govsBdLttTOlrwwqEEKTN/668dacccd29c76629deb2b79727aa68c/invalid-door-invalid-login-form)

The attacker creates a site and requests your customers' login. If your login forms are inconsistently designed, for your customers, the brown door may just signal a new form design. They could easily enter their credentials there expecting access to your application &mdash; and just like that, they become phishing victims.

To help protect your customers, a consistent authentication UX and UI helps them better identify when a phishing attempt may be happening. Say that you opt for all of your login forms to look like the yellow door. Now it's much harder to trick one of your customers:

![Consistent app UX and UI of login flow/forms helps to recognize a phishing form.](https://images.ctfassets.net/23aumh6u8s0i/5nckAsKhcjZUvSGITOUnGX/1c7ebfca7a4618e415084e5492071596/consistent-valid-door-design-consistent-valid-login-form-design)

The universal design and implementation of the login makes your customers expect one, and only one, form for their credentials. Anything different must be rejected.

Auth0 offers you an easy way to build this unique door for your customers through **Universal Login**. Anytime your customers need to log in, they are redirected to a central authorization server that presents them with a login form that embraces your brand. Since authentication takes place on the same domain as the login, credentials are not sent across origins, increasing security and protecting against phishing and bucket brigade attacks, also known as man-in-the-middle (MITM) attacks.

Universal Login and SSO also happen to be a match made in heaven. You can orchestrate single sign-on (SSO) between multiple apps. If the user has already signed on to one app, the login page will not be shown again and the user will be logged in via SSO.

Play this video to see it in practice!

<AmpContent>
<amp-video controls
  layout="responsive"
  width="480" height="270">
  <source src="https://videos.ctfassets.net/2ntc334xpx65/67t8nyR02cUssAmCmsaiE6/4abf027ac21be3f56b0c16854b5bcd5e/sso_new_diagram_video.mp4"
    type="video/webm" />
</amp-video>

</AmpContent>

<NonAmpContent>

<video controls="controls">
  <source src="https://videos.ctfassets.net/2ntc334xpx65/67t8nyR02cUssAmCmsaiE6/4abf027ac21be3f56b0c16854b5bcd5e/sso_new_diagram_video.mp4">
   Your browser doesn't support HTML5 video. Here is a <a href="https://videos.ctfassets.net/2ntc334xpx65/67t8nyR02cUssAmCmsaiE6/4abf027ac21be3f56b0c16854b5bcd5e/sso_new_diagram_video.mp4"> link to Universal login and SSO</a> instead.
</video>

</NonAmpContent>

Love and security are based on trust. Don't let phishing steal your customers' trust in your design or implementation.  You can [get started with Universal Login from Auth0 today](https://auth0.com/universal-login).

## <a class="toc-target" id="multi-factor-authentication-are-you-the-one-for-me"></a>Multi-Factor Authentication: Are You the One for Me??

![Are these images of actress Jaime Pressly or Margot Robbie?](https://images.ctfassets.net/23aumh6u8s0i/2PqNgYrJVTbFlgEJprLfkb/810a1cf582f03290460a72b1145405ef/margot-jaime)

[Left image source: Gage Skidmore](https://en.wikipedia.org/wiki/Margot_Robbie#/media/File:Margot_Robbie_by_Gage_Skidmore.jpg)

Pictured above are _two_ different and unique women. One of them is [Jaime Pressly](https://www.imdb.com/name/nm0005326/) and the other one is [Margot Robbie](https://www.imdb.com/name/nm3053338/). If someone gives you the picture of one of them and tells you to hand her a super secret script for an upcoming Spider-Woman movie, would you be able to tell them apart?

It would be very difficult. Even if you were to ask one of them for their name... What if Margot, jokingly, says her name is Jaime. You need to ask more questions to establish their identity and not make the mistake of giving the prized script to the unintended person. 

Authenticating users is just like that. If you want to have greater confidence that you are granting data access to the right person, multi-factor authentication is for you.

Multi-factor authentication (MFA) is a method of verifying a user's identity by requiring them to present more than one piece of identifying information. This effectively provides an additional layer of security, decreasing the likelihood of unauthorized access. The type of information required from the user is typically two or more of the following:

* Knowledge: Something the user knows (such as a password)
* Possession: Something the user has (such as a mobile device)
* Inheritance: Something the user is (such as a fingerprint or retina scan)

The complexity of getting MFA right keeps developers from implementing it in their applications. However, with Auth0, enabling MFA for your application is a fairly straightforward process:
 
* Choose what factors to enable on your application, such as push notification.

* Perform any further setup required to configure that factor.
 
* Choose whether or not you wish to enforce MFA for all users.

![Auth0 Multi-Factor Authentication dashboard with different factors to enable](https://images.ctfassets.net/23aumh6u8s0i/76dOMSouGVa1RG4sZHWMIl/fb3c361a75713719bef1665bc9ba185d/mfa-dashboard-1)

With Auth0 Rules, as you learned earlier, your application's MFA experience can be customized. You can only require MFA in specific circumstances or force a particular factor to be used. When in doubt, always ask: is he or she the one to log in?

Catfishing? Ain't nobody got time for that! Don't let doubt erode your confidence and increase your risk of leaking data. Love, trust but verify. [Give Auth0 Multi-factor Authentication a try today](https://auth0.com/docs/multifactor-authentication).

## <a class="toc-target" id="anomaly-detection-trouble-in-paradise"></a>Anomaly Detection: Trouble in Paradise

> You know that I trust you, baby
>
> But your data's so good lookin'
>
> I'm afraid somebody's gonna steal it away from me.

We know that most of the time it's your customers who are authenticating into your application, but we also know that their data is beautiful and attractive to many malicious users out there. They will try to pretend to be your customer by deception or by force.

Legitimate users may try to log in three or five times if they have forgotten their password but are trying to remember it:

> Was it `correcthorsebatterystaple` or `confectcoarsewaterymaple`?

Ten failed consecutive attempts to log in are definitely a red flag. If the legitimate user is so pressed to log in, they will resort to resetting their password as soon as possible.

With Auth0, you can detect anomalies and stop malicious attempts to access your application. Auth0 offers two types of shields:

* Brute-force protection
* Breached password detection

![Auth0's Anomaly Detection dashboard](https://images.ctfassets.net/23aumh6u8s0i/17r5rvTrkVXqzAgA1v6WM1/724776f473b2c765614f0efaf0ac4ea6/anomaly-detection-overview)

A shield specifies the action you wish to take given a specific trigger. A trigger is a suspicious event that is detected when someone is trying to log in to your system, or they are using a breached password that has been reported by another third-party service.

**Brute-force protection is enabled by default for all connections**. There are two different triggers for the brute-force protection shield, for two slightly different attack scenarios:

* 10 consecutive failed login attempts for the same user and from the same IP address
* 100 failed login attempts from the same IP address in 24 hours or 50 sign up attempts per minute from the same IP address

Auth0 tracks large security breaches that are happening on major third-party sites to help keep your users and systems secure. By enabling breached password detection, when a trigger occurs, your users can be notified and/or blocked from logging in if we suspect their credentials were part of a published security breach. **Auth0 never blocks the user itself, just the attempts from the suspicious origin**.

Is love knocking at your door or is it a brute force attack? [Integrate Auth0's anomaly detection in your application today](https://auth0.com/docs/anomaly-detection) to mitigate bad actors from forcing themselves into the heart of your data.

## <a class="toc-target" id="happy-valentines-day"></a>Happy Valentine's Day

Let Auth0 be the final piece that helps you build a secure and seamless user authentication experience that your customers will love to use. <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">Get started with SSO, MFA, Universal Login, Anomaly Detection, and Rules for free today</a>!

![Auth0 Features to Fall in Love With - SSO, Rules, and More](https://images.ctfassets.net/23aumh6u8s0i/7fRVnuSnZAQva1b4YwQP0P/6f3f16fb671fecefb1cfd08e28dd40af/auth0-the-final-piece-in-authentication-to-fall-in-love-with)

<include src="asides/AboutAuth0" />


Auth0 Features to Fall in Love With

ec1016a9a63da65998b75f35b6ceb3bb

Javascript junkie, technology enthusiast, tinkerer. Currently Technical Evangelist at Auth0 (https://auth0.com ). I like to learn new things and share that knowledge at conferences.

Technical Evangelist

Joel Lord

Learn how to ensure that only real users are registering to your applications using Kickbox and Auth0 Hooks.



When building an application, it is critical to ensure that the users who are signing up for services or products are real users. By using Auth0, email verification services are provided out of the box; however, wouldn't it be better if verification emails didn't have to be sent at all? By using a combination of [Kickbox](https://kickbox.com/) and [Auth0 Hooks](https://auth0.com/docs/hooks), user email addresses can be validated without sending any emails.

## How does Kickbox work?

Kickbox is an [email technology company](https://kickbox.com/about) with products that help verify email addresses and prevent fake sign-ups applications.

To create a free account, we can visit the [Kickbox sign-up page](https://app.kickbox.com/signup).

<include src="TweetQuote" quoteText="Kickbox ensures we only send email to real users and helps us separate the low-quality addresses from high-value contacts."/>

## Preparing an Auth0 Tenant to Integrate with Kickbox

To demonstrate the integration of Kickbox with Auth0, we are going to use an existing [Auth0 Tenant](https://auth0.com/docs/getting-started/the-basics#account-and-tenants).

> If you haven't already done so, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account here</a>.

Since we don’t want an email verification to be sent any more, we need to deactivate that option in the tenant. On the left sidebar of the Auth0 Dashboard, let's click on **Emails** first and then on **Templates** to get to the [Email Templates section](https://manage.auth0.com/#/emails). In this section, the **Verification Email** template should be selected by default. Find the **Status** toggle and turn it off.

![Auth0 Email Templates](https://images.ctfassets.net/23aumh6u8s0i/UitVKwTRyrujA8IOXGyfE/54bbbcefe7f54f7fa1dcfab90920d63b/auth0-email-templates)

We are now ready to add an Auth0 hook and integrate Kickbox.

## Kickbox Sendex™ Email Quality

As stated in the Kickbox documentation, Kickbox provides us with a [Sendex value](https://docs.kickbox.com/docs/the-sendex) which is an indicator of the quality of an email address. The existence or syntactical correctness of an email address does not indicate its quality. For example, `john.smith@example.com` can generally be seen as a higher quality email address than `sdfsdfsdf@example.com`.

Kickbox uses a number of algorithms, derived from the millions of email transactions it performs each hour, to determine the overall quality of an email address. These are some of the characteristics Kickbox considers when classifying the quality of an email address:

- Is the email address similar to a known, high-quality, valid email address? The Kickbox platform is always evaluating and learning what patterns good email addresses employ. Its evolving data is used to provide insight into the overall quality of a given address.

- Is the email address domain a commercial domain (example: `acme.com`) or a personal domain (`example: yahoo.com`)?

- Does the email address appear to be associated with a role (example: `postmaster@example.com`) instead of a person (example: `bob.smith@example.com`)?

The Sendex value ranges from a `0` (no quality) to `1` (excellent quality). The value of a good Sendex score depends on the specific purpose of the application. For a transactional email the following criteria may be applied:

- 1.00 - 0.55 = Good

- 0.54 - 0.20 = Fair

- 0.19 - 0.00 = Poor

While the Sendex code is useful to verify the quality of an email address, using it in a pre-registration hook could be problematic. In our case, we will want to validate the authenticity of the email, not the quality. To achieve this, Kickbox provides us with other useful information. We will use two of the properties that are provided by Kickbox to validate the email:

- The `result` property will tell us if this email will actually be delivered or if it's from a risky source. In our case, we will validate that this email is not `undeliverable`.

- The `disposable` property will tell us if this email comes from a service that offers disposable email addresses.

Using these two properties with a pre-registration hook, we'll determine if we'll either create the user account or send an error at the moment of the sign-up.

## Building an Auth0 Hook

[Auth0 Hooks](https://auth0.com/docs/hooks) allow us to customize the behavior of Auth0 using [Node.js](https://nodejs.org/en/) code that is executed against extensibility points (which are comparable to webhooks that come with a server). Hooks give us modularity when configuring our Auth0 implementation and extend the functionality of base Auth0 features.

On the left sidebar in the Auth0 Dashboard, let's click on [Hooks](https://manage.auth0.com/#/hooks). In the Hooks page, we will find different places where we can add a hook in the user login or sign-up life cycle. The one we are interested in is the **Pre User Registration** hook. We want to verify a user email before they register into our system.

To create a new hook, let's do the following:

- Click on the **Create New Hook** button.

- Give the hook a name.

- Select "Pre User Registration" from the "Hook" drop-down field.

- Click on the "Create" button.

Our newly created Auth0 hook will be shown under the "Pre User Registration" section with a green dot before its name. To edit it, let's click on the pencil button in the row below it.

![Newly created Auth0 Hook with an active indicator](https://images.ctfassets.net/23aumh6u8s0i/5YViqqBkxsCE9Am5KufZl8/2f6b325ac113e82ec75baf89547b2f47/newly-created-auth0-hook)

We are taken to the [Webtask editor](https://webtask.io/docs/editor) where we can easily edit our hook logic within the Auth0 Dashboard. In here, we will be able to edit the code that gets executed every time a new user registers. We can add new metadata to our users and return this or we can throw an error which will prevent the user registration.

We can remove all the default code that is there to start with an empty hook. The first thing that we will need is the function that will be executed upon a new user registration:

```javascript
module.exports = function(user, context, callback) {};
```

When our code execution is done, it will need to return the `callback` function with either an error or a valid response. So let’s add this:

```javascript
module.exports = function(user, context, callback) {
  const response = {};
  response.user = user;

  callback(null, response);
};
```

In order to connect to the Kickbox service, we will need to do a `GET` request using the Node `request` module. We can add that at the top of our code just before the `module.exports`:

```javascript
const request = require("request");

module.exports = function(user, context, callback) {
  // ...
};
```

The [Kickbox email verification API](https://docs.kickbox.com/v2.0/reference) is fairly simple to use. We simply make a `GET` call to the following endpoint:

```shell
https://api.kickbox.com/v2/verify?email=<email>&apikey=<API_KEY>
```

In the URL above, `<email>` is the address that we want to verify and `<API_KEY>` is our [Kickbox API key](https://docs.kickbox.com/docs/using-the-api).

Let’s build the `GET` request:

```javascript
const request = require("request");

module.exports = function(user, context, callback) {
  const response = {};
  response.user = user;
  const API_KEY = context.webtask.secrets.KICKBOX_API_KEY;
  const email = user.email;
  const url = `https://api.kickbox.com/v2/verify?timeout=6000&email=${email}&apikey=${API_KEY}`;

  request.get({ url }, function(err, resp, body) {
    // Process the response and send back the callback
    callback(null, response);
  });
};
```

Now, we will automatically reject any email address that comes from a disposable email service or email addresses that are known to be undeliverable:

```javascript
const request = require("request");

module.exports = function(user, context, callback) {
  const response = {};
  response.user = user;
  const API_KEY = context.webtask.secrets.KICKBOX_API_KEY;
  const email = user.email;
  const url = `https://api.kickbox.com/v2/verify?timeout=6000&email=${email}&apikey=${API_KEY}`;

  request.get({ url }, function(err, resp, body) {
    body = JSON.parse(body);

    // Add the user_metadata property if not present already
    if (!response.user.user_metadata) response.user.user_metadata = {};

    if (body.result != "undeliverable" && !body.disposable) {
      // Good email
      console.log("This email is valid, run the callback");
      callback(null, response);
    } else {
      console.log("Probably not a valid email address");
      callback(`Access Denied by Kickbox server. (${body.sendex})`);
    }
  });
};
```

In this case, we are looking at the Sendex score only. If the Sendex score is over `0.75`, we assume that the email address is safe and good to go. There are various other checks that we could make to decide if we want to accept the user or not.

Using this code will send back a generic error message to the end-user on the [Auth0 Universal Login page](https://auth0.com/docs/hosted-pages/login) when the user is trying to sign up with an invalid email.

<include src="TweetQuote" quoteText="Auth0 Hooks are a new extensibility mechanism in Auth0 that allows us to customize the behavior of the Auth0 platform using Node.js."/>

## Taking the User Experience One Step Further

This workflow may not create the most user-friendly experience. In order to show a more meaningful message, we could use the [Auth0 Hosted Pages editor](https://auth0.com/docs/hosted-pages#customize-your-hosted-page). Now that we have access to the Kickbox email data, we could still let our users login but we could perform email verification if we are feeling unsure. There are many other options that we can add to this workflow from here on. There is no limit at what we can do using the Auth0 hooks! I encourage everyone to give them a try.

<include src="asides/AboutAuth0" />


Validate User Emails Fast using Kickbox and Auth0 Hooks

Key solutions like anomaly detection, universal login, and custom security rules delivered by Auth0 helps its customers protect sensitive user data.



Tight infrastructure security is critical — but if you don't remember to secure your web applications, customer data remains exposed.

There are several [common threats to web-app security](https://auth0.com/blog/common-threats-in-web-app-security/):

- A lack of encryption between your web browser and their servers
- XSS (cross-site scripting) that occurs when malicious scripts are injected into web applications
- Clickjacking (when an attacker injects transparent or opaque objects into a web application)
- Cross-site request forgery (where the attacker impersonates an authorized user and requests sensitive information, such as passwords)

These threats are continuing to multiply and become more complex by the day. To mitigate breaches, particularly in a time of [heavy regulatory scrutiny](https://auth0.com/docs/compliance/gdpr), Auth0 offers three major strategies:

1.  Anomaly Detection
2.  Universal Login Support
3.  Customizable Rules

Auth0 allows you to combine these features to further amplify protection for your app's end users. While you can always attempt to develop these and similar solutions in-house, outsourcing app security will give you access to a team of experts who work 24/7 to keep up with the latest trends in a constantly evolving space.

## Anomaly Detection

Auth0 provides three built-in shields that [detect anomalies](https://auth0.com/docs/anomaly-detection) among users in an app's system. Used separately or in combination, the shields have the ability to stop malicious access attempts before they occur. Administrators receive alerts of suspicious activity and can then block future login attempts by an aberrant user.

<include src="TweetQuote" quoteText="Learn more about how Auth0 provides three built-in shields that detect anomalies among users in an app's system."/>

### Brute-Force Protection

Within its [Brute-Force Protection](https://auth0.com/docs/anomaly-detection) feature, Auth0 has two distinct shields:

1.  Shield 1 is triggered after 10 failed login attempts on a single account from the same IP address.
2.  Shield 2 is triggered after 100 failed login attempts from a single IP address via different usernames in 24 hours or after 50 sign-up attempts in one minute from the same IP address.

When Shield 1's threshold is reached, an email is automatically sent to the user, which an administrator can edit however he or she wishes. This initial email looks like:

![Affected user email](https://images.ctfassets.net/23aumh6u8s0i/7Hf4QzvX6IDVi6gl4hGRp4/8fc62d71de2ae3698d64c087b89c730c/affected-user-email)

An administrator can easily edit the template by accessing the Auth0 [Dashboard](https://auth0.com/docs/dashboard) and following Emails > Templates.

When Shield 2 is triggered, dashboard administrators are notified. Brute-Force Protection will also block the suspicious IP address. When the issue is resolved, an administrator simply locates the user in the Auth0 [Dashboard](https://auth0.com/docs/dashboard) and files an action to unblock. A user can also click on the "unblock" link provided in the email above or change their password.

### Breached-Password Detection

The third shield is breached-password detection. This is easy to turn on and customize in the Anomaly Detection section of the Auth0 dashboard.

![Breached-password anomaly detection with Auth0](https://images.ctfassets.net/23aumh6u8s0i/3Oe0VufANczOhCpPtuL8iV/99ffa473077e16cd7733334c25a9c73d/breached-password-shield)

Breached-password detection is useful in instances where Auth0 suspects that a user's email has been compromised in a major security breach. (Auth0 consistently tracks these on third-party sites.) If this occurs, Auth0 will trigger the shield, notify the user, and block them from logging in until they reset their information. Breached-password detection is becoming increasingly helpful as many individuals use the same or similar iterations of the same password on multiple sites.

<include src="TweetQuote" quoteText="When Auth0 suspects that a user's email has been compromised in a security breach, Auth0 will trigger a protective shield, notify the user, and block them from logging in until they reset their information"/>

## Universal Login

Auth0 supports [universal login](https://auth0.com/blog/authentication-provider-best-practices-centralized-login/) on customer apps. In contrast to embedded login, this offers increased security and a shorter setup time.

![Auth0 Universal Login offerings](https://images.ctfassets.net/23aumh6u8s0i/21BR2xIUfU721nga9W1FqO/184597f0a961d89938bb9923b08e6a73/centralized-embedded-diagram)

Universal login is a more seamless experience for the user. On the front end he or she sees a simple authentication request; on the back end, credentials remain within the same domain instead of being sent across origins. This makes it a far more secure method than exposing the information to outside sources. When personal data moves from one origin to another, [phishing attacks](https://auth0.com/blog/all-you-need-to-know-about-the-google-docs-phishing-attack/) and [man-in-the-middle attacks](https://auth0.com/docs/security/common-threats#man-in-the-middle-mitm-attacks) become common.

In addition to an enhanced customer experience, universal login is simpler for administrators to maintain and provides the benefits of single sign-on (SSO).

## Auth0 Security Rules

Auth0 has developed customizable [Rules](https://auth0.com/docs/rules/current) for its app-security features. Rules are JavaScript functions that execute when a user authenticates to your application. Rules can be helpful when customizing and extending Auth0's existing capabilities. For example, the [Force Email Verification](https://auth0.com/rules/email-verified) and [User Fraud Score](https://auth0.com/rules/socure_fraudscore) Rules can be incorporated into Auth0's existing tools like Anomaly Detection to better determine if a user truly is who they say they are.

### Force Email Verification

Force Email Verification only allows app access to users who have verified their emails. Incorporating Force Email Verification into an app instead of a browser version is a good UX practice with powerful back end capabilities.

![Force Email Verification code](https://images.ctfassets.net/23aumh6u8s0i/6MhbfE6DYpGdnku3wGI9Rn/4dd87042b24817242ccde8b52d16c781/verify-email-code)

[[Source](https://auth0.com/rules/email-verified)]

For example, if you are working with a large set of emails that belong to a network, e.g., `@university.edu` or `@company.edu`, Force Email Verification can help parse individuals in a group to make sure that a fake user hasn't set up an account to blend in with the others. Force Email Verification requests that users cross-check their information; anyone who returns information that doesn't match or does not return additional information at all will be blocked from logging in.

### User Fraud Score

Like Force Email Verification, you can tack on the User Fraud Score to a variety of features. If you've built an online marketplace — like Etsy, for example — you can use this rule to cross-check everyone conducting business and thus add an extra layer of protection to purchases. The Rule calculates a fraud score for every user, based on their email address and IP address.

```javascript
function (user, context, callback) {
  // score fraudscore once (if it's already set, skip this)
  user.app_metadata = user.app_metadata || {};
  if (user.app_metadata.socure_fraudscore) return callback(null, user, context);

  if(!user.email) {
    // the profile doesn't have email so we can't query their api.
    return callback(null, user, context);
  }

  const request = require('request');

  // socurekey=A678hF8E323172B78E9&email=jdoe@acmeinc.com&ipaddress=1.2.3.4&mobilephone=%2B12015550157
  request({
    url: 'https://service.socure.com/api/1/EmailAuthScore',
    qs: {
      email:  user.email,
      socurekey: configuration.SOCURE_KEY,
      ipaddress: context.request.ip
    }
  }, function (err, resp, body) {
    if (err) return callback(null, user, context);
    if (resp.statusCode !== 200) return callback(null, user, context);
    const socure_response = JSON.parse(body);
    if (socure_response.status !== 'Ok') return callback(null, user, context);

    user.app_metadata = user.app_metadata || {};
    user.app_metadata.socure_fraudscore = socure_response.data.fraudscore;
    user.app_metadata.socure_confidence = socure_response.data.confidence;
    // "details":[
    //     "blacklisted":{
    //        "industry":"Banking and Finance",
    //        "reporteddate":"2014-07-02",
    //        "reason":"ChargeBack Fraud"
    //     }
    // ]
    user.app_metadata.socure_details = socure_response.data.details;

    auth0.users.updateAppMetadata(user.user_id, user.app_metadata)
      .then(function(){
        context.idToken['https://example.com/socure_fraudscore'] = user.app_metadata.socure_fraudscore;
        context.idToken['https://example.com/socure_confidence'] = user.app_metadata.socure_confidence;
        context.idToken['https://example.com/socure_details'] = user.app_metadata.socure_details;
        callback(null, user, context);
      })
      .catch(function(err){
        callback(null, user, context);
      });
  });
}
```

In the Auth0 Dashboard, copy the code block above, and replace placeholders with the appropriate values. The rule will pull the fraud score from socure.com and store it on app_metadata. A full set of Auth0 Rules can be found [here](https://auth0.com/docs/rules/current).

For fraud detection, Auth0 partners with [ThisData](https://auth0.com/blog/anomaly-detection-safer-login-with-thisdata-and-auth0/). ThisData allows real-time detection of any account takeovers across both web and mobile apps.

## No Better Time To Secure Your Apps

Securing your app with the best tools is always a good decision — but it is especially timely, given the slew of new regulations: GDPR deadline has passed, but [it's not too late to comply](https://auth0.com/blog/your-quick-gdpr-compliance-checklist/), and several countries and states in the U.S. have followed the EU with [similar privacy initiatives](https://auth0.com/blog/brace-yourself-the-gdpr-ripple-effect-in-california/). In line with these events, Auth0 has developed additional [strategies](https://auth0.com/gdpr-assessment/) for getting your team into alignment quickly, including [customer identity and access management (CIAM) protocol](https://auth0.com/blog/digital-success-through-customer-identity-and-access-management/).

While it might be easy to forget your apps in the swirl of demands around your core operations — making sure you plug any holes here is key to ensuring that you don't become another [data-breach statistic](https://consequenceofsound.net/2018/06/ticketfly-hacker-data-breach/).


How Auth0 Makes Your Apps More Secure

kerry-ok

Kerry is a marketer that loves to partner with the sales organization. As our SVP for Marketing, she is focused on sharing the Auth0 narrative across the globe. Before Auth0, Kerry spent many years working in B2B Tech at Skytap and F5 Networks. She spends her spare time with her family, dog, working in the yard, and enjoying fantasy football.

Chief Marketing Officer

Kerry Ok

Watch this recorded webinar with Garrett Bekker, principal analyst at 451 Research, where he discusses the current state of the IAM industry and the benefits of Universal Identity Management



Recently 451 Research’s Principal Analyst Garrett Bekker and Auth0 CMO Lewis Carpenter sat down to discuss solutions to the fragmented identity and access management marketplace. A variety of solutions aim at solving authentication and authorization, but each tends to focus squarely on a single audience, whether it’s consumers (B2C), business partners (B2B), employees (B2E), or IoT devices. This siloed approach makes the process both confusing and costly for those needing identity across the entire organization and beyond.

Fortunately, enterprises are realizing that a universal approach to identity is saving money, time, and most importantly, giving developers the freedom they need to focus on product innovation rather than security. Today’s marketplace demands a more adaptable solution that can handle the rigors of identity, and anticipate the needs of the future.

In this [recorded webinar](https://auth0.com/resources/webinars/need-for-universal-identity-management-webinar), you’ll learn Bekker’s take on the current state of the IAM industry and its evolution, where he believes it needs to go, as well as gain an overview of Auth0’s universal approach to identity.

<include src="asides/AboutAuth0" />


Webinar: The Need for Universal Identity Management with 451 Research

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Learn why universal login is the most secure, standards-based strategy when authenticating with a provider.



**TL;DR:** To maintain a successful application, you will inevitably need a universal account system, as opposed to embedding login within your application. Universal login is more secure, standards-based, maintainable, and future proof. This is where the industry is moving, and in this post, we will explore this trend.

---

## Introduction

High standards of security and ease of use have been set for modern authentication platforms and APIs. Users expect seamless logins that work across apps and entities without requiring them to log in over and over on the same device. Companies and developers expect robust security for their data and top-notch protection for their customers, preferably without incurring intensive implementation or maintenance overhead.

### What is Universal Login?

**Universal login** refers to a [method of login hosted by the authentication provider](https://auth0.com/docs/hosted-pages/login) for your app or site. A link or button in your app triggers an authentication request and users are then presented with a login experience provided by the authentication provider. Because authentication is taking place on the same domain as the login, credentials are not sent across origins. Universal login is the most _secure_ way to authenticate users, as well as the most _standards-based_. We'll cover <a href="#why-use-universal-login" target="_self">how and why</a> in much more detail below.

### What is Embedded Login?

**Embedded login** refers to a method of authentication wherein credentials are entered via an experience that is _embedded_ on an app's domain with text inputs and are then sent to an authentication provider for verification and login. This is a _cross-origin_ request. Embedded logins present a range of potential security and implementation challenges that cause issues for developers and users; as a matter of fact, [Google no longer supports an embedded approach when implementing OAuth](https://auth0.com/blog/google-blocks-oauth-requests-from-embedded-browsers/).

### What Do Universal and Embedded Login Look Like?

![Universal vs. embedded login](https://images.ctfassets.net/23aumh6u8s0i/5lXoFh88lNEZ41N8NOORYA/35ade19a2e6603719c1338329b948174/centralized-embedded-diagram)

1. **Universal Login** - When clicking a button or link to authenticate in both the browser and native app, the universal login URL at [accounts.google.com](https://accounts.google.com) is loaded.
2. **Embedded Login** - When clicking a button or link to authenticate in the browser, an overlay modal is opened on the same domain, prompting the user to log in. The mobile app also displays input fields within the app.

## Why Universal Login is a Long-Term Investment

Let's look at a hypothetical example using a timeline from an imaginary company. Let's say our make-believe company, "SourceCentral", provides public and private source control repository hosting. Their timeline looks something like this:

![Hypothetical timeline for a service switching to universal login](https://images.ctfassets.net/23aumh6u8s0i/6wzVEf7a5UREYmGYdQ5yZl/d9a04c1906342c8ad2cb5035228fddce/timeline2)

* **Year 0: Launch!** We launched a source control repository hosting service. Our homegrown authentication is working out alright for our needs since we are still small and only have one service.
* **Year 1: Going native** Lots of people have signed up and outlook is great! People love our service. We are launching native Android and iOS mobile apps as well as desktop apps for Windows and MacOS, and we need to implement login for all of them.
* **Year 1.5: APIs** We're now developing an API so that we can better serve our customer base of developers who want to be able to integrate our service with third parties, but...
* **Year 2: Auth for third parties** Authentication has been a huge challenge now that we have an API that requires authorization as well as several apps and third-party integrations. 😧 To address the complexities and issues this is presenting, we're implementing OAuth in order to provide a much more _universal_ authentication and authorization process for our product and APIs.
* **Year 3: SSO** With a universal login approach, we're now able to leverage Single Sign-On. Our customers love this. This was easy with a universal login; instead of having to change every single service, we only had to do it once! It's much easier to maintain and enhance.
* **Year 4: Multi-factor Authentication** Our users demand more security, so we're adding Multi-factor Authentication. We can do this for all our apps at once using universal login!
* **Years 5, 6, etc: Growing and scaling!** We're rolling out new properties and apps at a steady pace. We have a desktop app, a community, chat hosting for repositories, and several other services as well. Securing and authenticating all our new services is a non-issue with universal authentication! 🎉

This is a hypothetical timeline, but many companies have undergone very similar processes over the years, including (in case you haven't already guessed!) [GitHub](https://github.com). Implementing universal login is a long-term investment. Doing so _early_ paves the way for growth, development, maintainability, and new feature integration far into the future.

<include src="TweetQuote" quoteText="Universal login is a long-term investment. Implementing early paves the way for growth and new feature integration far into the future."/>

## <span id="why-use-universal-login"></span>Why Universal Login is Best Practice

Universal login has many advantages over an embedded login approach, including better security, single sign-on benefits, simpler maintainability, modern user experience, and more. Let's explore these in more detail.

<include src="TweetQuote" quoteText="Universal login provides security, SSO, maintainability, best practice native app implementation, and more."/>

### Security

Universal login is more secure than embedded login. Authentication takes place over the same domain, eliminating cross-origin requests. Cross-origin authentication is inherently more dangerous. Collecting user credentials in an application served from one origin and then sending them to another origin can present certain security vulnerabilities. [Phishing attacks](https://auth0.com/blog/all-you-need-to-know-about-the-google-docs-phishing-attack/) are more likely, as are [bucket brigade attacks](https://auth0.com/docs/security/common-threats#man-in-the-middle-mitm-attacks), also known as man-in-the-middle (MITM) attacks. Universal login does not send information between origins, thereby negating cross-origin concerns.

Embedded user agents are unsafe for third parties, including the authorization server itself. If an embedded login is used, the app has access to both the authorization grant and the user's authentication credentials. As a consequence, this data is left vulnerable to recording or malicious use. Even if the app is trusted, allowing it to access the authorization grant as well as the user's _full_ credentials is unnecessary. This violates the [principle of least privilege](https://en.wikipedia.org/wiki/Principle_of_least_privilege) and increases the potential for attack.

### Single Sign-On

Universal login orchestrates [single sign-on](https://auth0.com/docs/sso/current) (SSO) between multiple apps while providing cookies from the same origin. Once a user has logged in using a universal login, a cookie is created and stored. Any future calls to the authentication provider's authorization endpoint will then check the cookie. If the user has already signed on, the login page will not be shown again and the user will be logged in via SSO. On the other hand, embedded user agents don't share authentication state, meaning that they cannot be used for SSO.

![universal login with Google](https://images.ctfassets.net/23aumh6u8s0i/1YugCWp0Ra98EeeupBfBqN/7fadfd6f1334f1d3dfb5a5a17cd21a0d/google-login)

### Easier to Implement and Maintain

Universal login is easier to implement as well as maintain for app developers. Cross-origin authentication is inherently more dangerous, but universal login mitigates this risk entirely. Developers do not need to manage the dangers of cross-origin attack vectors if they use universal login instead of embedded login. A universal login page is also already fully implemented, negating the need for the developer to build out their own embedded login UI. The authorization server providing the universal login page can also ensure a consistent and secure experience across all apps that utilize it.

### Best Practice on Native Mobile

The [OAuth 2.0 Best Current Practice for Native Apps RFC](https://www.rfc-editor.org/rfc/rfc8252.txt) requires that _only_ external user agents, such as universal login, should be used for authenticating with OAuth 2.0 in native mobile applications. This is considered best practice for reasons cited above, including security and single sign-on. You can [read more about the OAuth 2.0 BCP for Native Apps here](https://auth0.com/blog/oauth-2-best-practices-for-native-apps/).

![Google login on mobile app](https://images.ctfassets.net/23aumh6u8s0i/3ahqZk6Umj456bBK6MR0en/0b2e534235a83ddbfafcc7ce3b1bab93/google-login-mobile)

<br>

<em>Native mobile apps that use OAuth 2.0 (such as Gmail, YouTube, and others) use the device browser as an external user agent for universal login.</em></p>

### User Experience

Modern users are comfortable with signing in at the authorization provider's universal login page to authenticate (e.g., OAuth with Google, Facebook, GitHub, etc.), in turn gaining the benefits of single sign-on and not being required to repeatedly log into other apps on the same device as long as they are using the same authentication provider.

![universal login with Facebook](https://images.ctfassets.net/23aumh6u8s0i/213AnVULw3nratInY7hOx4/0bb7f7764843aea22f4777c8ba38e55c/facebook-login)

These login pages are on the authorization provider's domain. However, most people don't even notice the redirect because the modern flow of universal login functions so seamlessly. After signing in, they're brought back to the application and are now authenticated. The user experience of universal login is easy and natural, and is the standard expectation for users of modern web and mobile apps. In addition to being more secure, it provides transparency. In doing so, the user is assured that they are securely logging in with a trusted and familiar entity.

![universal login with GitHub](https://images.ctfassets.net/23aumh6u8s0i/51Aq6EuG8BElVcD2RL14W2/aebce1638b1fce4f73a11dadd77349a4/github-login)

## Conclusion

Universal login is the most secure and maintainable standards-based approach to logging in with an authentication provider. Unlike embedded login, it is safer from cross-origin attack vectors and poses no danger to the authorization server. Universal login is the [best current practice for native mobile apps](https://auth0.com/blog/oauth-2-best-practices-for-native-apps/), and OAuth providers like [Google no longer support embedded login strategies](https://auth0.com/blog/google-blocks-oauth-requests-from-embedded-browsers/). It also provides a comfortable and consistent user experience that confers the benefits of SSO.

<include src="TweetQuote" quoteText="Universal login is safer from cross-origin attack vectors and poses no danger to the authorization server."/>

In keeping with app modernization and current best practices, [Auth0](https://auth0.com) provides a robust [universal login](https://auth0.com/docs/hosted-pages/login) solution with integrations for dozens of [social identity providers](https://auth0.com/docs/identityproviders#social), [enterprise identity providers](https://auth0.com/docs/identityproviders#enterprise), custom [OAuth 2.0 integrations](https://auth0.com/docs/protocols/oauth2), [username/password databases](https://auth0.com/docs/connections#database-and-custom-connections), features like [passwordless authentication](https://auth0.com/passwordless) (with SMS or email), and more.

With Auth0, the universal login page is a [fully customizable UI](https://auth0.com/docs/hosted-pages/login#3-customization). In addition, Auth0's [CNAME](https://en.wikipedia.org/wiki/CNAME_record) functionality to persist the same domain across the universal login page and the app is scheduled to launch before the end of 2017.

![Auth0 universal login page](https://images.ctfassets.net/23aumh6u8s0i/6TwsXjuNeMnkg5I4ZN3y5o/c4b1c77a6e5b8e10b44dc000bde49d19/auth0-centralized-login)

You can <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a> to try out these features and more to modernize your app's authentication and follow standards-based best practices.


"universal-login"