Call to AuthClient.create() does nothing but reload the page without any error message

Developers Getting Started
1

Hi everyone,

I followed the Internet Identity integration guide and went into a situation where clicking the Login button will just reload the current page, without displaying any error/warning message.

I followed all steps and was able to debug in Chrome. I put breakpoints on the AuthClient.create() and on the authClient.login() calls. I can see the first breakpoint is reached, then the second breakpoint isn’t reach, since the page seems to be reloaded immediately after AuthClient.create() is called.

image
image1550×1074 219 KB

Note that I tested both the locally deployed frontend, and the development frontend served by vite and I have the same behavior (reload of current page).

Since there is no feedback about what went wrong, it’s difficult to understand the cause of the problem. Could someone help me on this?

Thanks in advance.

2

The reload is due to the page idling. The default behavior is to (too aggressively) end the session by clearing local storage and reloading the page.

You can disable this behavior by setting

authClient.create({
  idleOptions: {
    disableIdle: true
  }
})

or

authClient.create({
  idleOptions: {
    disableDefaultIdleCallback: true
  }
})

or

authClient.create({
  idleOptions: {
    onIdle: yourCustomIdleHandler
  }
})

I’ve also designed a replacement feature for the reload behavior which will still end the session, and we’re intentionally keeping the aggressive session management as a default because people use the AuthClient to manage tokens and other consequential resources, and leaving a computer unlocked and idle is a common attack vector that we want to help developers prevent against.

I offer you my personal apologies for the confusing behavior.

See: https://agent-js.icp.xyz/auth-client/interfaces/IdleOptions.html

2 Likes
3

Thank you @kpeacock for your answer. No worries.

Yesterday I was able to go further by adding a call to preventDefault() before creating the AuthClient instance:

addEventListener("click", async (e) => {
    e.preventDefault();

    // When the user clicks, we start the login process.
    // First we have to create and AuthClient.
    const authClient = await AuthClient.create();

...

This allowed me to fix other parts of the code provided in the guide, to finally have the II login page displayed.

Later I saw that this preventDefault() call is also present in the github repo code for this guide. It prevents the reload caused by the form in which the button is.

Sorry I didn’t have the time to update my forum post before your answer.

I just tried to remove the preventDefault() call and added your suggested idleOptions at the AuthClient creation, but this produced the page reload behavior. So in my case the reload was due to the form submission I guess.

4

Now I can see the local II canister doesn’t work as expected and traps every time I start the login flow.

For context, I used the 6 digits PIN for the identity I created, and each time I try to login, I’m prompted to add a device:

image
image804×806 80.6 KB

When I click on “Add device” I have this stack:

Uncaught (in promise) Error: Call was rejected:
Request ID: 448ebb7beaa78f978de9d0db9efbb499a370c62e58e15b18c241da9c4d849cc2
Reject code: 5
Reject text: Error from Canister bkyz2-fmaaa-aaaaa-qaaaq-cai: Canister trapped explicitly: 535yc-uxytb-gfk7h-tny7p-vjkoe-i4krp-3qmcl-uqfgr-cpgej-yqtjq-rqe could not be authenticated.

at Md (spa.js:40:969)
at async i (spa.js:47:4381)
at async Gi.enterDeviceRegistrationMode (spa.js:922:9992)
at async Promise.all (:4943/index 0)
at async nr (spa.js:361:180)
at async K (index.js:151:1911)
at async ye (index.js:151:6439)
at async Q (index.js:539:193)

And when I click on “Remind me late” I have this one:

Error: Call was rejected:
Request ID: 62328bdcdddd993322243b4355a9ed0dc0de35a069637e7755e51adcd0c805e9
Reject code: 5
Reject text: Error from Canister bkyz2-fmaaa-aaaaa-qaaaq-cai: Canister trapped explicitly: 535yc-uxytb-gfk7h-tny7p-vjkoe-i4krp-3qmcl-uqfgr-cpgej-yqtjq-rqe could not be authenticated.

at Md (spa.js:40:969)
at async i (spa.js:47:4381)
at async Gi.prepareDelegation (spa.js:922:11345)
at async J2 (spa.js:1405:18900)
at async Promise.all (:4943/index 0)
at async nr (spa.js:361:180)
at async Kt (index.js:191:525)
at async Lt (index.js:151:7231)
at async Ft (index.js:191:1093)