Auth0 Single Page App SDK / Embedded login option

Good afternoon everyone. I am developing a Vue.js application and Auth0. I used this quickstart guide (https://auth0.com/docs/quickstart/spa/vuejs) for vue.js, and found it mostly quite helpful to get up and running. This guide instructs us to install the SPA SDK (npm install @auth0/auth0-spa-js).

A current challenge of mine, however, is that I haven’t found a way to offer the user an embedded login page. The quickstart, as well as the API documentation, indicate that we can use loginWithPopup and loginWithRedirect. What if I would like the user to authenticate directly within my webpage? Is there a way to accomplish this with the SPA SDK? If not, how might you direct me to implement an embedded login using Auth0?

Thanks for your help!

The SPA SDK can’t be used for it. It only supports the redirect flow.

You can follow https://auth0.com/docs/login/embedded and use Lock.js, Auth0.js or a custom UI and just calling the Auth0 Authentication API (ROPG). (Keep in mind that a SPA can’t hold a client secret.)

What’s the reason you prefer the embedded login over a redirect flow (as there are definitive some downsides to it.)

Thank you for your answer Mathias.

My reason for preferring the embedded flow is we believe that it provides a better user experience.