How to automatically log out of user's browser after a long period of inactivity or after specific time

[cha2hyun]

Issue

The problem is browsers keep login session until user press 'logout' button. (when user close the browser and reopen browser, it still remember user's session)

So i'd like to add Auto login on this PC button on login pages and send its state to [...nextauth].js as props for keep or not keep user's session on browsers when user get logged in.

+) Can't be able to access backend code. I have to figure out this on Front (Next.js)

Question

I'd like to know the best way for automatically log out of user's browser after a long period of inactivity or after specific time when user dosen't clicked Auto login on this PC button

Any help ? 🙏 (Simmilar issue #776)

Some ideas

1. Save user's choice of Save login session on this PC and login-time on LocalStorage when user press login button.
2. Check user's choice on LocalStorage and change KeepAlive options on [...nextauth].js
3. Every time when user reopen browser, check login-time from Localstorage and do some function for keep login of logout immediately using useEffect
4. Using LocalStorage to save states of user's mouse event or scroll event or key event has been occur to know user is activate or not. if not, browser will logout automatically using useEffect

Screenshot

Code

[...nextauth].js

/* eslint-disable */
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { getAccessToken, getUserInformationByToken } from '@/pages/api/index';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      async authorize(credentials, req) {
        // get JWT token 
        const accessToken = await getAccessToken(credentials).then(function (
          response
        ) {
          return response;
        });
        console.log('\n token : ', accessToken);

        // get user info from token
        const userInfo = await getUserInformationByToken(accessToken).then(
          function (response) {
            return response;
          }
        );

        // return user information 
        if (userInfo) {
          userInfo['accessToken'] = accessToken;
          return userInfo;
        } else {
          throw new Error('Incorrect Credentials');
          // return null;
        }
      },
    }),
  ],

  callbacks: {
    jwt: async ({ token, user }) => {
      user && (token.user = user);
      return token;
    },
    session: async ({ session, token }) => {
      // maxAge: 5;
      session.user = token.user;
      return session;
    },
  },
  pages: {
    signIn: '/auth/login',
  },
  secret: process.env.SECRET,
});

[kn327]

Usually, this is outside the scope of something like this tool as it requires adding multiple event listeners...

What I would recommend doing is building a wrapper around your app, like when you do theming or user contexts which manages this for you

The below is untested, but could help you getting in the right direction:

import { signOut, useSession } from "next-auth/react";
import { useEffect, useState } from "react";

export interface AutoLogoutProviderProps {
    timeoutMs?: number;
    timeoutCheckMs?: number;
    debug?: boolean;
    requireSession?: boolean;
}

type WindowActivityEvent = keyof WindowEventMap;

export function AutoLogoutProvider({
    timeoutMs,
    timeoutCheckMs = 1000,
    debug = false,
    requireSession = false,
    children
}: React.PropsWithChildren<AutoLogoutProviderProps>) {
    const [ lastActivity, setLastActivity ] = useState<number>(initLastActivity());
    const { data: session, status } = useSession({ required: requireSession });

    const _storageKey = "_lastActivity";

    function storage() {
        return global.window !== undefined ? window.localStorage : null;
    }

    function initLastActivity() {
        const now = activity();

        const lastActivityStr = storage()?.getItem(_storageKey);

        const lastActivity = parseLastActivityString(lastActivityStr);

        return lastActivity == null ? now : lastActivity;
    }

    function parseLastActivityString(activityStr: string) {
        const lastActivity = +activityStr;

        const now = activity();


        if (lastActivity == null ||
            lastActivity > now ||
            lastActivity <= 0 ||
            isNaN(lastActivity)) {
            // note: some of these conditions could actually mean
            // someone is trying to tamper with your activity timer
            // use with caution
            return null;
        }

        return lastActivity;

    }

    function activity() {
        return new Date().getTime();
    }
    function onUserActivity() {
        const now = activity();

        if (debug)
            console.log("activity - resetting last activity to ", now);
        storage().setItem(_storageKey, now.toString());
        setLastActivity(now);
    }

    function onStorage({ key, storageArea, newValue }: StorageEvent) {
        if (key === _storageKey && storageArea === storage()) {
            // some debugging lines
            if (debug)
                console.log("remote tab activity - resetting last activity to ", newValue);
            const lastActivity = parseLastActivityString(newValue);

            if (lastActivity !== null) {
                setLastActivity(lastActivity);
            }
        }
    }

    function onTimerElapsed() {
        // just fire the isUserInactive check
        isUserInactive();
    }

    function isUserInactive() {
        const now = activity();

        // maybe verify that they are authenticated?
        if (status === "authenticated") {
            const expiry = new Date(session.expires).getTime();

            if (now > expiry) {
                if (debug) {
                    console.error("user has expired", expiry, now);
                }
                signOut();
                return true;
            }
        }

        if (lastActivity + timeoutMs < now) {
            if (debug)
                console.error("user inactive", lastActivity, now);
            signOut();
            return true;
        }
        return false;
    }

    useEffect(() => {
        // session is still loading
        if (status === "loading") {
            return;
        }

        if (status === "unauthenticated") {
            // maybe you want to do something more here..
            return;
        }

        // no timer has been initialized
        if (timeoutMs == null) {
            return;
        }

        // if user is already inactive, do not init
        if (isUserInactive())
        {
            return;
        }
        // on mount we will listen to several possible "interactive"
        // events
        const windowEvents: WindowActivityEvent[] = [
            "focus",
            "scroll",
            "click"
        ];

        windowEvents.forEach(eventName => {
            window.addEventListener(eventName, onUserActivity, false);
        });

        // we will use localStorage to determine activity
        window.addEventListener("storage", onStorage, false);

        // initialize an interval to check activity
        const intervalId = window.setInterval(onTimerElapsed, timeoutCheckMs);

        return () => {
            // detach and destroy listeners on deconstructor
            windowEvents.forEach(eventName => {
                window.removeEventListener(eventName, onUserActivity, false);
            });

            window.removeEventListener("storage", onStorage, false);

            // clear the interval
            window.clearInterval(intervalId);
        }
    }, [ lastActivity, status ]);

    return <>{children}</>

}

[cha2hyun]

Thanks for help. 🔥

[angelitolm]

Thanks for the solution @kn327, in my case I had to modify a couple of things, but it worked perfectly

'use client';
import {signOut, useSession} from "next-auth/react";
import {PropsWithChildren, useCallback, useEffect, useState} from "react";

export interface AutoLogoutProviderProps {
     timeoutMs?: number;
     timeoutCheckMs?: number;
     debug?: boolean;
     requireSession?: boolean;
}

type WindowActivityEvent = keyof WindowEventMap;

export function AutoLogoutProvider({
   timeoutMs = +(process.env.NEXT_PUBLIC_TIME_OUT_MS || 600000), // Inactivity time
   timeoutCheckMs = +(process.env.NEXT_PUBLIC_TIME_OUT_CHECK_MS || 10000), // Time out to check
   debug = false,
   requireSession = false,
   children
}: PropsWithChildren) {
    const [lastActivity, setLastActivity] = useState(new Date().getTime());
    const {data: session, status} = useSession({required: requireSession});

    const _storageKey = "_lastActivity";

    function storage() {
        return global.window !== undefined ? window.localStorage : null;
    }

    const parseLastActivityString = useCallback((activityStr?: string | null) => {
        if (!activityStr) return null;

        const lastActivity = +activityStr;

        const now = activity();


        if (lastActivity == null ||
            lastActivity > now ||
            lastActivity <= 0 ||
            isNaN(lastActivity)) {
            // note: some of these conditions could actually mean
            // someone is trying to tamper with your activity timer
            // use with caution
            return null;
        }

        return lastActivity;
    }, []);

    const initLastActivity = useCallback(() => {
        const now = activity();

        const lastActivityStr = storage()?.getItem(_storageKey);

        const lastActivity = parseLastActivityString(lastActivityStr);

        return lastActivity == null ? now : lastActivity;
    }, [parseLastActivityString]);

    useEffect(() => {
        if (!lastActivity)
            setLastActivity(initLastActivity());
    }, [initLastActivity, lastActivity]);

    function activity() {
        return new Date().getTime();
    }

    const onUserActivity = useCallback(() => {
        const now = activity();

        if (debug)
            console.log("activity - resetting last activity to ", now);
        storage()?.setItem(_storageKey, now.toString());
        setLastActivity(now);
    }, [debug]);

    const onStorage = useCallback(({key, storageArea, newValue}: StorageEvent) => {
        if (key === _storageKey && storageArea === storage()) {
            // some debugging lines
            if (debug)
                console.log("remote tab activity - resetting last activity to ", newValue);
            const lastActivity = parseLastActivityString(newValue);

            if (lastActivity !== null) {
                setLastActivity(lastActivity);
            }
        }
    }, [debug, parseLastActivityString]);

    const isUserInactive = useCallback(() => {
        const now = activity();

        // maybe verify that they are authenticated?
        if (status === 'authenticated') {
            const expiry = new Date(session?.expires).getTime();

            if (now > expiry) {
                if (debug) {
                    console.error('User has expired======', expiry, now);
                }

                signOut().then();
                return true;
            }
        }

        if (lastActivity + timeoutMs < now) {
            if (debug)
                console.log('User inactive======', lastActivity, now);
            signOut().then();
            return true;
        }

        return false;
    }, [debug, lastActivity, session?.expires, status, timeoutMs]);

    const onTimerElapsed = useCallback(() => {
        // just fire the isUserInactive check
        isUserInactive();
    }, [isUserInactive]);

    useEffect(() => {

        // session is still loading
        if (status === "loading") {
            return;
        }

        if (status === "unauthenticated") {
            // maybe you want to do something more here...
            return;
        }

        // no timer has been initialized
        if (timeoutMs === null) {
            return;
        }

        // if user is already inactive, do not init
        if (isUserInactive()) {
            return;
        }

        // on mount, we will listen to several possible "interactive"
        // events
        const windowEvents: WindowActivityEvent[] = [
            'focus',
            'scroll',
            'click',
            'mousemove'
        ];

        windowEvents.forEach(eventName => {
            window.addEventListener(eventName, onUserActivity, false);
        });

        // we will use localStorage to determine activity
        window.addEventListener("storage", onStorage, false);

        // initialize an interval to check activity
        const intervalId = window.setInterval(onTimerElapsed, timeoutCheckMs);

        return () => {
            // detach and destroy listeners on deconstructor
            windowEvents.forEach(eventName => {
                window.removeEventListener(eventName, onUserActivity, false);
            });

            window.removeEventListener("storage", onStorage, false);

            // clear the interval
            window.clearInterval(intervalId);
        }
    }, [isUserInactive, lastActivity, onStorage, onTimerElapsed, onUserActivity, status, timeoutCheckMs, timeoutMs]);

    return <>{children}

}

[SpasiboKojima]

@angelitolm Wow it's horrible, there are so many things wrong with this, the worst is that it's going to write to localstorage, rerun useEffect code with attaching and deattaching all the listeners and then rerun the whole component body on every focus/scroll/click/mouse movement. Then you broke the JSX tag and prop types. And half of the stuff should not be in component's body.
Props to the idea, but it's still nowhere close to 'work perfectly'.
Here, I refactored it a bit and put a debounce at least, probably could be better but I ended up not using this approach.

'use client';
import { signOut, useSession } from 'next-auth/react';
import { useCallback, useEffect, useState, type PropsWithChildren } from 'react';

// biome-ignore lint/suspicious/noExplicitAny: <explanation>
export function debounceLeading<T extends (...args: any[]) => ReturnType<T>>(callback: T, timeout = 300) {
	let timer: NodeJS.Timeout | undefined;
	return (...args: Parameters<T>) => {
		if (timer) {
			return;
		}
		timer = setTimeout(() => {
			callback(...args);
			timer = undefined;
		}, timeout);
	};
}

const debounceUpdate = debounceLeading((callback: () => void) => {
	callback();
}, 10000);

const _storageKey = '_lastActivity';
// on mount, we will listen to several possible "interactive" events
const windowEvents: WindowActivityEvent[] = ['focus', 'scroll', 'click', 'mousemove'];

function storage() {
	return global.window !== undefined ? window.localStorage : null;
}

function activity() {
	return new Date().getTime();
}

const parseLastActivityString = (activityStr?: string | null) => {
	if (!activityStr) return null;

	const lastActivity = +activityStr;

	const now = activity();

	if (lastActivity == null || lastActivity > now || lastActivity <= 0 || Number.isNaN(lastActivity)) {
		// note: some of these conditions could actually mean
		// someone is trying to tamper with your activity timer
		// use with caution
		return null;
	}

	return lastActivity;
};

const initLastActivity = () => {
	const now = activity();

	const lastActivityStr = storage()?.getItem(_storageKey);

	const lastActivity = parseLastActivityString(lastActivityStr);

	return lastActivity == null ? now : lastActivity;
};

type WindowActivityEvent = keyof WindowEventMap;

interface AutoLogoutProviderProps extends PropsWithChildren {
	timeoutMs?: number;
	timeoutCheckMs?: number;
	debug?: boolean;
	requireSession?: boolean;
}

export function AutoLogoutProvider({
	timeoutMs = 600000, // Inactivity time
	timeoutCheckMs = 10000, // Time out to check
	debug = true,
	requireSession = false,
	children,
}: AutoLogoutProviderProps) {
	const [lastActivity, setLastActivity] = useState(() => initLastActivity());
	const { data: session, status } = useSession({ required: requireSession });

	const isUserInactive = useCallback(() => {
		const now = activity();

		// maybe verify that they are authenticated?
		if (status === 'authenticated') {
			const expiry = new Date(session?.expires).getTime();

			if (now > expiry) {
				if (debug) {
					console.error('User has expired======', expiry, now);
				}

				signOut().then();
				return true;
			}
		}

		if (lastActivity + timeoutMs < now) {
			if (debug) console.log('User inactive======', lastActivity, now);
			signOut().then();
			return true;
		}

		return false;
	}, [debug, lastActivity, session?.expires, status, timeoutMs]);

	const onUserActivity = useCallback(() => {
		return debounceUpdate(() => {
			const now = activity();

			if (debug) console.log('activity - resetting last activity to ', now);
			storage()?.setItem(_storageKey, now.toString());
			setLastActivity(now);
		});
	}, [debug]);

	useEffect(() => {
		if (status === 'loading') return;
		if (status === 'unauthenticated') return;

		// no timer has been initialized
		if (timeoutMs === null) {
			return;
		}

		// if user is already inactive, do not init
		if (isUserInactive()) {
			return;
		}

		const onStorage = ({ key, storageArea, newValue }: StorageEvent) => {
			if (key === _storageKey && storageArea === storage()) {
				// some debugging lines
				if (debug) console.log('remote tab activity - resetting last activity to ', newValue);
				const lastActivity = parseLastActivityString(newValue);

				if (lastActivity !== null) {
					setLastActivity(lastActivity);
				}
			}
		};

		const onTimerElapsed = () => isUserInactive();

		windowEvents.forEach((eventName) => {
			window.addEventListener(eventName, onUserActivity, false);
		});

		// we will use localStorage to determine activity
		window.addEventListener('storage', onStorage, false);

		// initialize an interval to check activity
		const intervalId = window.setInterval(onTimerElapsed, timeoutCheckMs);

		return () => {
			// detach and destroy listeners on deconstructor
			windowEvents.forEach((eventName) => {
				window.removeEventListener(eventName, onUserActivity, false);
			});

			window.removeEventListener('storage', onStorage, false);

			window.clearInterval(intervalId);
		};
	}, [debug, status, timeoutCheckMs, timeoutMs, isUserInactive, onUserActivity]);

	return children;
}

[TomasBurianTheOne]

Just in case someone finds this, it's not gonna work. There's a value that persists in the local storage which will prevent you from logging back in after you log out. You'll need get rid of it in order to get back in.