The Angular application must remain logged in until it is closed in the browser

Question

The Angular application must remain logged in until it is closed in the browser

Currently, my Angular app includes authentication functionality that is working smoothly. The only issue is that the application/session/token expires when there is no user activity and the app remains open in the browser.

I am looking for a solution where the token remains valid unless the user actively logs out themselves.

I have an idea to address this challenge by sending a request to the API every 10 minutes to refresh the access token. However, I am unsure of how to implement this logic at the application level.

Does anyone have suggestions on where I can integrate this logic effectively?

Thank you in advance, Danyal

javascript angularjs

Answer 1

Answer №1

One approach on the front end is to store the token in either a cookie or $window.sessionStorage so that it can be utilized for subsequent API calls requiring authentication. A factory can be created to manage the token.

.factory('AuthHandler', function ($window){

    return {

     saveToken: function(token){
        $window.sessionStorage.setItem('token', token);
     },


     getToken: function(){
       return $window.sessionStorage.getItem("token");
     }
  };
 });

The next step is to implement this logic in the controller:

.controller( 'MyCtrl', function ( $scope, AuthHandler, Api, $interval){

  function fetchData() {
     Api.get_token({username: $scope.username, password: $scope.password}).$promise.then(function(data){
       if(data.success){
         AuthHandler.saveToken(data.token);

       }
     });
  }
  fetchData(); 
  $interval(fetchData, 1000 * 60 * 10); 
 });

Answer 2

One approach on the front end is to store the token in either a cookie or $window.sessionStorage so that it can be utilized for subsequent API calls requiring authentication. A factory can be created to manage the token.

.factory('AuthHandler', function ($window){

    return {

     saveToken: function(token){
        $window.sessionStorage.setItem('token', token);
     },


     getToken: function(){
       return $window.sessionStorage.getItem("token");
     }
  };
 });

The next step is to implement this logic in the controller:

.controller( 'MyCtrl', function ( $scope, AuthHandler, Api, $interval){

  function fetchData() {
     Api.get_token({username: $scope.username, password: $scope.password}).$promise.then(function(data){
       if(data.success){
         AuthHandler.saveToken(data.token);

       }
     });
  }
  fetchData(); 
  $interval(fetchData, 1000 * 60 * 10); 
 });

The Angular application must remain logged in until it is closed in the browser

Answer №1

Similar questions

sliding to the right gets jammed

Is there a way to incorporate a custom method into a JQuery tab widget?

What are the steps to entering or accessing a MVC controller?

Retrieve a variable from the context and assign it to the Angular scope

Is there a specific index range in javascript or nodejs for accessing array items?

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

Direct your attention towards the bootstrap dropdown feature

Locate specific phrases within the text and conceal the corresponding lines

Transforming data with D3.js into a string representation

Troubleshooting tips for optimizing Opera and Internet Explorer performance

Firebase Functions: Your functions are missing a definition

Object with a specific name sitting within an array nested within another object

Using Ajax and Session Variables for a Worksafe Filter to selectively hide images

When the Component is mounted, it triggers a GET request and passes the response as a prop to the child component. What occurs if I enter a URL that directly accesses the child

Mongoose: No documents are being returned by the .find() method

Tips for clearing all content within a React Material UI table

Unable to associate ngModel because it is not recognized as a valid property of the "Component"

Reveal and conceal using CSS animations

Is there a way for me to store the output of an AJAX call?

The JavaScript code appears to be missing or failing to execute on the website