Set Up Mobile-First Login and Sign-Up
- 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.
An Experience Cloud Site in a Flash
Northern Trail Outfitters (NTO) has created a customer service site and manages its customers’ login experience with Salesforce Experience Cloud sites. 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 user licenses. Salesforce default login pages come with any template you use to create a site.
To try out the new mobile-first identity features, Joel starts with building out a test site 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.
Ready to Get Hands-on with Mobile-First Identity?
Create a new Trailhead Playground now to follow along and try out the steps in this module. Scroll to the bottom of this page, click the down arrow next to Launch, and select Create a Trailhead Playground. It typically takes 3–4 minutes for Salesforce to create your Trailhead Playground. You also use the playground when it's time to complete the hands-on challenge.
Be sure to complete the steps in this unit before you try hands-on challenge. The challenge builds on the work you do in the steps.
Create a Site
From the org created with Trailhead playground, you can create a site for users with any license. We create a site for customers and partners with the External Identity User license.
- Create a profile for users with the External Identity license. A profile lets you control what your customers can access in your org.
- From Setup, enter Profiles in the Quick Find box, then select Profiles.
- Next to External Identity User, click Clone, name the profile NTO Customer, and then click Save.
- Create a role for the site admin. The Salesforce admin who manages the site must be assigned a role.
- From Setup, enter Role in the Quick Find box, then select Roles.
- From the dropdown list, select Product-based Sample, then select Set Up Roles.
- Under CEO, click Add Role.
- For the role label, enter NTO Customer Manager and tab to autofill the Role Name.
- Click Save.
- Assign the Customer Manager role to a Salesforce admin.
- From Setup, enter Users in the Quick Find box, then select Users.
- Next to your username, click Edit.
- For Role, select NTO Customer Manager, and then click Save.
- Create an account to contain our customers when they sign up.
- Form the App Launcher (), find and select Accounts.
- From Accounts, click New.
- Name the account NTO Customers, and click Save.
It’s a fresh org, so we first enable sites.
- From Setup, enter Sites in the Quick Find box, then select Sites.
- Enter a unique name for your site domain. It has to be unique across the universe, so try your own name, or some jumbled version of it.
- Click Check Availability to make sure that it's truly unique.
- Click Save, then OK.
- From Setup, enter Experience in the Quick Find box, select Digital Experiences then select Settings.
- Select Enable Experience Workspaces, and click Save.
Set Up a New Site
Spin up a site.
- From Setup, enter Sites in the Quick Find box, and select All Sites.
- Click New.
- From the Site Creation wizard tiles of templates, select the Customer Service template.
- Click Get Started.
- Name the site NTO Customers and, for the URL, enter ntocustomers at the end. Ignore Optional! It’s important to add this suffix, ntocustomers, to ensure that your site has a unique URL. Also, make sure it’s in lowercase.
- Click Create. Our site has been created in Preview status. The wizard lands us at site command central—Experience Workspaces.
- Click Administration to go the workspace for managing the site.
- Assign the NTO Customer profile that you created by cloning the profile for users with the External Identity license. Click Members, then for Search, select Customer. Then add NTO Customer to Selected Profiles, and then click Save. When new members sign up for this site, they’re assigned the NTO customer profile. This profile defines what site members can access.
- Activate the site.
- From the Administration workspace, click Settings.
- Click Activate, then click OK.
- Publish the site.
- At the top left, select Administration, and then select Builder from the dropdown list.
- At the top right, click Publish, and in the confirmation dialogue, click Publish again, and then Got It.
- Now return to the Administration workspace to get to work.
- At the top left, select Administration from the dropdown list.
- Select Login & Registration.
We're now at the page where all login-related activity happens.
We can go on and add other Experience Cloud 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 Site
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.
- For a logo, you can supply your own logo by uploading a file or entering a URL. But let’s use ours. To use our NTO logo, download it from our Github repo, https://github.com/salesforceidentity/Mobile-first/blob/master/logo-nto.png.
- Click the Github link above, then click Download. The logo shows up in a new tab.
- Right-click Save As and choose the folder in which to save the file.
- From the Login & Registration page, under Logo File, click Choose. Then locate logo-nto.png on your file system.
- Scroll to the bottom of the page, and click Save. For Logo File, you should now see the logo for Northern Trail Outfitters. Cool logo, right?
- To check out how a background image enlivens your login pages, you can supply a URL to an image. But if you don’t have a hosted image handy, simply choose a new color for the background.
- For Background Type, select Image URL from the dropdown.
- For Background Image URL, enter a URL to an image. Our background is what you might expect for an outdoor equipment store—green mountains and blue skies.
- Change the color of the Login Button to match your corporate theme. This color applies to buttons on all login-related pages, including Log In, Sign Up, Verify, and Reset Password.
- Update the footer text with Northern Trail Outfitters or your own.
- Click Save.
Set Up Login Discovery
Let the fun begin. You set up your site and branded it. Now let’s set up mobile-first login. As mentioned in Unit 1, Login Discovery gives users the option to log in with something other than their username—like their phone number. When you set up Login Discovery from the Login & Registration page, users can automatically log in with their verified email address or phone number.
- From your Login & Registration page, for Login Page Type, select Login Discovery Page.
- For Login Prompt, enter Email or Phone.
- 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.
- For Execute Login As, select yourself. Click 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.)
- Select Allow internal users to log in directly to an Experience Cloud site.
- Click Save.
- Let’s see what your login page looks like with Login Discovery page type.
- From Administration, click Settings.
- Right-click the URL and select Open Link in Incognito Window (in Chrome) or Open Link in New Private Window (in Firefox or Safari).
The center of your login page shows Email or Phone for the prompt, and Log In for the button. Our background uses our outdoorsy image URL.
Set Up Your Site’s Sign-Up Page
You have a login page for your site members. Now let’s get some members. Users can sign up for the site themselves—after you set up your site’s sign-up page.
- From the Login & Registration page, way down at the bottom of the page, select Allow customers and partners to self-register.
- For Registration Page Type, choose Configurable Self-Reg Page.
- 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.
- Click Create a configurable self-reg handler. Wait! Wait! After you save this page, Salesforce creates a handler that builds your sign-up page. But we have a few more fields to deal with first.
- 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.
- 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.
- 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’s helpful for those users who can’t find their phone.
- For Profile, choose NTO Customer.
- For Account, choose NTO Customers. Your registration page configuration should look like this. Notice that the verification method is Email.
- Click Save.
- Let’s see what your login page looks like now that we’ve set up the Configurable Self-Reg Page type. Refresh the incognito window containing the Log In page.
Your sign-up page looks something like this. Well, it doesn’t have the outdoorsy motif of our background. But you get the idea.
Test It Out: Sign Up and Then Log In a New Customer
Now new customers can sign up for Joel’s site. To test whether a new user can actually sign up and log in, Joel can create a new customer from the login page.
- 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 site.
- Joel clicks Sign Up and creates a new customer, Samantha, but uses his own email address. Salesforce shows the Verify page and sends a verification code to Joel’s email address.
- “Samantha” checks the Inbox for an email with the verification code and then enters the code on the Verify page.
And here it is. Joel has arrived at his site home page. He looks for the profile on the right to see who’s logged in. Guess who? New customer, Samantha, is logged in to Northern Trail Outfitters.
Log In and View Your New Site Customer
Given his skeptical nature, Joel wonders if Samantha can log in to the site 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.
Joel makes sure that Samantha is logged in to the NTO site.
- Joel checks for Samantha’s name on the right. It’s not there, so Joel has to log out the current user.
- Joel clicks the profile picture, and selects Log Out.
Log in to the NTO site as Samantha.
- Joel makes sure Samantha is still logged in. At the NTO login page, Joel logs in Samantha by entering the email address he used when he signed her up.
- Joel checks his email for a new verification code, and enters it in the Verify page.
- Sure enough, Joel (as Samantha) has returned to the Northern Trail Outfitters home page.
Check that Samantha is listed as a contact in the NTO Customers account. Joel goes back to his Salesforce org. He wants to see if Samantha is a customer in the NTO Customers account. Remember that we created the NTO Customers account earlier on? This account lists all the customers who signed up.
- From the App Launcher (), find and select Accounts.
- From the list of accounts, choose NTO Customers.
- Success! Samantha is listed as a contact in the NTO Customers account.
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. Identity gurus might refer to this building of a member's profile as 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.
Or, instead of deactivating a user, Joel can disable the customer from Contacts.
You’ve created default login and sign-up pages. Next up, let’s see how we can customize the login process.
- Trailhead module: Identity for Customers
- Salesforce Help: Customize Login, Self-Registration, and Password Management for Your Experience Cloud Site
- Salesforce Help: Customize Your Login Page
- Video: Salesforce Identity Services: A Mobile-First World Requires Mobile-First Login