Authentication on Ionic's platform

I've been struggling with using ngOnInit to check if a value is set on the app's localStorage, but for some reason, it's not working as expected.

This is my current implementation:

Here is the function responsible for logging the user into the app:

async login() {
    try {
      await this.authService.SignUpWithEmail(this.email, this.password);
      await this.router.navigate(['secundaria']);
      localStorage.setItem("logged-status", "logged-in")
    }

And here is how I am trying to verify if the value is in the local storage:

ngOnInit() {
    if (localStorage.getItem("logged-in") !== null) {
      this.navCtrl.navigateForward(["quarta"])
    }
  }

It appears that the code is not executing properly, which is preventing it from working at all.

If anyone has any insights or can offer assistance, I would greatly appreciate it.

Answer №1

It is important to note that the component may be destroyed before the bottom command is executed. To ensure that all the code gets executed, it's recommended to place the navigate command at the end.

async login() {
    try {
      await this.authService.SignUpWithEmail(this.email, this.password);
      localStorage.setItem("logged-status", "logged-in");
      this.router.navigate(['secundaria']); // <- modified here!
    } 

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

The refusal to run JavaScript stemmed from an empty MIME type, resulting from the combination of nodeJS, express, engintron, and nginx

Currently, I'm struggling with a frustrating issue that's making me want to pull my hair out. So, here's some important information you need to be aware of: My application is built using node.js (version 16.13.1) with express and nginx man ...

React.js - "Encountered error: Unable to access 'map' property of undefined variable"

I've tried various methods I found through searching, but none of them seem to be working. Why is it still showing that map is undefined? import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/A ...

Is there an Angular Profile service offering getter and setter properties?

Can a singleton Angular service be created with getters and setters along with logic implementation? I was provided with the following code snippet and tasked with replicating it in an Angular service. Although it may seem straightforward, I'm finding ...

Toggle the field on and off using HTML and JavaScript from the bottom

My goal is to enable two fields in a row by clicking on "activate1", while the other fields remain unchanged. Similarly, I want to activate the other two fields by using "activator2" and so on. There should be three activators at the bottom solely for acti ...

How can Vue add a class to an element without using v-model:class?

I am faced with the challenge of connecting two elements that are located in different areas of the DOM. The goal is to create a hover effect on one element when the other is interacted with. The first element is within a component and is rendered using t ...

The process of retrieving values from ngStorage

Is there a way to retrieve only text values from locally stored JSON in the browser using the ng storage module in AngularJS? I have attempted to access the values with $scope.data = $localStorage.notes; <div class="col-xs-6 well"> {{data}} </ ...

Troubleshooting the ngClass Issue in My Angular Application

I am in the process of creating a form that requires validation. I am utilizing the following interface to define FieldError. export interface FieldError { errorAt: string; errorMessage: string; } In my component.html, I am employing [ngClass] to chec ...

Display React Component after Button is Clicked

I am currently working on a minimalist landing page that consists of two texts and one div with two buttons. The goal is to render the App component when one of these buttons is clicked. Here is the code snippet I have been experimenting with: import Rea ...

Issues with 'Backspace' and 'Clear' buttons on HTML calculator preventing proper function in JavaScript

Hello everyone! I've recently started working on a pure HTML/CSS/JS calculator project. While the HTML and CSS parts went smoothly, I'm facing some issues with getting the initial functions to work properly. Despite doing some research online, I ...

In order to execute the 'ng serve' command successfully, it is necessary to be within an Angular project. However, the system could

Attempting to set up a nrwl workspace project using nrwl cli, following the instructions provided on GitHub at the link below: https://github.com/onehungrymind/angular-core-workshop Encountering an error as depicted in the image below: https://i.sstatic ...

Building Dynamic Properties in TypeScript

I have developed a data entry application that utilizes the DataGrid component from DevExpress (devextreme) to allow users to add and remove columns, excluding the key column. The column configuration and user data are both stored in an SQL database. Here ...

I am having trouble getting Nodemon to load my index.js file

I've been facing some issues with getting my code to run smoothly. Every time I try to use nodemon to launch it, it attempts to connect but I just see a loading icon in the localhost tab. When using live-server, the homepage loads fine on its own but ...

Shiny Exterior using ThreeJS

Trying to achieve a realistic metallic appearance in ThreeJS has been a challenge for me. Despite knowing that I should be using the MeshPhongMaterial material type, I am struggling to configure it properly. My current implementation only results in a pla ...

Communication between parents and children is crucial for building strong relationships and providing validation

This question may have been asked in a complex manner before, but I will simplify it here. In my main component, I have a form tag and Submit Button. Within this component, there is a child component that contains an input field with a required attribute, ...

Selecting the right React keys when rendering elements from an array

Lately, I've been delving into the significance of keys for elements in React and it's still a bit unclear to me. There's this scenario where I have a datagrid component that displays data in rows with sorting, filtering, and pagination fun ...

When using the jQuery datepicker with the minDate set to 0, any past dates entered in the text box will be automatically reset to the current date

How can I prevent users from selecting past dates in a jQuery datepicker, while keeping any existing past dates displayed as is? My current code looks like this: $("#t1").datepicker({ minDate:0 }); And the text box code is, <input type="t1" va ...

Tips for maintaining consistent column size in an angular material table as the screen size shrinks

I have a material table with 9 columns and I want to keep the column size consistent even when the screen size is reduced. Currently, as I decrease the screen size, the last column shrinks first while the other columns remain the same size, creating an un ...

Navigating URL to switch data access

Is there a way to toggle the visibility of a div when I add #ID at the end of the URL? For instance, if I access a URL like domain.com/xxxxxx#01, then the specified div should be displayed. $(document).ready(function() { $(".toogle_button_<?php echo ...

LinkedIn Authorization Flow Redirects to Incorrect URL

The URL above indicates that the specified redirect URL is: http://localhost:4200/auth/callback-linkedin Even though the authorized redirect URL in the app settings is the same, I encounter an error upon redirection: errors: Array [ "Something went wr ...

Passing a string array from View to Controller using Url.Action in MVC framework

I am facing an issue where I have a method that returns an array (string[]) and I am attempting to pass this array of strings into an Action. However, I am currently unable to pass my parameters as expected. Being new in MVC3, I would appreciate any insi ...