Creating a middleware for redirect auth in Angular: Component, Resolver or Guard?

I am working on implementing an external auth system in my Angular application, and I want to ensure that I am following the best approach.

The auth system works in the way that by a given redirect URL if the authentication goes well, it will redirect the user with a token in query params in my case to a component I've created called AuthComponent, then that token has to be used to get authenticated via another service, if this authentication will go well, then the user will be able to navigate in the angular application, else had to be redirected to /error component.

What I've tried is to do all that logic inside the component, but I don't really need the component to be loaded, so I was looking for a better approach to do it, maybe by using a resolver or a guard.

Here is how the component looks like:

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent {
  router = inject(Router)
  route = inject(ActivatedRoute)
  authService = inject(AuthService)

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      const token = params['token'];
      if (token) {
        this.authService.authenticate(token).pipe(
          map(response => {
            if (response && response.status === 200) {
              this.router.navigate(['/']); // Authentication successful
            } else {
              this.router.navigate(['/error']); // Authentication failed
            }
          })
        );
      } else {
        this.router.navigate(['/error']); // No token found
      }
    });
  }
}

And here is the service:

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  helper = inject(JwtHelperService)
  http = inject(HttpClient)

  authenticate(token: string): Observable<any> {
    return this.http.get<any>(`/api/auth/gab-auth/`, { params: { token: token }, observe: 'response' }).pipe(
      tap(response => {
        if (response.ok && response.body) {
          let accessToken = response.body['access_token'];
          if (accessToken) {
            localStorage.setItem('access_token', accessToken);
          }
        }
      })
    );
  }

  isAuthenticated(): boolean {
    const token = localStorage.getItem('access_token');
    return token != null && !this.helper.isTokenExpired(token);
  }
}

Then I have a guard that allows or not the user to reach the pages based on isAuthenticated value.

Add guard to protected root routes:

const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('./login/login.component').then(m => m.LoginComponent),
  },
  {
    path: '',
    component: AppContainerComponent,
    canActivate: [isLoggedIn],
    children: [
      {
        path: 'jobs',
        canMatch: [isModuleAllowed],
        loadChildren: () => import('./jobs/jobs-routes'),
      },
       {
        path: '',
        component: MainMenuComponent,
        pathMatch: 'full',
      },
    ]
  },
  {
    path: '**',
    redirectTo: '',
  },
];

And login guard:

export const isLoggedIn: CanActivateFn = (): Observable<boolean | UrlTree> => {
  const router = inject(Router);
  return inject(LoginService).isLogin().pipe(
    map(logged => logged || router.parseUrl('/login')),
  );
};

Login service checks login state against api and caches the state (implementation is out of question scope).

How I have solved it by using a guard instead of a component?

First of all, I've gotten rid of the AuthComponent but I still keep the route for it by replacing the component with an empty child (this allows to use the guard without any component, else with a redirectTo is executed before the guard).

My app-routing for the auth now looks like this:

  {
    path: 'auth', canActivate: [tokenGuard], children: []
  }

While the tokenGuard:

export const tokenGuard: CanActivateFn = (route, _state): Observable<boolean | UrlTree> => {
  const router = inject(Router)
  const auth = inject(AuthService)

  const token = route.params['token'];

  if (!token) {
    return of(router.parseUrl('/error')); // No token found
  }

  auth.authenticate(token).pipe(
    map(response => {
      if (response && response.status === 200) {
        return router.parseUrl('/'); // Authentication successful
      } else {
        return router.parseUrl('/error'); // Authentication failed
      }
    })
  );

  return of(false);
};