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.