Page reloads and loses data

Developers JavaScript
1

Bug Report

When the II login time expires, my app page reloads and data entered by the user is lost. Why?

Note that this does not happen when the user clicks my button Logout that logs him out of II.

2

Are you using @dfinity/auth-client?

When the user is idle for more than the timeout time, the library logs out and automatically reloads the page. You can view the reference code that handles this here.

In contrast, the logout function only removes the authentication and does not automatically reload the page. You can view the reference code for the logout function here. You will see that by default, it uses window.history.pushState which does not make a new HTTP call / does not call a new web page.

3

This is a bug. The default behavior should not lead to users losing data.

I am now aware how to change the behavior, but again, making this default is a bug.

4

What data is the user losing?

5

A blog post that he/she typed in a textarea and was going to publish but had a coffee break, for instance.

6

How are you auto-saving the blog post?

7

You misunderstood: The bug appears when the app author does not autosave blog post. The user types a text, wents to drink coffee, and when he return non-auto-saved blog post is gone, to his frustration.

If you require an app’s author to autosave user’s work, when the author didn’t anticipate that he/she needs to, you are laying a vulnerability of your code to the author. Your code should not prompt app author to do buggy things. If it does, it is an API design bug.

8

Ah, got it. You can manage the idle settings by passing in an idleOptions parameter to replace reloading the page with any custom function that you want to call.

Check out the Idle Management section in the docs.

9 
import { AuthClient } from '@dfinity/auth-client';

export const createAuthClient = (): Promise<AuthClient> =>
	AuthClient.create({
		idleOptions: {
			disableIdle: true,
			disableDefaultIdleCallback: true
		}
	});
1 Like
10

But how to logout on idle, but not reload the page?

I guess that:

disableIdle: false,
disableDefaultIdleCallback: true,

What is the missing option for logout?

1 Like
11

Yes this is correct. Is there a specific goal that you are trying to accomplish with the frontend?

12

The frontend should post a message to my social media.

The question still remains:

What is the missing option for logout?

If I just set

disableIdle: false,
disableDefaultIdleCallback: true,

then it does not autologout after 10 min at all, what is not what I tried to accomplish.

13

Here’s a parameter for the same: onIdle(){}, which allows you to detect when the user is idle using the
method in onidle() instead of the original logout method

  idleOptions: {
       onIdle() {},
      },