How to Setup a Login Flow in Noca Apps
How to set up a login flow in the Noca App Builder
Gate your app pages behind a Salesforce-backed login
This walkthrough shows you how to add a login to a multi-page app in the Noca App Builder. The example is a Vendor Onboarding Portal. A vendor types their email on the first page, Noca checks it against a Contact in Salesforce, returns the contact ID, and only lets them through when it matches. Here is how to set it up.
Watch & Learn
Follow these steps to set up your login:
Steps:
1
Open the page events
- Open your multi-page project and go to the first page
- Click Events in the top toolbar to see what you can hook into, like on load, unload, and on click
2
Add a flow to your Login Button
- Find the On Click event for your Button
- Click the plus sign to build a flow that runs when someone clicks continue
3
Start with the API node already in place
- The flow builder drops in an API node for you
- It points at the app you built, the Vendor Onboarding Portal, and the first page, EmailPage
4
Add a node to read your email field
- Choose your system of record that you would like to match the login credentials to
- In this example we are using Salesforce
- Set the action to Read and pick the object you want to look up, in my case Contact
- Insert the node
5
Set the match condition
- Add a condition so the email on the Contact equals the email typed into your app
- Drag in the Business email input from EmailPage so the two emails match one to another
6
Send the contact ID back with an API response
- Add an API Response node and set the type to JSON
- Add a key for the contact ID so you can work with it through the rest of your project
7
Publish the Flow to Make it Live
- Click go live to deploy the flow
8
Save the flow against your project
- Head back to your project and save the new flow against it
- Wait for the changes to apply, then keep configuring
9
Open settings and set which pages are public
- Go to Settings, then Security
- Make your login page public and set the rest of the pages to private
10
Configure the custom login
- Set the authentication method to Custom Login Page
- Under 2FA configuration, set the page and component to your EmailPage, the login flow to the one you just made live, and the email field to Business email
- Turn on OTP if you want a one-time password, or leave it off
- Set the first page after login to where people should land, here it is CompanyPage, then click Save
11
Preview and test the login
- Preview the app, enter your email, and click continue
- You land on the page you set as the redirect, which means the login works
Back to top