How to create a login flow with Umbraco 16 and Vue 4?

Questions
1

Hi all,

For a client we’re using Vue 3 and Umbraco 13 at the moment. We have started development when Umbraco 13 was just released and we created login functionality using Vue 3 and Umbraco 13.

At the moment we’re using a login flow where a customer clicks on the login button, which redirects the user to a custom login page we’ve created on our Umbraco domain. Whenever the customer has successfully logged in, the customer can use protected content and start / continue their journey. The flow at the moment is not only unideal, because of the constant redirect to different domains, but it also is not stable and prone to errors.

We’re looking for a way to use the same login functionality, but without the custom login page that requires a redirects to the Umbraco domain. The client is not mature enough to use external login providers for now, so we’re looking to use the authentication/authorization flow from Umbraco in a custom way (ideally with using only Vue as the functionality layer and just using Umbraco to fetch data and execute the authentication and authorization).

Is there anyone who has experience with this and can help me with some simple examples to get us on the right track? Ideally we want to use Umbraco 16 soon, but the client has not agreed on the upgrade yet.

Thanks in advance!

2

Anyone able to help or give us some guidance?

3

It sounds better suited to some kind of OAuth solution.

If this is a trivial bit of protection then maybe if you want to keep it with Umbraco could you build an API endpoint in Umbraco to validate the user (passing the username and password) and returning a time limited token.

Use that token for subsequent requests for data from Umbraco if there is member data / Umbraco data that requires a login.

The token could be a hash of the user’s email address, a yyyy-mm-dd-hh time stamp and a salt - if the stamp is greater than an hour or two you deny it?

Wouldn’t be perfect (if the token is obtained it could be misused etc) and completely depends on how sensitive the data you’re dealing with is but that might be “good enough”.

Steve

1 Like