Inuani
November 3, 2023, 10:49pm
1
Hey, I am trying to implement stores instead of global variable for the authentification
it is an error but that I don’t get all the time, somethimes I reload the page and it works. the problem is that the call to be the backend is done before authentifaction is fully established, I guess because it is a signature error.
My logic is that in my main layout.ts I check is the user is authenicated with this function:
function update_dS_State() {
const identity = authClient?.getIdentity();
const principal = identity?.getPrincipal();
dS.update((value) => ({
...value,
identity: identity,
principal: principal,
backend: createActor(backendCanisterId, { agentOptions: { host, identity } })
}));
}
export async function syncAuth() {
authClient = await AuthClient.create({
idleOptions: {
idleTimeout: 1000 * 60 * 60 * 24 * 30,
disableDefaultIdleCallback: true
}
});
if (await authClient.isAuthenticated()) {
update_dS_State();
}
}
Then there is this: function to gather the users (denizens)
let denizens:any = [];
const fetchDenizens = async () => {
if ($dS.backend) {
try {
denizens = await $dS.backend.get_all_denizens();
console.log('Fetched denizens:', denizens);
} catch (error) {
console.error('Error fetching denizens:', error);
}
}
};
$: if ($dS.backend) {
fetchDenizens();
}
and this is how my dS store is declared:
export const dS = writable<Session>({
backend: null,
principal: null,
denizen: null,
identity: null
});
I am almost sure the error is because I am not handling stores properly …
It’s a bit hard to tell without reading the all code. Is your project open source?
Alternatively, here is what I generally do:
I create a store that contains signIn, signOut and sync
https://github.com/junobuild/juno/blob/main/src/frontend/src/lib/stores/auth.store.ts
In the root +layout.svelte I implement an init function that calls the above store sync feature and when ready renders the app with a slot
<script>
const init = async () => await authStore.sync()
</script>
{#await init()}
<!-- here a spinner of animation -->
{:then _}
<slot />
{/await}
https://github.com/junobuild/juno/blob/ce18c9b7d06492aa9e79852bfdee16ec6a978980/src/frontend/src/routes/%2Blayout.svelte#L65
From there, I know the authentication store is initialized everywhere in the app and I can safely query $authStore.identity to get to know the status of the identity.
2 Likes
Inuani
November 4, 2023, 12:09pm
3
I tried to add the logic you mentionned in the +layout.svelte,
I pushed the test to a repo:
I am stuying and some part in my test are inspired of what you do in your repos.
Thanks,
Elie
I cannot install your repo so hard to tell.
❯ npm i@nfid /embed@0.10.0-alpha.1@nfid /embed@0.10.0-alpha.1@nfid /embed@nfid /embed@“^0.10.0-alpha.1” from the root project@peculiar /webcrypto)@nfid /embed@0.10.0-alpha.1@nfid /embed@nfid /embed@“^0.10.0-alpha.1” from the root project@nfid /embed@0.10.0-alpha.1@nfid /embed@nfid /embed@“^0.10.0-alpha.1” from the root project
npm ERR! A complete log of this run can be found in:
I would suggest to remove code and then add it brick by brick until you figure out what’s the issue.
I would begin by removing the +layout.ts.
I would also try to call syncAuth() only once for the all app otherwise you might face a race condition.
Hope that helps.
Ah I managed to instal the dependency, I had to delete your package-lock.json which seems not portable.
I finally managed to boot your app locally but, cannot reproduce your issue
1 Like
Side note, though unrelated to the issue at hand, in my opinion, your following store structure raises a bad practice. I would advise against using a store that separates a principal and an identity into two distinct fields. This separation has the potential to cause desynchronization and result in invalid data. To some extent, it can lead to situations where a principal is not correctly associated with its corresponding identity while it is suppose to reflect the single authentication of the user.
export const dS = writable<Session>({
backend: null,
principal: null,
denizen: null,
identity: null
});
Instead I would suggest to hold only the identity and if you need an easy way to access the principal, use a derived store.
Just as side note if interesting.
1 Like
Inuani
November 4, 2023, 9:59pm
8
Ok thanks for trying, as I said it is not happening all the time, have you try to refresh several time ?
Thanks again for support,
Elie
I did, I tried to refresh the browser window several time but, the error did not showed
1 Like
