1. Architecture and authorization

Set up a custom DNS for local development

If you decide to use custom authorization, you must set up a custom DNS for local development before creating a Marketplace app.

This is required to avoid seeing the Auth0 user consent dialog on localhost during development. Auth0 displays the consent dialog the first time the Marketplace app loads. If you load the app on localhost during development, you'll see the consent dialog. Then, if you give consent there, the Marketplace app user will not see the dialog in production. This is problematic because you need to ensure that the Marketplace app user sees the dialog. By setting up a custom DNS, you skip seeing the consent dialog during development, ensuring that the Marketplace app user will see it in production.

To set up a custom DNS on Windows:

  1. Open Windows PowerShell with administrator privileges.

  2. Enter the command to open your Windows hosts file in your code editor:

    # Open in Visual Studio Code:
code C:\Windows\System32\drivers\etc\hosts

# Open in Cursor:
cursor C:\Windows\System32\drivers\etc\hosts

  3. In your code editor, in the hosts file, specify your custom DNS on a new line, and then save your changes:

    127.0.0.1 myapp.local

    This creates a custom DNS at https://myapp.local:3000. Your app will run on this address.

After setting up a custom DNS, you can create a Marketplace app.

When creating a custom Marketplace app, you use the custom DNS in the following steps:

  • App configuration - set the custom DNS as the Deployment URL.

  • Creating client credentials - add the custom DNS to the Authorization URLs.

  • Scaffolding an app using the Marketplace SDK - set the custom DNS as the NEXT_PUBLIC_APP_BASE_URL environment variable.

    In addition, in package.json, update scripts.dev to include the following flags:

    --experimental-https --hostname myapp.local
If you have suggestions for improving this article, let us know!