Search code examples
angularangular10

Protect angular application with password

I would like to protect my application with a password. When a user opens the app he has to type in the correct password then he is redirected to the main page of the application.

I tried creating a component with simple password input that if validated successfully would redirect using routing, but that doesn't work since the user can still just type in the correct url (/invitation) and bypass the password validation.

  validatePassword(input: string): void {
    if (this.password === input) {
      this.router.navigate(['/invitation']);
    }
  }

What is the correct way to go around this problem?

Solution

  • Short answer, you can't.

    Anything security related on a frontend is not secure. You can use a guard to hide the page, but with a little knowledge, this can be bypassed. You should instead protect your data (API). How to depends on your stack.