Skip to main content

1-Click Signup Example App

GitHub Repository: https://github.com/VerifiedInc/one-click-signup-example-app

About​

This app shows Verified 1-Click Signup for a fictional brand called Slooow, whose logo is a sloth! 🦥

It shows four different flows (listed under Usage). The first is a manual signup flow, and the next three are 1-Click Signup flows, each using a different integration type.

For more information about 1-Click Signup, see the Verified Docs and in particular the Integration Guide.

Purpose​

By running this app and reviewing the code for each flow, you'll better understand how to integrate 1-Click Signup into your own application.

Structure​

This app uses Next.js. If you’re new to Next.js, start by exploring the src/pages/signup directory. Here, you’ll find pages for the different flows, each designed to guide you through the process.

See the Next.js Pages and Layouts docs for more details on the routing system.

Setup​

  1. Access the Verified Dashboard.

    1. Enter your email and click the 1-Click Login button. We'll send you a verification code by email.

    2. Complete the verification step. Click the verification button in the email, or enter the verification code. We'll automatically log you in.

    3. Set "Slooow" as the company name. The fictional company for this example app is called Slooow. We'll automatically create a brand called Slooow for you and take you to its Brand Details page.

    4. Copy your Sandbox API key. You'll use this in the next step.

  2. Set up the app:

    1. Clone this repo.

    2. Set up environment variables:

      1. Rename the .env.example file to .env.
      2. Set your Sandbox API key as the value for ONE_CLICK_API_KEY. You copied this in step (1)(iv).

    3. Run npm install to install dependencies.

    4. Run npm run dev to run the development server. The app will be running at http://localhost:3061.

Usage​

You can switch between the different flows using the menu in the upper right corner.

Manual Signup (/signup/manual)​

This is a manual signup flow, without a 1-Click Signup integration. The user must manually enter all information. That's why it's slooow! ☹️

This flow mimics what a company typically has before they integrate 1-Click Signup.

1-Click Signup​

These are 1-Click Signup flows, using different integration types. The user can sign up in less than 10 seconds, with a single click! That's why it's Slooow, but not slooow! 😁

important

For a 1-Click Signup flow that uses a particular integration type to work, your brand's integration type setting must be set to the correct integration type in the Dashboard.

The basic steps of a 1-Click Signup flow are:

  1. User enters phone number
  2. User enters verification code (which they receive by SMS)
  3. User confirms data autofilled by 1-Click Signup

For simplicity, this example app does not send SMS. Instead, it displays the verification code in the lower right corner (and logs it in the browser console), so you can easily enter it.

In a real integration of 1-Click Signup that uses the Verified Production environment, the app must actually send SMS, to ensure the user verifies their phone number before Verified returns any of their data. This example app only uses the Verified Sandbox environment, which returns only mock data, so it doesn't need to send SMS.

caution

This example app only displays verification codes on the page (and logs it in the browser console) for ease of development use. In a real integration, you should never handle verification codes (or any sensitive data) in this way.

Non-Hosted (/signup/1-click/non-hosted)​

important

For this flow to work, your brand's integration type setting must be set to Non-Hosted in the Dashboard.

With the Non-Hosted integration type, you use your own UI, and you use your own verification code to verify users' phone numbers. The app (rather than Verified) handles all of this functionality.

After the app has collected and verified a user's phone number, it calls the Verified API for 1-Click Signup. See the Non-Hosted Integration Guide for details.

Semi-Hosted (/signup/1-click/semi-hosted)​

important

For this flow to work, your brand's integration type setting must be set to Semi-Hosted in the Dashboard.

With the Semi-Hosted integration type, you use your own UI, but you use Verified's verification code to verify users' phone numbers. The app (rather than Verified) handles the UI, but Verified creates a verification code and checks user input against it.

After the app has collected a user's phone number, it calls the Verified API to start a 1-Click Signup flow. See the Semi-Hosted Integration Guide for details.

Hosted (/signup/1-click/hosted)​

important

For this flow to work, your brand's integration type setting must be set to Hosted in the Dashboard.

tip

You should also set the Slooow brand's logo setting as the image below and color setting as #D32D2D. This will configure the branding on the Verified hosted page.

Slooow logo

With the Hosted integration type, you use Verified's UI, and you use Verified's verification code to verify user phone numbers. Verified (rather than the app) handles this functionality.

After the app has collected a user's phone number, it calls the Verified API to start a 1-Click Signup flow and redirects the user to a Verified hosted page. See the Hosted Integration Guide for details.

Once the user completes 1-Click Signup on the Verified hosted page, that page redirects them to a URL defined by your brand's default redirect URL setting in the Dashboard. Using http://localhost:3061 won’t work due to security restrictions, so you should use a tunneling service like ngrok or Localtunnel to create a secure, publicly accessible URL.

For example, with Localtunnel, you can install it globally (npm install -g localtunnel) and run it (lt --port 3061), and it will generate a URL. Set this URL as the default redirect URL for your brand in the Dashboard, and save your brand's settings.