All questions

When do I call identify and anonymize in a Vue app with Pinia auth?

Asked by kenji_dev on

Kkenji_dev

I keep login state in a Pinia store with the usual login and logout actions, and I want to hook identity in the right place so a user carries their profile after login and gets cleared on logout.

Concretely, which store action does each SDK call belong in, and what value does identify actually expect? I want to pass the right thing the first time rather than discover it at runtime.

Was this helpful?

2 answers

PNPriya Nair

Map it straight onto the two actions you already have. In the login action, once you know who the user is, call croct.identify('<userId>'). In the logout action, call croct.anonymize(). That is the whole hook.

// in your auth storeasync function login(credentials) {    const user = await api.login(credentials);    croct.identify(user.id);}
function logout() {    api.logout();    croct.anonymize();}

The nice part is identity resolution links the anonymous profile to the identified one, so the activity from before they logged in is not lost, it carries over to the identified profile.

Was this helpful?
Llucas_ts

One gotcha to save you a debugging session: identify takes a string user id and only a string. If you pass a number straight from your database (a bigint or an integer primary key) you get an "Invalid user id" error. Coerce it with String(user.id) before the call.

Also worth noting so you do not trip on it later: the userId and token init options are mutually exclusive. If you are already handing the SDK a signed token at init you should not also set userId, and vice versa. Pick one path and stick with it.

Was this helpful?
Kkenji_dev

The string thing would absolutely have bitten me, our ids are numeric. Wrapping in String and wiring both calls into the store actions now.

Still have questions?