DEV Community

loading...
Cover image for Skipping Auth0 consent prompt for local development

Skipping Auth0 consent prompt for local development

kleeut profile image Klee Thomas Updated on ・4 min read

In this blog I mentioned that the consent prompt can be removed for users logging in. This prompt makes a lot of sense if you're providing an API that can be consumed by a third party application. For example a user allowing facebook access to their email contacts. For this case though where a user is logging into an application which wants access to a first party API the prompt makes for a jarring login experience.

Prevent Auth0 consent prompt

To prevent the consent prompt the API needs to allow it and application needs to be running on a trusted domain. A trusted domain is a domain that is configured in the Auth0 Applications Allowed Callback URLs property. The exception to this is localhost. Auth0 never allows localhost to be a trusted domain because any application could be running on localhost. The standard advice from Auth0 is to map a url to localhost in the local machines host file.

Edit the hosts file to add local.auth as a mapping to localhost. This file can be found in the following locations. More info on editing hosts file

Run the code and navigate to http://local.auth:3000.

Secure Origin required error

With previous versions of the Auth0 SDKs this solution worked out of the box to allow local development, no consent prompt without needing to use localhost explicitly. The new Auth0 SPA SDK uses the web crypto api which refuses to run on any domain that isn't https or localhost (see Auth0 SPA SDK FAQ). Dang! This means that to test the the login flow without the seeing the consent prompt the code needs to be deployed to a server running https and that's not what create-react-app does by default. Fortunately it turns out that the good people at create-react-app have thought ahead and provided a way to run the development server with https. To do this set the environment variable HTTPS to true in the console where the development server is running:

  • on Windows (Powershell) $env:HTTPS = "true"
  • on Windows (CMD) set HTTPS=true"
  • on Mac/Linus HTTPS=true then npm start.

Now navigate to https://local.auth:3000. The browser will show an error page.

Self signed cert error

Since the self signed certificate is expected accept the risk and continue to the page. The page will now render since web crypto is able to run on the https url. Click login and the login popup will display an error saying that the call back url is not allowed. To fix this update the configuration for the Application in Auth0.

The callback is not allowed error message

Configure Auth0

Update the Auth0 application config

In the Auth0 Application section find the Application matching the client_id parameter used in the React app. In that Application's settings add https://local.auth:3000 to the Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins and Allowed Origins (CORS) and save the configuration.

Application configurations updated

Make sure not to include a / at the end of the configured origin url or the login pop up will display an error with these details.
Origin now allowed error message

Update the Auth0 API config

In the Auth0 console navigate to the APIs page and find the API that matches the audience parameter being used in the React app. In that APIs settings find the Allow Skipping User Consent setting and make sure it is enabled. This will mean that this API will allow the skipping of the consent prompt for configured applications.
Allow Skipping User Consent flag enabled

Test login again

Go back to the app running on https://local.auth:3000, log out and sign up as a new user to see the experience without requiring the consent prompt.

The other option

There is another option if changing the hosts file sounds like too much work or not an option. That is to deploy the code to an available web server that is serving pages over https. There are a myriad of hosting provides that are happy to hep you set this up.

Code for this can be found on GitHub


Cover image from Unsplash

Discussion (0)

pic
Editor guide