This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories. Note: The previous design document may be incomplete, as you need to find an archived version of the challenge as all legacy challenges have had their documentation removed from DevChallenges.
I tried to translate the devchallenges design to work with auth0. I modified the custom login template code provided by Auth0. That code used bootstrap so I used that as well. src/CustomLogin.html is the code that I added to Auth0 for the custom login page. I had some issues on getting the social logins to work but you have to make sure the connection property matches the login's name property set in the Auth0 dashboard. I found it confusing to know if the custom login page persists across all your auth0 applications or if you can make custom logins per application. I think there is a dropdown to select the application but the site gives no feedback on selection.
Made it so, you see loading and then the form is fetched from auth0. Used router and conditional rendering for the routes.
Instead of the separate login and signup forms, I used a toggle to switch buttons for each purpose.
Have to have 3rd party cookies enabled otherwise you will see a auth0 error screen.
Need to look at styling for mobile and tablet versions.
- Steps to replicate a design with only HTML and CSS
- YouTube - Auth0 & React Tutorial from Dave Gray - reused Profile code
- Stack Exchange - best way to combine sign up & login
- Codepen - login / signup form with tabs
- Stack Overflow - toggle function in vanilla js
- Stack Overflow - conditional routing