CODEWITHSUNDEEP
angularauthentication.net-corejwtsession-timeout
kanpeki
kanpeki

Reputation: 445

Logout user after a set period of inactivity

The application I am working on uses .NET Core 2 Web API on the back end and Angular on the front end. We have authentication set in place using Active Directory with JWT. Current flow: When the login button is pressed a call is made to an endpoint that retrieves the token corresponding to the current user. If the token is valid/retrieved successfully, the user is logged in. When the logout button is pressed the token is deleted and the user is redirected to the login page. Only a couple of people will have access to our app. We would like each logged in user to be automatically logged out after a set period of inactivity (say 30 minutes). How can we achieve this? Will this be handled by the back end or the front end?

Upvotes: 1

Views: 13107

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use the ng2-idle module for achieving logout feature. Below is the code snippet for app.component.ts to logout after a period of time,

constructor(
    private router: Router,
    private idle: Idle,
    private keepalive: Keepalive,
) {
    idle.setIdle(1800); // for 30 minutes
    // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
    idle.setTimeout(5);
    // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
    idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    //idle.onIdleEnd.subscribe(() => (this.idleState = 'No longer idle.'));
    idle.onTimeout.subscribe(() => {
        this.idleState = 'Timed out!';
        this.timedOut = true;
    });
    idle.onIdleStart.subscribe(() => {
        this.idleState = "You've gone idle!";
        this.router.navigate(['/home']); // redirect to home if idle for 30 minutes
    });
}

Upvotes: 0

Antoine V
Antoine V

Reputation: 7204

You can check the inactivity by 2 sides.

In the server side, try to put the Cookie in startup

public void ConfigureAuth(IAppBuilder app)
    {
        app.UseCookieAuthentication(new CookieAuthenticationOptions
        {
            AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
            ExpireTimeSpan = System.TimeSpan.FromMinutes(30),
            LoginPath = new PathString("/Account/Login"),
            LogoutPath = new PathString("/Account/LogOff")
        });

In client side, by a detection of the movement of cursor ou keyboard 

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 29) { // 30 minutes
        //send request to logout
    }
}
</script>

Upvotes: 2

Code_maniac
Code_maniac

Reputation: 278

Call the logout API after 30 minutes using javascript setTimeout() function.

Upvotes: 0

Related Questions