I am currently working on a project where we are trying to implement our own login and sign up system which uses the PKCE flow. The tools we are using are react typescript and node js with an express server, all running on localhost. The flow works, but the problem is that to login and get the authorisation code through the /authorize endpoint you have to go through the auth0 login page. I know that you can change the HTML in the dashboard for the login but this would not be ideal for our current situation. We would like to implement our own UI with react, which was possible for us using the auth0.js SDK but since this uses the implicit flow its not what we want to use. So my questions are:
Is there a way to implement the PKCE flow and use our own custom login pages created in React?
Is there an endpoint I can reach in the authentication API from my application where I can send the login credentials and code challenge, to then get back the authorisation code?
What other alternatives to this exist in the case that you cant implement your own custom UI for login if I want to achieve something similar to the PKCE flow? Or is my only option to change the login page by using custom HTML in the dashboard?
At this time, there isn’t a documented way of creating a custom embedded login page with React and implementing the PKCE flow, although it may be possible by reverse engineering some endpoints. edit: don’t do this
We recommend using universal login to customize the login pages and work with the PKCE flow. Is there something that you can’t do with the UL page that requires a custom UI?
The main requirement is not to use embedded login, it would be preferred to use your service instead. However, the way it is set up, we cant customize the login page the way we want. As I have understood, you can use the templates to adjust the login page which is fine, however we would also like to change the login widget itself beyond which auth0 allows us to do. This is the main issue we want to fix and would be ideal for us. Currently I am using the old lock widget since we can customize that one with html and css, but as per your recommendations this does not feel like the most ideal solution to use since we miss out on the updates from auth0.
The classic universal login page (and custom login page) can be accessed from your app via the PKCE flow, that shouldn’t be an issue.
Is this the section you are referencing on updates?
Responsibility for updates
Once the customization toggle is flipped on, that page can no longer be automatically updated by Auth0, so you become responsible for updates and maintenance of the page. This includes updating the version numbers for any included Auth0 SDK or widget.
Also, exercise caution regarding the use of third-party JavaScript on your Login page. Because sensitive security-related information often flows through this page, introducing cross-site scripting (XSS) vulnerabilities is of particular concern.
If you enable customization to inspect the Login page code, and then decide not to customize it, make sure you disable the Customize Login Page toggle, so Auth0 will render the default pages.
The issue is not accessing the login page, its how much we cant customize it. Since the only way we can achieve the design we want for the login page is through custom html and css on the widget itself, which is only available through the old login and not the new universal login page.
Yes, that is the section I am referring to regarding updates.
Apologies for the confusion, it’s just that your original post expresses very different requirements from what you just described; your own UI using React and the Authentication API (this would essentially be an embedded solution) vs. no maintenance and New Universal Login.
It sounds like you would actually prefer to use New Universal Login, but it doesn’t cover your exact design use case.
If you have feedback you can always submit it here: Feature Request. If you chose to submit a request, please be specific about what you are looking for. Screenshots, etc are very helpful.
I apologise as well, I did not come across with my point clear enough. Our main goal is to make sure that our custom UI is able to be put into the auth0 login. It would be ideal for us to have everything regarding login be hosted through your services since it makes it more secure and accessible for us.
What I want to ask now is regarding customization of the auth0 login page. Currently we are editing the html and css (not just the simple branding which allows for editing colors and inserting logos) if the login page. Is there any issues that could come up from using this? As mentioned earlier this is not the best with inserting our own html and not getting constant updates.
You will need to maintain this code as you would any serverless application. You are responsible for the code that is hosted with Auth0. If you are using Lock, then you can look here for what to expect in terms of releases and changes to the SDK.
