Building Real-World Web Applications with Vue.js 3 by Joran Quinten

Author:Joran Quinten
Language: eng
Format: epub
Publisher: Packt Publishing Pvt. Ltd.
Published: 2023-12-15T00:00:00+00:00

User store

We will want to have access and the ability to update the status of the user at all times, so we’ll set up a user store in Pinia that will keep track of the current state and provide actions on updating the state and logging in and out.

We’ll go over the contents of the store, after creating a user.ts file in the src/store folder with the following contents: https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/blob/main/06.fitness/.notes/6.1-user.ts.

In the session (line 11), we’ll store the authentication state of the user. It can either be null for not logged in or the state can hold an object (as defined in the UserSession interface), which gets populated by the Supabase authorization service.

With the login (lines 13-20) and logout (lines 22-30) methods, we are calling the Supabase authentication services and executing a provided callback function. We will see these in action shortly!

To store the user, we have the insertProfile function (lines 32-44), which upserts any authenticated user to our database for future reference.

Note

Storing personal data may be subject to local law and governance. Be very diligent and transparent in what you store, why you’re storing it, and how you remove personal data.

setUserSession (lines 47-49) simply passes the data to the state for further reference. Lastly, userIsLoggedIn (lines 51-58) checks whether the current session data is still valid, and if not, it returns false. We can use this for quick assessments on displaying user interface elements.

Having the store in place, we can incorporate profiles in our app with some sensible safety measures.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.