Routing with firebase authentication and angular router

Question

I am building an ionic app with ionic4. Therefore I use firestore as database. Also I want to use the firebase-authentication to login and register to my app. The problem is as following: I have multiple pages on my websites. Some of the pages are for public access, and some of them are for private access. With a router guard I achieved, that the private ones are only visible, if I'm logged in. My problem is now, that there are public sites (like login or register) which should only be accessable if I'm not logged in.

In the moment my routing works like this, that I have a "/" directory and all the private stuff is in the "/private/" directory. This directory has an own router guard, which is only accessible if logged in. I would prefere, that everything sits in the "/" directory. To this issue I want to achieve, that my router redirects a user to an error page if he tries to access a private page without beeing logged in or if he tries to access a public page, which should not be accessable if he's logged in.

Router:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'login', loadChildren: 
  './pages/public/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: 
  './pages/public/register/register.module#RegisterPageModule' },
  {
  path: 'private',
  canActivate: [AuthGuardService],
  loadChildren: './pages/private/private-routing.module#PrivateRoutingModule'
  },
  // TODO: Create an awesome 404 Page :D
  { path: '**', redirectTo: 'home' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
  })
  export class AppRoutingModule {}

RouterGuard:

@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthenticationService, private router: Router) { 
  }

  canActivate(): boolean {
  const isAuthenticated = this.auth.isAuthenticated();
  if (!isAuthenticated) {
    this.router.navigate(['/login']);
  }
  return isAuthenticated;
  }
}

You can find my code on GitHub: Code

I hope my problem is clear and I'm happy for every answer :)

Edit: I got no results and am really stuck! Any help is welcome!!

"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." — Frank van Puffelen
– Frank van Puffelen, Commented Feb 6, 2019 at 15:11
Thanks for your answer. My code is working, but not as expected. I described it above how it works and how I want it to work. The shortest necessary code to reproduce will follow I'm sorry for that. — Yingrjimsch
– Yingrjimsch, Commented Feb 6, 2019 at 15:14

Yingrjimsch · Accepted Answer · 2019-03-01 13:41:20Z

1

No response, so I figured it out by myself and made it like this: https://www.positronx.io/full-angular-7-firebase-authentication-system/

Edit: I decided to make multiple AuthenticationGuards. One of these guard is for private pages and another for only public pages. I also saved my logged-in user to the localStorage to get him with a synchronius call. Therefore I made an interface called user with it's properties. The rest is the same. I used the Angular Router "like in the question" and added the canActivate.

PS: Props to this guy who deleted my solution on my own comment after less than a minute while I was editing it on request xD

answered Mar 1, 2019 at 13:41

Yingrjimsch

1221 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Routing with firebase authentication and angular router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related