I’ve downloaded and run the SampleMvcApp .Net solution containing a full web application. That all looks close to what I’m looking for. However, I’m curious to know if I can embed an email+password with Social Login options into a plain JavaScript app? I’d like to keep the login on an overlay modal within a JavaScript page and was reading about using the Universal Login, but wasn’t sure if that’s what I needed and how that would work.
I’m considering a plain JavaScript front-end with a .Net Web API back-end.
Using the Auth0 Universal Login is exactly what you need in this case, while also being the modern, recommended solution since it provides configuration options for your connections directly using the Auth0 Dashboard.
Your modal will work perfectly in conjunction with the Universal Login and the Authorization Code Flow with PKCE ( used by Auth0’s SDKs ). Here is a simple breakdown of the mechanism:
Login Request (Your JS App):
A user is on your JS app and clicks the “Login” button (which could be in your modal).
Your app (using a library like auth0-spa-js) calls the loginWithRedirect() function.
Authentication (Universal Login):
The user’s browser is redirected to your Universal Login page (e.g., https://your-tenant.auth0.com/login).
The user logs in using email/password or a social provider like Google.
Callback (Back to Your JS App):
After successful login, Universal Login redirects the user back to your JS app (to a specific URL you’ve configured, like http://localhost:3000/callback).
It includes a one-time authorization code in the URL.
Token Exchange (Your JS App):
The Auth0 JS library in your app automatically catches this redirect.
It securely exchanges that code for an Access Token and an ID Token in the background.
Calling Your API (JS App to .NET API):
Your JS app is now authenticated.
To get data from your .NET Web API, your JS app makes an HTTP request and includes the Access Token in the Authorization header.
Securing Your API (.NET Web API):
Your .NET API is configured with middleware
On every incoming request, this middleware automatically inspects the Authorization header.
It validates the Access Token to ensure it’s valid and meant for your API.
I hope this helps, and if you have other questions please let me know!
Thank you,
Remus
As for #2, if the “user’s browser is redirected to your Universal Login page”, will that take me outside the JS app? I’m wanting to initiate the login UI inside the JS app via popup/overlay without being redirected outside of it (allowing the user to perform login/signup without leaving the popup).
A redirect to the Universal Login page will indeed take the user outside your JS app. However, you can achieve your desired experience you’re describing while still using the security and features of Universal Login.
The solution is to use the popup login method provided by the Auth0 SPA SDK by calling the loginWithPopup() which used the window.open() browser popup window.
Thanks for clarifying this additional information. I did adjust the js code to utilize the loginWithPopup() as you mentioned which appears to work as expected. However, is it possible I could call out for the login object and embed that into my markup (like an iframe or similar)?
I am glad that this is working as expected for you, however you are unable to embed the Universal Login pages into an iFrame due to security reasons to prevent Clickjacking. You can read more about it here - Clickjacking Protection for Universal Login Change.
This is a specific feature of the Universal Login, so unless you are willing to switch to the Classic Login ( which is definitely not recommended in order to benefit from the security trademarks of the UL ), embedding a login page in an iframe is not suitable.