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.
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
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
true in the console where the development server is running:
- on Windows (Powershell)
$env:HTTPS = "true"
- on Windows (CMD)
- on Mac/Linus
Now navigate to
https://local.auth:3000. The browser will show an error page.
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.
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.
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.
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.
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