Start tracking your progress
Trailhead Home
Trailhead Home

Set Up Mobile-First Login and Sign-Up

Learning Objectives

After completing this module, you’ll be able to:
  • Create a login page for passwordless login.
  • Create a configurable self-reg page to collect information from users on sign-up.
  • Test the login and sign-up process by creating a customer.

A Community in a Flash

Northern Trail Outfitters (NTO) has created a customer service site and manages its customers’ login experience with Salesforce Communities. Recently, more of NTO’s customers are conducting business on their mobile devices. Customers want instant access to NTO’s customer service site wherever they are.

Customer service manager Joel Pierce wants to check out the new Salesforce mobile-first identity feature to see if it’s as easy to set up as Salesforce claims. He’s decided to take an hour or so to check it out.

As you learned in Unit 1, this mobile-first login experience is available to all external user licenses. Salesforce default login pages come with any template you use to create a community.

To try out the new mobile-first identity features, Joel starts with building out a test community in a new Trailhead playground. He uses these no-frills setup steps below. Because it’s been a while since he created his customer service site, he can always go to the Salesforce Identity for Customers Trailhead module for a refresher.

Create a Community

From the org created with Trailhead playground, you can create a community of users with any external license. We create a community for users with the External Identity User license.

  1. Create a profile for External Identity users.

    A profile lets you control what your customers can access in your org.

    1. From Setup, enter Profiles in the Quick Find box, then select Profiles.
    2. Next to External Identity User, click Clone, name the profile NTO Customer, and then click Save.
  2. Create a role for the community admin.

    The Salesforce admin who manages the community must be assigned a role.

    1. From Setup, enter Role in the Quick Find box, then select Roles.
    2. From the dropdown list, select Product-based Sample, then select Set Up Roles.
    3. Under CEO, click Add Role.
    4. For the role label, enter NTO Customer Manager and tab to autofill the Role Name.
    5. Click Save.
  3. Assign the Customer Manager role to a Salesforce admin.
    1. From Setup, enter Users in the Quick Find box, then select Users.
    2. Next to your username, click Edit.
    3. For Role, select NTO Customer Manager, and then click Save
  4. Create an account to contain our customers when they sign up.
    1. Open the App Launcher (App Launcher icon), and search for Accounts.
    2. From Accounts, click New.
    3. Name the account NTO Customers, and click Save.

Enable Communities

It’s a fresh org, so we first turn on the Communities feature.

  1. From Setup, enter Communities in the Quick Find box, then select Communities Settings.
  2. Select Enable communities.
  3. Enter a unique name for your community domain. It has to be unique across the universe, so try your own name, or some jumbled version of it.
  4. Click Check Availability to make sure that it's truly unique.
  5. Click Save, then OK.

Set Up a New Community

Spin up a community.

  1. From Setup, enter All Communities in the Quick Find box, and select All Communities.
  2. Click New Community.
  3. From the Community Creation wizard tiles of templates, select the Customer Service template.
  4. Click Get Started.
  5. Name the community NTO Customers and, for the URL, enter ntocustomers at the end.

    Make sure that the URL suffix is lowercase, ntocustomers, as in, https://nto-demo-org.com/ntocustomers.

  6. Click Create. Our community has been created in Preview status.

    The wizard lands us at community command central—Community Workspaces.

  7. Click Administration to go the workspace for managing the community.
  8. Click Members to assign the profile you cloned from the External Identity profile.

    Assigning the profile gives NTO customers access to the community after they sign up.

    Assign profiles to members screenshot
    1. From Search, choose Customer.
    2. From Available Profiles, add NTO Customer to Selected Profiles, then click Save.
  9. Activate the community.
    1. From the Administration workspace, click Settings.
    2. Click Activate Community, then click OK.
  10. Publish the community.
    1. At the top left, select Administration, and then select Builder from the dropdown list.
    2. Click Publish, and in the confirmation dialogue, click Publish again, and then Got It.
  11. Now return to the Administration workspace to get to work.
    1. At the top left, select Administration from the dropdown list.
    2. Select Login & Registration.

We're now at the page where all login-related activity happens.

Login & Registration page screenshot

We can go on and add other Communities features, but we’ve got the basics covered for now. We’re ready to bring our login pages to the modern, mobile-first-identity era.

Brand the Community

From the Login & Registration page, you can brand all pages related to the login experience. That is, the branding applies to pages where users sign up, log in, verify their identity, reset passwords, and more.

Login & Registration branding options screenshot
  1. For a logo, you can upload a logo file or enter a URL to one.
    To use our NTO logo, download it from our Github repo, https://github.com/salesforceidentity/Mobile-first/blob/master/logo-nto.png
  2. Check out how a background image can enliven your login pages. Change Background Type to Image URL, and then enter a URL to an image.
  3. Change the color of the Login Button to match your corporate theme.
    This color applies to buttons on all login-related pages, including Sign Up, Log In, Verify, Reset Password.
  4. Update the footer text with Northern Trail Outfitters or your own.
  5. Click Save.

Set Up Login Discovery

As mentioned in Unit 1, Login Discovery gives users the option to log in with something other than their username. When you set up Login Discovery from the Login & Registration page, users can automatically log in with their verified email address or phone number.

Login page setup options on Login & Registration page screenshot
  1. For Login Page Type, select Login Discovery Page.
  2. For Login Prompt, enter Email or Phone.
  3. Click Create a Login Discovery Handler. After you save this page (but wait—don't save it yet!), Salesforce generates a default login discovery handler.

    The Login Discovery Handler points to an Apex class that implements the Login Discovery logic. You can learn more about the handler and how to customize it in the next unit.

  4. For Execute Login As, select yourself. Click Magnifying glass icon and select your name.

    The Execute Login As field is required and it provides the context in which the Login Discovery handler runs. (In production, admins typically create a system user for this field. This way operations performed by the handler can be easily traced back to the login process.)

  5. Select Allow internal users to log in directly to the community.
  6. Click Save.
  7. Let’s see what your login page looks like with Login Discovery page type.
    1. From Administration, click Settings.
    2. Right-click the URL and select Open Link in Incognito Window (in Chrome) or Open Link in New Private Window (in Firefox or Safari).

      URL to NTO Customers on Settings page screenshot

Your login page looks something like this.

Login Page using Login Discovery page type screenshot

Set Up Your Community’s Sign-Up Page

Now that we have our login page configured, we can set up your community’s sign-up page from the Login & Registration Page.

  1. From the Login & Registration page, select Allow external users to self-register.
  2. For Registration Page Type, choose Configurable Self-Reg Page.
  3. Choose which user fields you want customers to supply when they sign up. We want to keep it simple, so we select First Name, and Email.
  4. Click Create a configurable self-reg handler.

    After you save this page, Salesforce creates a handler. But we have a few more fields to deal with first.

  5. For Execute Registration As, select yourself.

    Just like the Login Discovery Handler above, Execute Registration As provides the context in which the Configurable Self-Reg handler runs.

  6. For Verification Method, select Email.

    By choosing Email for the verification method, Salesforce sends a verification code in an email message to your Inbox. If you choose Text Message, Salesforce sends a verification code in a text message to your mobile phone. If you choose None, users must enter a password to log in.

  7. Keep Include Password unselected.

    For a simpler sign-up process, we won't collect a password at this time. But if you select Include Password, the self-registration form contains Password and Confirm Password fields. An advantage to asking for the password at sign-up is to make sure that users always have a way to log in. It helps out those absent-minded users who can’t receive a text message because they left their phone at home.

  8. For Profile, choose NTO Customer.
  9. For Account, choose NTO Customers.

    Your registration page configuration should look like this. Notice that the verification method is email.

    Configurable Self-Reg page type on Login & Registration page screenshot
  10. Click Save.
  11. Let’s see what your login page looks like now that we’ve set up the Configurable Self-Reg Page type.
    1. Refresh the incognito window containing the Log In page.
    2. Click Sign Up.

Your sign-up page looks something like this.

Configurable Self-Reg sign-up page screenshot

Test It Out: Sign Up and Then Log In a New Customer

Now new customers can self-register for Joel’s community. To test whether a new user can actually sign up and log in, Joel can create a new customer from the login page.

  1. Return to the private (incognito) window containing the Log In page.
    If you closed the window, from Administration, select Settings, and right-click the path to the community.
    Login page with Sign Up link screenshot
  2. Joel clicks Sign Up and creates a new customer, Samantha, but uses his own email address.

    Sign up Samantha screenshot

    Salesforce shows the Verify page and sends a verification code to the email address.

  3. “Samantha” checks the Inbox for the email with the verification code and then enters the code on the Verify page.

    Verification code on the Verify page screenshot

Success! Joel’s new customer, Samantha, is logged in to Northern Trail Outfitters.

NTO Home Page screenshot

Log In and View Your New Community Customer

Given his skeptical nature, Joel wonders if Samantha can log in to the community after she signs up. How does she log in if she didn’t enter a password when she created her account? Joel checks it out.

  1. From the NTO home page, log out of the community.
    1. Joel clicks the profile picture on the right and select Log Out.
  2. Log in as Samantha.
    1. At the login page, Joel logs in Samantha by entering the email address he used when he signed her up.
    2. Joel checks his email for the verification code, and enters it in the Verify page.

    Sure enough, Joel (as Samantha) has returned to the Northern Trail Outfitters home page.

  3. Check that Samantha is listed as a contact in the NTO Customers account.

    Let’s find out if Samantha is a customer. Remember that we created the NTO Customers account earlier on? This account lists all the customers who signed up.

    1. From the App Launcher (App Launcher icon), search for Accounts.
    2. From the list of accounts, choose NTO Customers.

    Success! Samantha is a contact.

Notice that Samantha’s last name looks something like ExternalUser1550768707871. Why? Salesforce requires a last name to create a user. Because Samantha didn’t supply one when she signed up, Salesforce assigns her a temporary one. On subsequent logins, NTO can ask for it, along with other profile information. That way, NTO builds Samantha’s profile as she continues to become a loyal NTO customer.

This building of a member's profile is sometimes called progressive profiling powered by login flow.

Sign Up More Customers

Joel wants to create more customers in his org. He can because his Playground org gives him a few External Identity and Communities licenses. But he can’t create customers with the same email address. Every customer must be unique, so he has to come up with other email addresses to add more customers.

Joel can easily check whether customers have unique email addresses from the Users page in Setup. To see a list of users’ email addresses, Joel first creates a user list view, according to instructions in a later unit. If it happens that two users have the same email address, he can deactivate one by deselecting the user’s Active check box.

Active users on the Users Setup page

Or, instead of deactivating a user, Joel can disable the customer from Contacts.

Disable customer user from Contacts

What’s Next?

You’ve created default login and sign-up pages. Next up, let’s see how we can customize the login process.

retargeting