Apps – Advanced

Here is the step-by-step written guide designed for your online academy lesson to accompany the “Secure Web Apps with Custom Login and Session Tracking” video.

Lesson: Securing Web Apps with Custom Login & Salesforce Session Tracking

Leaving database entry forms completely public to anyone with a URL record ID introduces significant data vulnerability. To build production-ready software, you must lock down sensitive client data. In this lesson, you will learn how to transition an open application layout into a secure multi-page project featuring an automated Salesforce Email Authentication Flow, custom project security access, and Session-State Data Retrieval.

Moving Beyond URL Parameter Lookups

Instead of loading records blindly via open browser link IDs, a secure architecture isolates private views entirely. By prompting a two-page layout workspace, Noca AI validates visitor identities against existing Salesforce CRM Contact records, blocks unauthorized traffic, and securely stores identity credentials locally inside a secure user data session block.

Step 1: Prompt a Multi-Page Layout Structure

To pivot to a secure architecture, we will build a fresh project context that natively handles structural page routing:

  1. Navigate to the primary prompt builder interface dashboard workspace.

  2. Enter the following plain language prompt:

    “Create a simple two-page project. Page one: simple login form with email input. Page two: account details layout.”

  3. Click the build button and let the engine compile your structural layout frame.

  4. Verify your page navigation options by clicking the Page Dropdown Menu located at the top center header toolbar to alternate editing between the Login Page and the Account Page.

Step 2: Build the Salesforce Authentication Trigger Flow

  1. Set your current active screen preview view to the Login Page.

  2. Open the Events configuration side panel using the header button.

  3. Locate your submission element row (On Click “Continue to Account”) and click the Plus (+) icon to launch a fresh logic flow window.

  4. Add a follow-up node: Select Salesforce $\rightarrow$ Read from an object $\rightarrow$ set Object value to Contact.

  5. Establish a matching verification query rule under the Condition setting area: If my Salesforce Contact Email is Equal to...

  6. Open your left-hand Data Kit explorer, click down through App Fields $\rightarrow$ Login Page Inputs, and drag the Email Address parameter token into the target block.

Step 3: Branch Validation Logic Using API Response Packages

  1. Directly following your Salesforce query block, click the Plus (+) icon and choose Logic $\rightarrow$ Condition.

  2. Build the structural check validation check: Toggle the target query down to the Salesforce Read system data variables tree and select the Has Results attribute token. Set the conditional matching logic target to: If Has Results is Equal to True.

  3. Off the successful true routing branch node pathway, click Plus (+) and select the API Response module. (This permits passing payload matrices smoothly between the backend check framework and frontend layout frameworks).

  4. Set the API Response Data Type format setting properties to JSON.

  5. Map validation reference tokens out of your CRM object into the JSON payload body tree map:

    • Map Contact ID $\rightarrow$ set output property label tag as contactID

    • Map Email $\rightarrow$ set output property label tag as email

  6. Click the top-right toolbar toggle control switch to put the flow Live, then close the logic interface screen frame and click Save Changes in the builder panel.

Step 4: Configure Project-Level Route Guards

  1. Navigate your cursor over to the global navigation workspace menu bar area and open the Settings $\rightarrow$ Security tab settings window.

  2. Review the public status layout matrix lists across your structural layout views:

    • Keep the baseline Login Page configuration setting visibility set to Public (permitting anyone to reach the landing access prompt).

    • Toggle the sensitive Account Page visibility setting from Public over to Private.

  3. A security wizard configuration sub-panel framework will pop open asking for authentication details. Complete the form setup inputs:

    • Authentication Method: Select Custom Login Page.

    • Page Selection Target: Login Page.

    • Target Interactive Component: Login Page Component.

    • Interactive Trigger Target Row: On Click Continue to Account.

    • Validated Input Tracking: Email Address Field.

    • First Destination Page Routing Sequence: Account Page.

    • (Optional) One-Time Password: Toggle the Enable OTP verification checkmark control switch to require active email validation codes.

  4. Click the confirmation Save button. Noca AI will rewrite your operational page router layout properties.

Step 5: Update Account View Data Lookups to Reference Session State Variables

Rather than relying on old, unsecure URL strings (?id=...), we can now use the credentials validated during Step 3:

  1. Use the top toolbar dropdown page selection manager tool to switch your primary preview screen layout over to the Account Page.

  2. Open the Events workspace panel side window, look down to the page setup lifecycle area, and create a new On Load flow trigger sequence.

  3. Select Salesforce $\rightarrow$ Read from an object $\rightarrow$ set target to Contact.

  4. Move down into your Condition settings region window: Set the evaluation sequence filter logic criteria to If my Contact ID is Equal to...

  5. Open your left-side Data Kit tool directory block. Notice that a brand-new storage object parameter container node called Session has generated.

  6. Expand Session to find the variables passed back from your secure JSON validation flow step. Drag the contactID token directly into your value box workspace.

  7. Append a standard layout Component Mapping block node directly downstream to push those matched attributes cleanly into the text labels and form slots on the page layout. Set the node status to Live and save your build canvas changes.

Step 6: Verify User Authentication Protections

  1. Launch the Preview App runtime interface tool option.

  2. Enter an unverified dummy placeholder profile address string that absolutely does not exist anywhere within your live CRM system (e.g., fraudulent-user@test.com) and click the submission button.

  3. Verify that the routing engine immediately rejects validation access, flags a safety message, and completely blocks access to your dashboard fields.

  4. Reset your text parameters, type in a valid profile address that matches a live Salesforce record entry, and click continue.

  5. Watch the login validator confirm your credentials, initialize a dynamic user session data profile, route you cleanly through to the protected Account layout view, and securely populate every input form target using secure session variables!