The proper order for logging in is to first validate the login credentials before attempting

I created a custom validation class to verify if a user is logged in before allowing them access to a specific page. However, after implementing this validation, my program no longer routes me to the intended component.

Validation.ts

export class UserValidation {
    user = {};

    validateLogin(user) {
        if (user) {
            this.user = user;
            console.log("test login");
            return true;
        } else {
            this.user = {};
            console.log("test logout");
            return false;
        }
    }
}

app.component.ts

 export class AppComponent {

...
    
    login(email: any, password: any) {
        this.af.auth.login({ email: email, password: password }, {
          provider: AuthProviders.Password,
          method: AuthMethods.Password
        });
        this.modal.close();
        this.router.navigate(['dashboard']);
      }
    }

dashboard.component.ts

export class DashboardComponent {

constructor(public af: AngularFire,  public router: Router) {
    this.validator = new UserValidation();
    this.af.auth.subscribe(user => {
      if (this.validator.validateLogin(user)) {

        this.af.auth.subscribe(auth => {
...

});
      }
      else {
        this.router.navigate(['/']);
      }
    });


  }
}

When I run the program and start at '/', it functions correctly. However, when I attempt to log in, the console displays "test logout" first, preventing the routing to the dashboard. Any suggestions on how to speed up the validation process or ensure it occurs after the login?

test logout
test login

Answer №1

If you're looking for assistance, Resolver might be able to help. While you are currently using the authentication process which is logically correct, there is a more precise solution available for seamless authentication :)

Check out this resource for more information:

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

Unable to display information stored in the Firebase database

I am struggling with a frustrating issue. My goal is to showcase the information stored in the Firebase database in a clear and organized manner, but I'm having trouble achieving this because it's being treated as an object. getData(){ firebas ...

Incorporate the Input() component into your codebase and take advantage of its dot notation features, such as

Many Angular directives utilize dot notation options: style.padding.px style.padding.% attr.src In addition, libraries like flex-layout employ this for various responsive sizes: fxLayout.gt-sm fxAlign.sm Can the same concept be applied to a component&a ...

The element '<selector>' is unrecognized and cannot be found

Before I proceed with my query: I have gone through similar questions with the same title and followed the given advice, but none of it has worked for me. Therefore, I have decided to create a new question. In my Angular project, I have one module and mul ...

Avoid activating automatic save feature in Material UI data grid

After creating a data-grid and attempting to add records, I encountered an issue where pressing the TAB key automatically saved the data when focusing on the save button without manually pressing enter. How can this behavior be prevented so that manual con ...

What is the best approach for replacing numerous maps within an rxjs observable array?

Is there a more efficient way to retrieve only 3 items from an array? If you have any suggestions, I would appreciate it! Thank you. loadAsk!: Observable<any[]>; this.loadAsk.pipe( map(arr => arr.sort(() => Math.random() - .5)), map((item ...

Updating validators on Angular reactive form controls as they change

I am working with a reactive form where I need to dynamically adjust the validators for the "password" and "confirm password" fields based on user input. I have set up a subscription to listen for changes in the password field's value, updating the va ...

Element without style

In my app, I have implemented numerous material design components, but there are two input elements for which I would like to customize the style and remove the default material design look. Is there a way to eliminate the CSS styling from an <input ma ...

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

Create a new instance of the TypeScript singleton for each unit test

I have a TypeScript singleton class structured like this: export default class MySingleton { private constructor({ prop1, prop2, ... }: MySingletonConfig) { this.prop1 = prop1 ?? 'defaultProp1'; this.prop2 = prop2; ...

Create a file object using content with the help of JavaScript

I am working with a file containing specific data const ics = 'BEGIN:VCALENDAR\n' + 'VERSION:2.0\n' + 'CALSCALE:GREGORIAN\n' + 'METHOD:PUBLISH\n' + 'END:VCALENDAR\n'; I am trying t ...

Error encountered when attempting to add document to Firebase database: admin:1. An unexpected FirebaseError occurred, stating that the expected type was 'Na', but it was actually a custom object

I am encountering an error when trying to add a document to my collection in Firebase. I have successfully uploaded an image to Storage and obtained the URL, but this specific step is causing issues. I have followed the code implementation similar to how F ...

Encountering problem installing "kendo-angular-grid" via npm

I am currently working on a project that utilizes kendo. Here is the content of the package.json file: Package.json- { "name": "angular-2-webpack-starter", "version": "0.1.0", "description": "A starter kit for angular 2 and webpack", "scripts": { ...

After using apt to install tsc, I find myself in a dilemma on how to either delete or upgrade it

After realizing I was missing Typescript on my server, I attempted to run the 'tsc' command. However, I received a message suggesting I use 'apt install tsc' instead. Without much thought, I executed the command. Normally, I would insta ...

Problem with execution of TypeScript function from HTML

I have been facing an issue where I am attempting to click a button on an HTML page to trigger a TypeScript function called `getToken()`. Strangely, the function does not seem to get executed when the button is clicked. Surprisingly, I have tested the `get ...

What is the proper way to implement Firebase getDoc in Vue with vue-concurrency?

I am currently in the process of developing a TypeScript Vue composable that utilizes Firebase and the vue-concurrency library. According to the documentation, I need to explicitly type any intermediate values that are yielded. I am facing a challenge wh ...

An optional field has been identified as ng-invalid

In my set-up, I have created a form group using reactive forms. this.transactionForm = fb.group ({ 'location': [null, Validators.required], 'shopper': [null], 'giftMessage': [null], 'retailPrice& ...

Try using ngFor within the insertAdjacentHTML method

When a user clicks, I dynamically attach an element inside a template like this: this.optionValue = []; youClickMe(){ var moreput = ''; moreput += '<select">'; moreput += '<option *ngFor="let lup of opti ...

Is it advisable for a component to handle the states of its sub-components within the ngrx/store framework?

I am currently grappling with the best strategy for managing state in my application. Specifically, whether it makes sense for the parent component to handle the state for two subcomponents. For instance: <div> <subcomponent-one> *ngIf=&qu ...

Show the subjects' names and their scores once they have been added to a fresh array

Here is my unique code snippet: let fruits: string[] = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']; function capitalize(fruit: string) { return fruit.toUpperCase(); } let uppercaseFruits = fruits ...

Error in VS Code related to Vue Array Prop JSDoc TypeScript: The properties of type 'ArrayConstructor' are not found in type 'MyCustomType[]'

After reading the article "Why I no longer use TypeScript with React and why you might want to switch too", I decided to work on a Vue CLI project using ES6 without TypeScript. Instead, I enabled type checking in Visual Studio Code by utilizing JSDoc / @ty ...