Sign-in Pages
How to build the Experience site pages members use: signing in, signing up, getting back in, and the pages only members can see.
Overview
Arbor adds eight components to Experience Builder, all named Flourish Arbor: something. Every one of them serves a single network, set in its Network ID property: the Id in the network record's URL.
The site has to be open to guests first, and each page that carries one of these components set to Public. Setup explains why: to Salesforce, a signed-in member is still a guest.
Arbor's Login Form is not the site's own login page. That page signs in Salesforce users. Put the Login Form on a page of your own.
A typical site
| Page | Component | Point here from |
|---|---|---|
| Sign in | Login Form | Login URL on the Auth Guard, Registration Form, Request Link and Reset Password |
| Sign up | Registration Form | The network's Registration Site URL, and the Login Form's Registration URL |
| Get a sign-in link | Request Link | Anywhere you mention lost links |
| Reset password | Reset Password | The Login Form's Password Reset URL |
| Every members-only page | Auth Guard, with your content | The network's Auth Site URL names one of these |
| My account | Auth Guard, Change Password, Authenticator Setup | Your own navigation |
Build only what the network uses. A network on One-Time Magic Link alone needs a sign-in page and its members-only pages, and nothing else.
Auth Guard
Flourish Arbor: Auth Guard goes on every page only members should see. When the page loads, it:
- Signs in a member arriving by magic link, then removes the link from the address bar. If the member also needs a second factor, it shows One more step to sign in. Redirecting... and sends them to its Login URL, where the Login Form asks for it and then brings them back.
- Otherwise, checks the browser's session with Salesforce.
- If there is none, and the network keeps members signed in, renews it quietly.
- Failing all three, shows Your session has expired. Redirecting to login... and sends the visitor to its Login URL, noting the page they were on so the Login Form can bring them back.
Both redirects need Login URL, and the Login Form on that page must serve the same network.
In Experience Builder, in the editor and in preview, the guard treats you as signed in so you can lay the page out.
The guard turns visitors away; it does not hide data. Other components on the page load whether the visitor is signed in or not, and the guard only redirects. Anything that shows a member's own data has to check who is signed in on the server. The Developer Guide covers how.
| Property | What it takes |
|---|---|
| Login URL | The sign-in page. |
| Network ID | The network. Magic links do not work on this page without it. |
| Config (JSON) | expiredMessage and mfaMessage, to replace the two redirect messages. |
| Redirect Delay (ms) | How long the message shows before the redirect. Defaults to 1500. |
| Client-Side Only | Accept a session the browser holds without checking it with Salesforce. Faster, but an expired or forged session gets through, so leave it off unless the page holds nothing sensitive. |
Ignore the property labeled (Deprecated).
Login Form
Flourish Arbor: Login Form asks for a username first, then shows each member only what they need:
| The member's method | What happens after Continue |
|---|---|
| Password | A password box, with a Forgot password? link. |
| Email Code | A code is emailed, and the form asks for it. |
| Authenticator App (TOTP) | The form asks for a code from the app. |
| Username | They are signed in straight away. |
| Magic Link or One-Time Magic Link | A fresh link is emailed, and the form says Check your inbox. We have emailed you a sign-in link. For a Magic Link member, the new link replaces the old one. |
A second step follows when MFA applies, and members who need an authenticator but have none set one up right there. A magic-link member the Auth Guard sent here for their second factor starts at that step, with no username to enter.
On a network whose MFA Policy is Encouraged, a member with no second factor sees You're signed in. Add an authenticator app to better protect your account. before moving on, with Set up authenticator and Skip for now. Skipping hides the offer on that browser for 30 days.
An unknown username still gets a password or code step, so the form never confirms who has an account. Once signed in, a member goes back to the page the guard sent them from, or else to the network's Login Redirect URL. It only ever sends a member back to a page on the same site; a request to return anywhere else is ignored.
| Property | What it takes |
|---|---|
| Network ID | The network. |
| Registration URL | The sign-up page, for the Register link. The link only shows when the network allows self sign-up. |
| Password Reset URL | The reset page, for the Forgot password? link. The member's username goes along. Set it, or hide the link: without it the link does nothing. |
| Config (JSON) | The keys below. |
| Config key | Default |
|---|---|
heading | Sign in to your account |
usernameLabel | Username |
usernamePlaceholder | Enter your username |
continueLabel | Continue |
submitLabel | Sign In |
mfaSubmitLabel | Verify |
linkSentMessage | Check your inbox. We have emailed you a sign-in link. |
forgotPasswordLabel | Forgot password? |
showForgotPassword | true. Set false to hide the link. |
registerLinkText | Don't have an account? |
registerLinkLabel | Register |
showRegisterLink | Set false to hide the link even when sign-up is open. |
logoUrl, brandColor | The network's Logo URL and Brand Color. |
Usernames default to email addresses, so many networks relabel the field:
{ "heading": "Member sign in", "usernameLabel": "Email", "usernamePlaceholder": "you@example.com" }
Registration Form
Flourish Arbor: Registration Form does two jobs: self sign-up, and finishing setup for password members you invited.
Self sign-up. What the form offers follows the network, as set out in Self sign-up.
- Set a password: the person enters their email and clicks Register, receives a code, then enters the code, their first and last name and a password, and clicks Create Account. They are signed in at once.
- Email me a sign-in link: the person enters their email and name, and the form says Check your inbox. If you can sign up, we have emailed you a sign-in link. They sign in from the email.
Neither path reveals whether the email already had an account.
After a password sign-up, on a network whose MFA Policy is anything but Off and which allows Authenticator App (TOTP), the form offers Secure your account, to set up an authenticator app, with Skip for now beside it. Then the member goes to the network's Registration Redirect URL.
Finishing an invitation. A setup invitation links to this page with the member's email filled in. The form goes straight to the password path, even when self sign-up is off, and does not ask for a name. The member clicks Register, receives a code, and enters it with the password they choose.
| Property | What it takes |
|---|---|
| Network ID | The network. |
| Login URL | The sign-in page, for the Sign in link. |
| Config (JSON) | The keys below. |
| Config key | Default |
|---|---|
heading | Create your account |
emailLabel, emailPlaceholder | Email, you@example.com |
registerLabel | Register |
submitLabel | Create Account |
chooserHeading | How would you like to sign up? |
passwordOptionLabel, passwordOptionHint | Set a password, Create an account with a password. |
linkOptionLabel, linkOptionHint | Email me a sign-in link, No password. We will email you a magic sign-in link. |
linkSubmitLabel | Email me a sign-in link |
linkSentMessage | Check your inbox. If you can sign up, we have emailed you a sign-in link. |
unavailableMessage | Sign-up isn't available right now. Please contact your administrator. |
backLabel | ‹ Back |
loginLinkText, loginLinkLabel | Already have an account?, Sign in |
showLoginLink | Set false to hide the sign-in link. |
logoUrl, brandColor | The network's Logo URL and Brand Color. |
Request Link
Flourish Arbor: Request Link gets a link member back in. They enter a username or email and click Send me a link, and the page always answers If an account exists for that name, we have emailed it a sign-in link. Check your inbox.
Only link members are sent anything. A Magic Link member's old link stops working when the new one is issued.
The Login Form already does this when a link member enters their username, so this page is optional. It suits a "lost your link?" line in your own emails and pages.
| Property | What it takes |
|---|---|
| Network ID | The network. |
| Login URL | The sign-in page, for the Back to sign in link. |
| Config (JSON) | heading, identifierLabel, identifierPlaceholder, submitLabel, confirmMessage, loginLinkText, showLoginLink, logoUrl, brandColor. |
Reset Password
Flourish Arbor: Reset Password lets a password member choose a new password:
- They enter a username or email and click Send reset code. The page answers If an account exists, we have emailed a reset code. Enter it below with your new password.
- They enter the Reset code and a New password, and click Set new password.
- They are signed in, and go back where they came from or to the network's Login Redirect URL.
A member holding a code already, such as one an admin sent from Member Access, enters their username or email and clicks I already have a code instead. That goes straight to step 2 without sending a new code, which would replace theirs. Send me a new code is there if theirs has run out.
- Only password members are sent a code, and only on a network that allows Password. Elsewhere the page says That authentication method is not allowed for this network.
- A code lasts 10 minutes and allows one try. After a wrong entry, the member needs a new code.
- When the member's sign-in needs a second factor, the reset changes the password but does not sign them in, since an emailed code is no second factor. The page says Your password has been changed. Sign in with your new password to continue., with a Sign in button.
- Arriving from the Login Form's Forgot password? link fills the username in.
| Property | What it takes |
|---|---|
| Network ID | The network. |
| Login URL | The sign-in page, for the Back to sign in link and the Sign in button. |
| Config (JSON) | heading, identifierLabel, sendLabel, codeLabel, newPasswordLabel, submitLabel, sentNote, haveCodeLabel, codeNote, newCodeLabel, doneNote, doneSignInLabel, loginLinkText, showLoginLink, logoUrl, brandColor. |
Change Password
Flourish Arbor: Change Password lets a signed-in member change their password: Current password, New password, Confirm new password, then Update password. Put it on a guarded page.
| Property | What it takes |
|---|---|
| Network ID | The network, for its brand color. |
| Config (JSON) | heading, currentLabel, newLabel, confirmLabel, submitLabel, successMessage, brandColor. |
Authenticator Setup
Flourish Arbor: Authenticator Setup lets a signed-in member add an authenticator app. They click Set up authenticator, scan the QR code (or tap the link on a phone, or type the setup key), enter the 6-digit code the app shows, and click Verify & enable. The app lists the account as Arbor, with the member's username.
By default the app becomes the member's second factor: from then on they enter a code from it each time they sign in. With "asPrimary": true in the config it replaces their sign-in method instead, so they sign in with their username and an authenticator code, and no password.
It needs Authenticator App (TOTP) in the network's Allowed Auth Methods. Put it on a guarded page.
| Property | What it takes |
|---|---|
| Network ID | The network, for its brand color. |
| Config (JSON) | heading, intro, startLabel, instructions, keyLabel, codeLabel, confirmLabel, doneMessage, brandColor, asPrimary. |
Auth Service
Flourish Arbor: Auth Service has no screen of its own. It is how a developer's components find out who is signed in, and how they sign a member out. See the Developer Guide.
Signing out
The package has no sign-out button. A sign-in ends when the member closes the tab, or after two hours without activity, unless the network keeps members signed in. For a Sign out button, a developer calls the Auth Service's logout.
Branding a single page
Every screen takes the network's Logo URL and Brand Color. To brand one page differently, set logoUrl or brandColor in that component's Config (JSON):
{ "logoUrl": "https://www.example.org/images/alumni-logo.png", "brandColor": "#1f6f50" }
Change Password and Authenticator Setup show no logo, so they take brandColor only.