Angular OpenID: Redirect to login before app loads in browser

Question

I am using Angular 12 with angular-oauth2-oidc and so far I've successfully set up authentication. However, right before being redirected to the login the application is being loaded (only for a splitsecond, but still). Is there any way to hide the app completely unless you're logged in?

Answer 1

If you are using routing then you could look into using guards to prevent any of the routes from being loaded if the user is not authorized. A guard would look something like

class AuthenticatedGuard implements CanActivate {
  userLoggedIn = AuthService.isLoggedIn;
  canActivate() {
    if (this.userLoggedIn) {
     return true;
    } else {
     return false;
    }
  }
}

And then to prevent the app from loading routes that require authorization, in the routing module you could add the guard individually with the canActivate property or even have them as children of a route to save yourself some time like below:

{    
  path: '',
  component: AppComponent,
  canActivate: [AuthenticatedGuard],
  children: [
     { path: '', component: HomeComponent }, // Other routes here
  ]
}