Enhancing User Experience through 'Remember Me' Feature in Angular App

I need assistance with adding the Remember Me functionality to a login form in an Angular application. Could someone please provide guidance on how to achieve this? Your help would be highly appreciated! Thank you in advance! Below is my login.ts file:

ngOnInit() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email] ],
      password: ['', Validators.required]
    });
  }
  get f(){
    return this.form.controls;
  }
  onSubmit() {
    this.submitted = true;
   
    this.accountService.login(this.f.email.value, this.f.password.value)
}


Additionally, here is my account.service.ts file:

export class AccountService {
    private accountSubject: BehaviorSubject<Account>;
    public account: Observable<Account>;
    
    constructor(
        private router: Router,
        private http: HttpClient
    ) {
       this.accountSubject = new BehaviorSubject<Account>(null);
        this.account = this.accountSubject.asObservable();
    }
    public get accountValue(): Account {
        return this.accountSubject.value;
    }
    login(email: string, password: string) {
        return this.http.post<any>(`${baseUrl}/authenticate`, { email, password }, { withCredentials: true })
            .pipe(map(account => {
                this.accountSubject.next(account);
                return account;
            }));
    }
    logout() {
        this.http.post<any>(`${baseUrl}/revoke-token`, {}, { withCredentials: true }).subscribe();
        this.accountSubject.next(null);
        this.router.navigate(['/account/login']);
    }
   
}

Answer №1

To enhance user experience, consider using either Local/Session Storage or Cookies. By enabling the 'Remember me' feature during login, securely store session login details in one of these storage options (preferably encrypted). This way, upon returning to the site, authentication services can verify the stored credentials for seamless access, automatically logging out the user if necessary. It may be beneficial to adjust the session token expiration on the server or set it to never expire. As a result, session credentials only get cleared when the user manually logs out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to selectively apply colors to particular rows within an AntD table

I'm attempting to apply different colors to entire rows depending on certain data values from the table's data source. I know that we can utilize rowClassName, but I'm not entirely clear on its functionality. If anyone could provide exampl ...

Utilizing Nodemailer and ReadableStreams to send email attachments stored in S3

My current challenge involves sending emails with Nodemailer that include attachments hosted in S3, utilizing JS AWS SDK v3. The example provided in the Nodemailer documentation demonstrates how to send an attachment using a read stream created from a file ...

Exploring TypeScript reflections within a specific namespace

(Building upon previous discussions about dynamically loading a TypeScript class) If I am currently within a namespace, is there a method to reference classes within the namespace in order to utilize 'reflection' to invoke their constructors? n ...

The method insertFusionCharts cannot be called in Angular when using jQuery

I have integrated the following scripts into my angular project <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="assets/js/jquery.min.js"></script> <script ...

Any ideas on how to fix the issue of 'type' property being absent in 'AsyncThunkAction' with Redux Toolkit while working with TypeScript?

While working with Redux Toolkit and the thunk/slice below, I decided to handle errors locally instead of setting them in state. To achieve this, I followed the example provided here. Although I could have set an error in the state, I wanted to explore wh ...

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code: public static getKeys(obj: Object) { let keys: string[] = []; for (let k in obj) { if (typeof obj[k] == "Object" && obj[k] !== null) { ...

Strategies for managing various errors that can arise when multiple Angular components are subscribed to a single state

My Angular application is facing a dilemma with three components at play: Component #1: Shows a list of items Component #2: Displays recently used items Component #3: Exhibits the current item For now, let's assume they're all visible on the sa ...

Error: PrimeNG Treenode Component is having difficulty rendering the data

I'm currently working on a project in Angular 5 where I need to display data in a Treenode format. The data is coming from a service and is structured as follows (in object form): { "data": [ { "label": "Documents", ...

Converting language into class components using ngx-translate in Angular

Seeking to convert the information from a table into my typescript class. The data in the table is sourced from a JSON file within the /assets directory. Is there a method to accomplish this task? How can I categorize translation within a typescript class ...

Struggling with loading partials in Sails.JS from the "assets" directory?

I am currently using Sails.JS as the backend paired with Angular 6 for the frontend of my application. Within my homepage.ejs file, I am trying to load HTML content from the assets folder: <!DOCTYPE html> <html> <!-- webpack generated ht ...

Auth0 Angular - No routes found to match

I recently set up an angular application and integrated it with Auth0 by following two helpful tutorials: https://auth0.com/docs/quickstart/spa/angular2/01-login https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api Here is a brief overview o ...

What is the best way to retrieve props for computed properties using Vue with Typescript?

Seeking help on accessing props data for my computed property. Here is the code snippet: <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { color: String, shape: String, ...

In TypeScript, encountering an unanticipated intersection

In my "models" registry, whenever I select a model and invoke a method on it, TypeScript anticipates an intersection of parameters across all registered models. To demonstrate this issue concisely, I've created a dummy method called "getName". expor ...

Experiencing the error "f.ngOnChanges is not a function in target es5" while using Angular4

Encountering an issue f.ngOnChanges is throwing an error The problem arises when my tsconfig.json file is configured to target es5. However, everything works fine if I set the target to es6. Is there a way to make ngOnChange function properly with es ...

What are some methods to troubleshoot $injector type errors in TypeScript?

I'm currently facing an issue with my AngularJS code. Here is a snippet of what I have: this.$injector.get('$state').current.name !== 'login' But, it's giving me the following error message: error TS2339: Property 'c ...

The ListItemButton's onclick event does not trigger on the initial click when utilizing a custom component as its children

I am having trouble comprehending why this onclick function is influenced by the children and how it operates <ListItemButton onClick={() => onClickResult(q)}> <Typography variant="body1">{highlighted}</Typography> ...

Dealing with conflicting tsconfig.json files: Utilizing CommonJS for Node.js and ES6 for React.js

Here is the current folder setup for my TypeScript files: ts_dev --client *components.tsx *tsconfig.json --server *server.ts *tsconfig.json --share *utility.ts The Node.js server needs to use commonjs modules, while the client side compone ...

Using keyof to access static properties within TypeScript classes

While experimenting with this TypeScript playground code sample, I encountered an issue with defining the greeterBuilderName variable. How can I specify that I want properties of the Greeter function itself (such as prototype, warm_greeter, etc.) when keyo ...

Tips on exporting a basic TypeScript class in an Angular 4 module

I am facing a challenge with packaging a TypeScript class as part of an Angular module for exporting it as a library using ng-packagr. For instance, here is my class definition - export class Params { language: string ; country: string ; var ...

Using Angular 4 to populate a form and ensure it remains untouched

Designed an update form that is pre-populated with information. I am aiming for the button to be inactive until any changes are made within the form The form group utilizes valueChanges to detect when information has been modified However, even when I u ...