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 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

Tailor registration flows to maximize conversion while meeting business requirements.

Sign-up and login are two critical entity points for your business. They not only provide a means for your company to collect customer data, present and collect consent, and authenticate and verify users and their data, but they also serve as moments to establish brand image and trust. Because of that, these experiences need to be localized, branded, and consistent for your customers and would-be customers.  

For each company, this will be different. This means that companies require the flexibility to modify sign-up and login forms with additional fields and elements to address their unique use cases, business needs, evolving regulatory requirements, and customer demands for transparent, convenient, and personalized experiences.  

And with that, **we’re excited to announce that new sign-up customization capabilities are now available in early access within our Universal Login experience!** This flexibility will ensure that our customers can tailor their sign-up flows to meet their specific use cases.

## How Does It Work?

Customers can customize existing signup prompts by adding custom content and form elements to meet diverse customer preferences, business, localization, and internationalization requirements. No need to host your own pages, which introduce different URLs and separate code bases that slow time to market and create an inconsistent customer experience. 

This includes client and server-side validation, leveraging the Pre User Registration trigger, to ensure that required data, such as Terms of Service acceptance, are completed and validated before completing the signup process.

![How Does It Work](https://images.ctfassets.net/23aumh6u8s0i/1ka3a5mkTZz8NLSNjO7HPW/acb847f03bc1854ddfe55b83f40be34b/New_Sign_Up_Customizations_Now_in_Early_Access.png)

## What Use Cases Are Supported?

The initial early access release will provide support for various use cases, including: 

* Collect necessary customer data (name, phone number, email, preferences, consent, etc.) 
* Present Terms of Service/Privacy policy and opt-in before signing up
* Display marketing information and trust signals with URLs and/or images
* Add custom text, links, images, URLs, etc. 
* Localize or customize custom text in different languages (Note: EA release may not include a full scope of localization capabilities)
* Experiment with different designs, copies, and elements 

## How Can You Apply?

If you are interested in joining the early access program, please reach out to your account manager.  

_Any products, features, or functionality referenced in this material that are not currently generally available may not be delivered on time or at all. Product roadmaps do not represent a commitment, obligation, or promise to deliver any product, feature, or functionality, and you should not rely on them to make your purchase decisions._


New Sign-Up Customizations Now in Early Access

Andrew Whitman

Andrew is a Customer Identity and Access Management specialist at Okta and loves solving complex identity challenges for his customers. His background in mobile application architecture and development has given him the opportunity to keep pace with the rapid changes that have taken place with authentication over the last 10 years.

Senior Solutions Engineer

Extending core identity functions to fit your application’s unique needs

Identity is a complex domain, and beyond a set of foundational functions, every business has unique needs. But with finite resources (likely already stretched thin by other demands), how can developers build custom solutions that extend and integrate with core identity functions?

Or — put another way — how can development teams do more with less?

To help answer that question, we will explore [Okta Customer Identity Cloud (Auth0)](https://www.okta.com/customer-identity/) Redirect Actions capability with progressive profiling and coupon promotions as two example use cases.

## Actions and Actions Integrations

[Actions](https://auth0.com/docs/customize/actions) are secure, tenant-specific, versioned functions written in Node.js that execute at specific points in identity flows. Actions are used to customize and extend Auth0's capabilities with custom logic, providing developers with the versatility needed to achieve [a wide variety of use cases](https://auth0.com/docs/customize/actions/use-cases).

To accelerate your Identity innovations, the [Auth0 Marketplace](https://marketplace.auth0.com/) includes a long (and ever-growing) list of [Actions Integrations](https://marketplace.auth0.com/features/actions) — partner-built solutions that can be quickly added to extend your identity flow with no-code ease. We recommend looking at the Marketplace before embarking on any custom Actions development because there’s a good chance what you need is already waiting for you.

But, as identity continues to evolve, developers will also have new use cases. And we want to illustrate how Actions can do a lot of heavy lifting as you implement new use cases.

![Build Your Own Integration](https://images.ctfassets.net/23aumh6u8s0i/7hXtS4g7a9TUncVFswrY7Y/bb290371ce4bf09eb9682d1f9c339ea1/01_Build_Your_Own_Integration.png)

## Implementing Progressive Profiling with Redirect

[Progressive profiling](https://auth0.com/docs/manage-users/user-accounts/user-profiles/progressive-profiling) is the process of incrementally collecting additional information about your users as they engage with your website or application. For example, you could collect the user's name, email, and password during sign-up, then ask for their company’s name and job title the next time they log in. This bite-sized approach helps you avoid long sign-up forms that can negatively impact the customer experience (or maybe turn them off your service entirely).

Auth0 [introduced progressive profiling flows in 2020](https://auth0.com/blog/progressive-profiling/#Getting-The-Most-From-Your-Progressive-Profile-Funnel), and we’re happy to see this approach used by modern applications more frequently. But the platform has evolved since the feature debuted, so it’s time to revisit some details on setting up progressive profiling with Actions (versus the original implementation using Rules).

More than that, we also want to highlight how the Redirect flow can apply to more than just onboarding users. Or, put another way, the Redirect feature is powerful, and the progressive profiling use case will help us to illustrate some of its capabilities that developers may have overlooked.

### General approach

Redirects occur during login and allow you to take your user to an external page before granting access to the application. This technique can be useful for progressive profiling because, at this point of authentication, the user has already entered their proper credentials, they have a purpose for visiting the site, and they likely have the intrinsic motivation to answer questions presented to them so they can proceed.

The [Redirect with Actions](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow/redirect-with-actions) documentation goes over this process in detail and discusses the various ways to pass data with this flow. For our purposes, we will use [the front channel approach](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow/redirect-with-actions#send-data-on-the-front-channel) that roughly follows this sequence:

![Front Channel Approach](https://images.ctfassets.net/23aumh6u8s0i/ey2pLXDDxHwWxlgywXv16/5a18cb2bc6c68ed9a4b4f15abbe39bf7/02_Front_Channel_Approach.png)

Within this overall process, the Action flow itself has three main steps:

1. Determining if the Action should execute
2. Preparing, passing, and receiving the data
3. Utilizing the received data

### Action step #1: Determining if the Action should execute

We don’t want to use Redirect every time users access our application, so we need to make sure we have criteria at the start of our Action that will result in it only triggering when appropriate.

The criteria can come in many forms, giving developers precise control over Redirects. Examples include the number of times the user has logged in previously, the last time they received a prompt via a redirect, or the current state of their profile information. 

### Action step #2: Preparing, passing, and receiving the data

To ensure data is exchanged securely with our Redirect application, we first pass over an auto-generated state value and a signed JSON Web Token (JWT).

The signed JWT will use a shared secret to allow the Action to send over additional context to the URL and for the URL to do the same with the data the user has entered. 

### Action step #3: Utilizing the received data

When the user has finished interacting with the Redirect application and is brought back to complete their authentication journey, the Auth0 Action will first validate the state value and inspect the signed JWT.

If everything is valid, the Action can use the newly received data to update the user profile. Next, the Action can determine and flag if additional Redirects are required, after which the login flow proceeds to the next Action or completes the authentication.

### The user experience

Actions can be used to implement anything from simple flows to extraordinarily complex ones, but any complexity takes place behind the scenes. Here’s what the three-step flow above looks like to the end user.

![End User View](https://images.ctfassets.net/23aumh6u8s0i/1eBVWkKnfJ4d6KXv7d5HDY/021339a816c968f0ae2aab672b5b5237/03_End_User_View.png)

### Redirects to improve cart transactions

In addition to acquiring customer information and preferences, e-commerce sites can also utilize Redirect to help drive conversions — for example, by adding a coupon incentive when a user logs in for the first time and verifies their email.

Since Actions has context on the authenticating user and session, we can redirect to additional pages (e.g., a coupon code alert) to ensure the user is aware of the promotion and to encourage them to complete their first transaction.

And importantly, Actions can store (within a user’s profile) data that is exchanged during these Redirects, enabling other applications functions to interact with it. 

![Redirect end user](https://images.ctfassets.net/23aumh6u8s0i/TRrNbjiSqOljtxBFXKuWx/92f1ab43e68132302d42426514c9bf0b/04_Redirect_end_user.png)

## Let’s Dive In

Now, let’s build our own Redirect Action in our tenant.

This demo requires the following:

1. An Auth0 tenant (sign up and create one [here](https://manage.auth0.com/))
2. A remixed copy of [this Glitch App](https://glitch.com/edit/#!/okta-cic-pp-demo)
3. The following [Login Action code](https://github.com/awhitmana0/cic-redirect-actions/blob/main/redirect-intro-profile-data.js):

![action_example_1](https://images.ctfassets.net/23aumh6u8s0i/3aKYVGUzqjj3gIYehtsHS6/199a048f76b63a0010504693ba0b98b1/05_action_example_1.png)

### Instructions

1. Go to [**https://glitch.com/edit/#!/okta-cic-redirect-actions**](https://glitch.com/edit/#!/okta-cic-redirect-actions) and remix the app. Copy your remixed URL so we can add it to our Action.

![glitch-url-example](https://images.ctfassets.net/23aumh6u8s0i/iCyB2jcLxxgUOxTO7ABiM/9b5204fd30f2d581804607126908ec48/06_glitch-url-example.png)

2. We will use environment variables to configure this template to work with our application. 
 1. **Shared secret**: You will need to generate your own secured shared secret that only your app and tenant can access. Generate a string for `APP_SECRET_KEY` using openssl rand -hex 32 from your shell.
Take note of this value so we can add that to our Action and redirect page.
 2. **Auth0 Application domain, secret, client ID**: These can be found in your Auth0 tenant settings and will be set under `AUTH0_DOMAIN`, `AUTH0_CLIENT_SECRET`, `AUTH0_CLIENT_ID` respectively.
(Note: If you are linking from an existing app, you can ignore this step.)

![Glitch Environment Variables](https://images.ctfassets.net/23aumh6u8s0i/42UMb4cNEmrJrxTALZhFmJ/dde8474c199605a7fc9c4d910cd42540/07_Glitch_Environment_Variables_.png)

3. Copy the Action code from the starting section.
4. Create a new custom [login flow](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow) Action in your Auth0 tenant.
5. Paste the code copied in step 3 into your new login flow Action.
6. [Create two new secrets](https://auth0.com/docs/customize/actions/write-your-first-action#add-a-secret): `FORM_URL` and `SESSION_TOKEN_SECRET`. <br>
Set `FORM_URL` = `https://NEW-GLITCH-URL/prog/universal` <br>
Set `SESSION_TOKEN_SECRET` = secret created in step 2a <br>
7. Save and deploy the Action and add it to your login flow.
8. COMPLETE: Test your new login Redirect flow by signing up a new user!

## Extending the Flow: Checking Marketing Preferences

Since Actions are composed of code, we can build more complex use cases in our Auth0 environment.

This sample Action is set up to be extremely flexible and to let the receiving URL act as an empty vessel to display forms, and the configuration and theming of the page can all occur within the Action itself. In practical terms, this means that you can use the same URL with multiple different Actions to achieve different functionality.

For example, by slightly modifying the original Action, we can easily create a “marketing preferences check” that only triggers on the third login:

![Marketing permissions check](https://images.ctfassets.net/23aumh6u8s0i/ylYXM36ZyCWJXNOm1nfy0/8d9a06472cbafb2f157d87d4f234d2fb/08_Marketing_permissions_check_.png)

Use the [following Action code](https://github.com/awhitmana0/cic-redirect-actions/blob/main/redirect-marketing-consent.js).

![action_example_2](https://images.ctfassets.net/23aumh6u8s0i/4a3A2QV5JlY129nSA5FqJ7/8e794621354a1bd90e8c34255634aa9f/09_action_example_2.png)

<include src="Vidyard" id="iHp52FNwzSGRQGpW4pnFLb" />

## Only the Beginning...

The examples above represent only a fraction of what’s possible, as the Redirect capability can enable much more functionality that you may wish to leverage during a user’s authentication flow. For example, the same pattern can be used to:

* Require Identity proofing;
* Implement consent management;
* Integrate with customer data platforms;
* Trigger MFA protections; and
* Enable Web3 and decentralized identity
* Plugin data to the underlying connected system
* Prevent fraudulent user access
* Enrich uUser profiles
* and more

And Redirects are themselves only a small part of the larger set of Actions capabilities. Auth0 Actions open a large possibility of very sophisticated identity workflows that can be powered, hosted, and protected by Auth0. In addition, Auth0 Actions help to achieve many possible use cases throughout the sign-in flow; before, during, and after sign-in.

By design, the Auth0 platform is built so you can use Actions to solve a variety of problems that are unique — whether broadly or in the smallest details — to you.

Identity as a domain may be hard, but extending the Customer Identity Cloud’s core functions to meet your application’s specific needs is easy.

## Integrate with Auth0

Learn everything you need to know about our extensibility features, build your own solution, plus understand the process all the way to publishing. We’ve got you covered with helpful docs and resources. Visit [auth0.com/integrate](http://auth0.com/integrate) to learn more.

Using Redirect with Actions to Gather User Info and Increase Conversions

diegopoza

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

Sr Manager, Developer Advocacy

Diego Poza

How to decrease abandoned carts by improving the simplicity and security of your user login process.

When consumers create e-commerce accounts, retailers can use their purchasing history to offer a more personalized shopping experience, which can boost [retail conversion rates](https://www.mckinsey.com/industries/retail/our-insights/personalizing-the-customer-experience-driving-differentiation-in-retail) by up to 15%. However, it is tough for retailers to convince people to actually sign up — case in point, [a 2021 DMI survey](https://baymard.com/lists/cart-abandonment-rate) found that 24% of U.S. shoppers abandoned an order just because they were asked to make an account.

We [surveyed](https://images.ctfassets.net/2ntc334xpx65/7o4UAUaHOMHJeV5fmgK9S1/b4c300762c64becf6cef5989046aaf8f/Infograph_2_2x.jpg) over 8,000 consumers across six global markets (the UK, France, Germany, Australia, Singapore, and Japan) to learn about the login experience they preferred and discovered widespread frustration with standard username/password (UP) login methods and businesses that fail to meet their ease-of-login expectations.

Our survey found five problems that stop consumers from signing up for an online account:

1.  Completing long login or sign-up forms (49%)
2.  Meeting minimum password requirements (47%)
3.  Entering private information (46%)
4.  Creating a new ID and password for every app or online service (43%)
5.  Verifying their account with one-time passwords (OTP) (23%)

<br>
Such frustrations lead to some of the worst security hygiene offenses, in particular, reuse of passwords across multiple accounts. Our survey found that 85% of international consumers reuse passwords, with 41% of them doing so “frequently or all the time” and 29% “sometimes”.

We asked consumers about the kind of login experience that would increase their chances of signing up for an account and found that adding certain authentication features would actually encourage them to do so. Our survey results indicated that, when available, consumers are more likely to complete the signup process if given more secure and easy-to-use login experiences.

![Authentication 01](https://images.ctfassets.net/23aumh6u8s0i/24uCeR7yhZbNmMpbFE7v3v/c2245aa707cc9d83b5242357ed06ac39/Passwordless-Authentication-sep1.jpg)

Below are four authentication tools that can improve your retail conversion rate by creating a more streamlined, secure login experience that satisfies users.

## 1. Multi-factor Authentication (MFA)

[MFA](https://auth0.com/learn/get-started-with-mfa/) requires users to verify their identity in more than one way, which helps reduce the potential for unauthorized access to their data. For instance, a user may submit a password and then have to additionally verify a secondary account or device they own using a link sent to their email address or phone.

Consumers want to know that companies are protecting their data. In a 2020 survey with 1,000 North American consumers asked about privacy and data collection, management consulting firm McKinsey & Company found that [87% of respondents said](https://www.mckinsey.com/business-functions/risk-and-resilience/our-insights/the-consumer-data-opportunity-and-the-privacy-imperative) they “would not do business with a company if they had concerns about its security practices.” MFA helps retailers provide consumers with greater confidence their data is protected because it blocks [99.9% of attacks](https://www.microsoft.com/security/blog/2019/08/20/one-simple-action-you-can-take-to-prevent-99-9-percent-of-account-attacks/).

While 49% of our surveyed consumers noted they were more likely to sign up for an online account if a business offered MFA, only 28% of surveyed businesses currently offered it as part of their login process. This discrepancy arises from the perception that the multiple steps in MFA mean extra hassle for both users and the business.

However, MFA is actually fairly easy to implement — many companies [quickly adopted it](https://www.brighttalk.com/webcast/15793/483340/451-research-report-remote-work-during-covid-19-drives-mfa-adoption) when COVID-19 forced them to pivot to a remote workforce in 2020.

**Company use example**: According to [Jordan Christensen](https://auth0.com/case-studies/ecobee/), VP of Technology at [ecobee](https://www.ecobee.com/en-us/), the smart device retailer wanted to protect consumers using ecobee’s home monitoring products, so they outsourced MFA implementation. His team was thrilled they were able to bring MFA to customers “without needing to reinvent the wheel.”

## 2. Biometrics

[Biometrics](https://auth0.com/blog/what-are-biometrics-the-proscons-of-biometric-security/) uses measurable human traits, characteristics, or behaviors to confirm user identity. Fingerprint scans and facial recognition are two of the most common forms of biometrics, but there’s a growing list that includes options like voice, gait, and even DNA recognition.

Biometric traits are harder for hackers to fake than usernames and passwords, so they can help mitigate security concerns that could keep consumers from signing up. [Consumers](https://usa.visa.com/visa-everywhere/security/how-fingerprint-authentication-works.html) also like it because it’s faster than username/password authentication, and they don’t have to struggle with remembering login credentials.

While 46% of our surveyed consumers responded that they’d be more likely to log in if they could use biometrics, only 21% of the businesses we surveyed currently offered it — the biggest consumer-business gap we found in the study. Taking steps to close the gap between consumer expectations and current business practices will result in a better customer experience and better retail conversion rates.

Steven Rees-Pullman, SVP, International at Auth0, explains that it can be a [“heavy lift”](https://auth0.com/blog/businesses-fall-short-of-consumer-expectations-for-login-experiences-auth0-survey-reveals/) for businesses to develop biometric authentication in-house due to factors like limited bandwidth of IT employees or a lack of expertise with the process. To prevent diverting company resources and adding additional stress on already busy IT teams, some companies are instead choosing to outsource implementation to third-party providers that specialize in identity management and already have [experience with biometrics](https://auth0.com/docs/mfa/configure-webauthn-device-biometrics-for-mfa).

**Company use example**: Consumer use of [Microsoft’s](https://www.microsoft.com/) biometric authentication tool Windows Hello, which lets users log in with a face, iris, or fingerprint scan instead of a password, jumped from [69.4% to 84.7%](https://www.microsoft.com/security/blog/2020/12/17/a-breakthrough-year-for-passwordless-technology/) in 2019 alone. Additionally, [Disney](https://www.disney.com/) started experimenting with a [facial recognition system](https://insidethemagic.net/2021/04/disney-world-facial-recognition-ks1/) at Walt Disney World’s Magic Kingdom theme park this year and was using [fingerprint scanning](https://insidethemagic.net/2020/10/disney-fingerprint-scanning-kj1/) to prevent ticket fraud before COVID-19 hit.

## 3. Social Logins

[Social logins](https://auth0.com/learn/social-login/) use existing login information from a social network provider that allows consumers to access a third-party website account without having to create another one. While the number of social providers [keeps growing](https://www.theverge.com/2021/5/7/22422980/tiktok-log-in-sound-kit-app-integration-developers), staple networks include Facebook, Google, and Twitter.

Consumers prefer social logins to traditional UP authentication because they typically allow them to create and log in to accounts with just one click. As a result, social logins generally [boost conversion rates](https://auth0.com/blog/how-to-use-social-login-to-drive-your-apps-growth/) by up to 20% — though some companies report seeing [as high as 40%](https://www.quora.com/What-impact-does-social-login-have-on-conversion-rates). Social logins also provide access to rich user data, allowing you to use more customized, targeted marketing with individual consumers.

Our survey found there wasn’t a huge gap between consumers and businesses with social logins, with 37% of consumers noting they were more likely to sign up with it and 31% of businesses currently offering it.

Social logins are typically connected to larger companies with established data privacy measures, but security can be compromised if users are reusing passwords. Martin Gontovnikas, former VP of Marketing at Auth0, says consumers using social logins should [vary their passwords across platforms](https://auth0.com/blog/social-login-on-the-rise/), and you can choose to boost the security strength of social logins by combining it with MFA.

**Company use example:** Kevin Ho, VP of Marketing for marketing agency [WishPond](https://www.wishpond.com/), found that after featuring a social login option more prominently than UP authentication, the company saw an [8.5% increase](https://blog.wishpond.com/post/115675436270/how-we-improved-sign-up-rates-by-8-5-with-this-simple-test) in their conversions.

## 4. Passwordless

[Passwordless](https://assets.ctfassets.net/2ntc334xpx65/3Ew2LXo2UJDQdlSukeQxwq/de57802e6a5da4a58de15ee68b42ccf5/Passwordless-Whitepaper-Auth0.pdf) authentication is exactly what it sounds like: confirming a consumer’s identity with something different from a password. Outside of biometrics, typical passwordless options include magic links, where a user is sent a link to log in after submitting their email, one-time codes, and push notifications.

With the average consumer having [approximately 100 passwords](https://tech.co/news/average-person-100-passwords#:~:text=According%20to%20new%20research%20from,has%20100%20passwords%20to%20remember!), passwordless authentication reduces potential user frustration with logins. Not having traditional UP authentication also means increased data security, with Verizon noting in its [2021 Data Breach Investigations Report](https://www.verizon.com/business/resources/reports/dbir/) that stolen login credentials are the main way organizations get hacked. Next Move Strategy Consulting published a report [this month](https://www.nextmsc.com/report/passwordless-authentication-market) predicting that the global passwordless authentication market will grow by 29.1% by 2030.

Even so, passwordless authentication came in last in our survey in terms of both consumer likelihood to sign up with it (34%) and business use (20%). Traditionally, [IT infrastructure](https://www.forbes.com/sites/forbestechcouncil/2021/04/20/why-is-passwordless-authentication-met-with-reluctance/?sh=5a946c366d06) at large companies has been set up for UP authentication, so it can be a complex process for businesses to implement passwordless tech on a wide scale.

According to Cybersecurity Insiders’ 2021 [“The State of Passwordless Authentication”](https://media.fidoalliance.org/wp-content/uploads/2021/03/The_State_Of_Passwordless_Authentication_2021_Report.pdf) report, many organizations that have chosen to implement passwordless authentication have done so because of its proven security, ease of use, and ability to “help consumer-facing businesses increase revenue.” Microsoft also reported that [more than 150 million users](https://www.microsoft.com/security/blog/2020/12/17/a-breakthrough-year-for-passwordless-technology/) were using passwordless authentication on Windows in May 2020.

**Company use example:** Kunal Chakraborty, Global Vice President for Customer Experience and Digital at [GrandVision](https://www.grandvision.com/), the optical retailer, said the company made [“the checkout process as customer-friendly as possible”](https://auth0.com/case-studies/grandvision/) by having a third-party provider implement passwordless authentication — accounts are created just by clicking a box. As a result, GrandVision saw a [boost in their conversions by up to 54%](https://techbeacon.com/security/your-passwordless-future-make-it-sooner-rather-later).

![Authentication 02](https://images.ctfassets.net/23aumh6u8s0i/3DuYOoznWG10geDOeYwBVm/02b5dbc23075eebf4d984f22dbaaec76/Passwordless-Authentication-sep2.jpg)

## Authentication Technologies Enhance User Experience

While it may seem like adding a new element to your login box would drive consumers away, it’s actually the opposite. By using one of the authentication tools above to provide consumers with a simple, secure login experience, you can satisfy users and continue to strengthen their ties to your brand with personalized marketing — strengthening your retail conversion rate in the process.

Auth0 makes implementing the authentication technologies above simple — learn more [about Auth0’s platform](https://auth0.com/authentication) here.


4 Authentication Tools That Increase Retail Conversion Rates

jenny-obrien

I'm a former business journalist who's fascinated by the intersection of tech and business strategy — in particular how the right solution can transform an idea into reality. I specialize in ROI, data privacy, and identity.

Business Content Manager

Jenny O'Brien

We’re sending an expert team to Shoptalk this year. Schedule a meeting to learn how Auth0 can help you increase conversions.



<div class="alert alert-info alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>Forrester Consulting analysis determines that using Auth0 can yield a 548% ROI and $3.7M in identity-related savings. Read the full report: <a href="https://resources.auth0.com/forrester-tei-research-case-study/">Total Economic Impact of Auth0</a>.</strong>
</div>

---
Just a few years ago, some retailers were hesitant about letting shoppers access online stores through social logins like Facebook or Google. Leading up to [Shoptalk 2018](https://shoptalk.com/), people headed to this year’s global retail innovation convention in Vegas are telling us that’s no longer the case — [one-click login](https://auth0.com/retail) has gone mainstream.

## Increased Conversions
At Auth0, we’ve helped customers like Polaris, Nando’s, Wayfair, The Iconic, Western Digital, Talbot’s, and more streamline their customer logins. Our customers find that social login increases conversions, removing unnecessary barriers to a pleasurable shopping experience.

Rather than losing a customer during login hesitation, social login also gives retailers opportunities for personalization while enabling them to deliver a consistent brand experience at each touchpoint. According to a [Web Hosting Buzz survey](http://www.webhostingbuzz.com/blog/2013/03/21/whos-sharing-what/): 86% of users report being bothered by having to create new accounts on websites.

## Phase I Replatforming - Identity

Another trend we’re hearing is the desire to replatform ecommerce experiences as a way to become more responsive to ever-changing customer needs. Shoptalk attendees are telling us that addressing identity is phase I in their multi-phase approach to becoming more agile.

Auth0 identity offers an opportunity to create a true omnichannel experience across brands with single-sign on, while also simplifying partner collaborations.

## Schedule Your Shoptalk Meeting with Auth0

We are sending an expert team, including a software architect, to Shoptalk this year. If you’d like to schedule a meeting to discuss how Auth0 can help increase your conversions, personalize engagement, streamline partnerships, and build brand loyalty, please reach out to [sales@auth0.com](mailto:sales@auth0.com).

---

<include src="asides/AboutAuth0" />


Meet with Auth0 at Shoptalk 2018

df6c864847fba9687d962cb80b482764?size=200 avatar

df6c864847fba9687d962cb80b482764?size=200

Martin Gontovnikas, a.k.a Gonto, is a software engineer at heart who moved to the ‘dark side’ and became VP of Marketing at Auth0. He considers himself lucky to have found a way to combine his two passions and apply his engineering thinking model to marketing.<br/><br/> Gonto’s analytical thinking is a huge driver of his data-driven approach to marketing strategy and experimental design. He is based in the Bay area, and in his spare time, can be found eating gourmet food at the best new restaurants, visiting every local brewery he can find, or traveling the globe in search of new experiences.

Former SVP of Marketing and Growth at Auth0

Martin Gontovnikas

Secure, social sign-on capabilities result in 25% increase in conversion rates.



**BELLEVUE, WA**—Auth0, the leading Identity-as-a-Service (IDaaS) platform, has helped [Giving Compass](https://givingcompass.org/about/?r=a0) stay secure while pursuing its mission. Giving Compass is a nonprofit organizing the world’s information to make it easier to give well.

Giving Compass is relying on Auth0’s robust authentication platform to create a secure and easily accessible platform for its growing network of philanthropists. 

With a leadership team that hailed from the tech world, it was important to Giving Compass that they put technology first to help further their mission for good. After a thorough evaluation of identity providers, Auth0 was selected for its ease of use, as well as the ability to provide social login for users while keeping member data completely secure. 

“Writing the code for authentication is always a nightmare, and it's the first potential door to a cyberattack,” said Luis Salazar, Co-Founder and Interim CEO, Giving Compass. “Peace of mind by having something that is proven and super easy to implement is the number one reason we chose Auth0. It just works.”

Auth0 was implemented in less than a week and provided Giving Compass with the solid technology foundation in which to grow its network. Thanks to the rapid integration, Giving Compass has saved more than 100 hours of identity-related development and testing (an estimated $25,000 thus far). It has also witnessed a 25% increase in conversions with social login functionality, resulting in 97 out of 100 people completing the signup process. 

For more details on how authentication helped propel Giving Compass and it’s mission, please read the full [case study here](https://auth0.com/learn/giving-compass-case-study/). 

[Join](https://givingcompass.org/join/?r=a0) Giving Compass as a secure user.

<include src="asides/AboutAuth0" />

## About Giving Compass

Headquartered in Seattle, WA, Giving Compass is a nonprofit organizing the world’s information to make it easier to give well. Giving Compass guides donors who want to give with intention and impact on a journey to learn, connect with others, and take action to drive meaningful change in communities and the world. Learn more at www.givingcompass.org.


Giving Compass Grows Philanthropic Network with Auth0

Yes, your login can help you raise your conversion rate — here's how.



---

After users sign-up, they get into your fantastic app. You show them the basic features, and you've even done some [data analysis](https://amplitude.com/mobile-analytics) to figure out what users need to do to increase their chances of sticking around. When they're in, they're hooked.

But your conversion rate still isn't great. Something is stopping people from taking the plunge and starting to use your app, which is constraining your growth.

If this has you nodding along, you might be suffering from a problem at login. Even if you have a great product, you're not going to succeed unless you actually get users to join. It's time to make a change to the way you're getting users to sign-up, and we have some tips.

## 1. Use Social Login

One of the best ways to improve your conversion rates is to use social login. Why? Because it's one of the easiest ways for people to sign-up. The benefits of social sign-up are clear — anywhere from a [20-60% increase](https://www.quora.com/What-impact-does-social-login-have-on-conversion-rates) in conversion — and it works for users because they don't have yet another name and password to remember. One click and they're in.

![Auth0 Widget](https://images.ctfassets.net/23aumh6u8s0i/14TsvllhY82tabCPZ5QkPk/f9a8b67709155f1503c9c1135a613198/Auth0Widget)

This means that, when a user finds your app, they can sign-up almost without thinking about it — there's nothing to make them stop and consider whether or not it's worth the effort to sign-up before they've even seen what you can really do.

In the same vein, you can setup your login with a smart sign-up form. With this, your users don't have to fill in a whole form during sign-up, because you've filled it in for them. An example of this is [frictionless sign-up](https://segment.com/blog/frictionless-signup-forms-by-clearbit-segment/), an integration by [Segment](http://segment.com/) that you can use with your login. A user puts in their email, to get their sign-up started. Then, the Segment integration retrieves and fills in their name and job information filled out, speeding up the sign-up process.

Taking the hassle out of your users' sign-up experience is a no brainer, and with the broad range of social login options available, there's no reason you can't add a few networks and tricks to your login or sign-up form.

> Auth0 can help B2C companies to enrich the profile of their customers through an easy to use [Modern Customer Identity Management solution](https://auth0.com/b2c-customer-identity-management). Increase brand loyalty with better conversion, boost your revenue with new user acquisition, and secure customer identity with state-of-the-art technology.

## 2. Show Them Their Friends

FOMO isn't just a trend — it's an actual, [psychologically rooted phenomenon](http://www.slate.com/blogs/quora/2015/09/30/fomo_what_s_the_psychology_behind_the_fear_of_missing_out.html). People want to know what their friends are doing, and feel anxious when they're left out. And if you can tap into that psychology by showing people their friends using your app, you're going to be more likely to get them past your login. Check out how Facebook pulls your list of friends from your Facebook profile to encourage you to use Messenger:

![Messenger](https://images.ctfassets.net/23aumh6u8s0i/28EOUBv3CWbBWqISweyE7u/ecd92b79cebb5a59d15212367efe173f/messenger)
_Source: https://blogs.adobe.com/creativecloud/xd-essentials-user-onboarding-and-empty-states-in-mobile-apps/_

The easiest way to tap into this is by making it a breeze for your users to invite their friends to your app. Ensuring that your product is convenient to share with friends, such as configuring [App Invites](https://developers.facebook.com/products/sharing/app-invites) on Facebook, can be especially effective. If someone gets your app recommended via an invitation from a friend, that exposure will help you convert that person into a user.

For example, if you and your buddy are really into soccer, you might be much more tempted to sign-up for World Cup Challenge if you see that they've invited you to play with them.

![Invite](https://images.ctfassets.net/23aumh6u8s0i/55knbZM0yNLXzkdvKMuh7L/cf341f9a2fb0d2787bbaa483fafeaaff/wwc_invite_receipt)
_Source: https://blog.branch.io/how-to-deep-link-on-facebook_

Showing people their friends as soon as they get past the login page is also a great motivator to stay on social apps. The trick is to configure your social login to acquire their friends from their profile.

![Facebook setup](https://images.ctfassets.net/23aumh6u8s0i/1KF3fRZNBNgdtgLsNpZCvt/c994d0207755db9239bc4e6d3eb69f92/facebook-setup)

Immediately seeing their friends will make people feel like your app is a natural extension of their network. Showing potential users right at sign-up that they know people who are active on your app will drive them to convert because they have a natural desire to see what their friends are up to — and what they've missed out on.

## 3. Personalize Their First Experience

Just as showing people their friends when they sign-up is a good way to demonstrate the value of your app, personalizing a user's first experience can help you get people from signing up and onboarding to being a dedicated user.

One easy way to connect from the very first login is to use geography to your advantage. Whether you're showing them recommendations in the area, getting regional news on their feed, or sampling a rainy day playlist to match the weather, using their location to customize what they see at sign-up will help them feel welcomed, and let them know that they can personalize their own experience.

For example, Foursquare asks for a user's location during sign-up. Then, when they enter the app, new users immediately see suggestions near them. This demonstrates the value and relevance of their app immediately.

![Personalize](https://images.ctfassets.net/23aumh6u8s0i/4w5lRe2fvNa44v7GzPcpBu/21f71f39141a564e14e377a2f624810b/foursquare)
_Source: https://www.useronboard.com/how-foursquare-onboards-new-users/?slide=66_

Another way you can hook users into your app is by connecting them to their interests. No matter the focus of your app, there's a way to connect users with what's relevant to their life. If you know a user likes the NBA, you could suggest they follower players or teams. If they're a film buff, have them save the location of their favorite theatre.

This is another place where configuring social login can help you — just as you pulled their friends from their profile, you can also look at pages they've liked or followed. This will help you curate options to show your new users as they work through sign-up and onboarding — which will encourage them to actually get into your app.

## Give New Users What They Want

The consistent factor between all three methods to improve retention that we've discussed is simply giving users what they want. Social login reduces friction by eliminating the need for users to remember another username and password. Showing users their friends at sign-up plays into our desire to connect with our friends, while personalizing from the first login connects users directly with their interests.

The old saying *there's no second chance at a first impression *is never more true than when configuring your login. Driving conversions means catering to your users from your very first interaction. Setting up your login with your users' wants in mind is a great way to raise your conversion rate.

> Auth0 provides the simplest and easiest to use [User interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.


"conversion"