Course Content
Apps – Advanced
0/6
Events – Intro – AI App Builder
00:00
Events – Mapping Values – AI App Builder
00:00
Events – Pushing Values upon complete – AI App Builder
00:00
Events – Login Page – AI App Builder
00:00
Modifying the OTP page – AI App Builder
00:00
Course Exercise: Connect Your Web App to Salesforce – AI App Builder
00:00
Apps – Advanced

Securing Your App with One-Time Passwords (OTP)

A clean login page is only half the battle. Without proper authentication, anyone who knows a user’s email address can bypass boundaries and view private data. In this exercise, we will secure our application by implementing a robust One-Time Password (OTP) verification flow using Noca AI’s built-in security controls.

Follow this step-by-step guide to protect your private pages and configure an automated email verification loop.

Step 1: Identify the Security Gap

  1. Open your existing project containing the LoginPage and AccountDetailsPage.

  2. Notice that if a page is marked private but has no secondary verification (OTP) enabled, anyone entering an email address can instantly access the protected data. Let’s fix this vulnerability.

Step 2: Access Security Settings

  1. In the top-right toolbar of the Noca workspace, click on the Settings (gear) icon.

  2. From the settings modal sidebar, select the Security tab.

  3. Verify your page rules:

    • LoginPage should be set to Public.

    • AccountDetailsPage should be set to Private.

Step 3: Enable OTP Verification

  1. Locate the OTP toggle under your authentication settings and switch it to On.

  2. Click the Gear icon next to the OTP toggle to open the Configure OTP Email menu.

    • Optional: You can customize the subject line and email body here.

  3. For this exercise, leave the default email copy as-is, click Apply, and then click the green Save button in the main settings modal.

  4. Watch the workspace as Noca AI automatically generates a new secure page layout (/verify) and configures the backend routing logic.

Step 4: Inspect the New Verification Page

  1. Once the build completes, click the page dropdown in the top-left of your preview window.

  2. Select the newly created VerifyPage (/verify).

  3. Notice how Noca AI automatically styled the verification page to match your brand’s existing design language and login layouts.

Step 5: Test the Secure Login Flow

  1. Click the Preview button in the top right to launch your live preview in a new tab.

  2. On the Sign In screen, enter your email address and click Sign in to your account.

  3. You will immediately be redirected to the secure /verify page, prompting you for a passcode.

  4. Check your email inbox. You will receive an automated message from Noca containing your temporary OTP passcode.

  5. Copy the code, paste it into the One-time password input field in your preview browser, and click Verify code.

  6. Upon successful verification, the app will securely redirect you to the restricted AccountDetailsPage.

Previous
Next