Pfthb

So i'm trying to set up a sso system with keycloak on my angular app.

I have downloaded the keycloak library keycloak-angular@4.0.2, setted up a keycloak server at localhost:8080/auth, added the keycloak.json on the root of the app, that keycloak made for me:

 
 "realm": "my-app",
 "auth-server-url": "http://localhost:8080/auth",
 "ssl-required": "external",
 "resource": "my-app",
 "public-client": true,
 "confidential-port": 0
 

Also I added the keycloak initi function in the main.ts:

import enableProdMode from '@angular/core';
//....some other import....
import KeycloakService from 'keycloak-angular';


var injector = ReflectiveInjector.resolveAndCreate([KeycloakService]);
var keycloak = injector.get(KeycloakService)

if (environment.production) 
 enableProdMode();




keycloak.init()
 .then(() => platformBrowserDynamic().bootstrapModule(AppModule))
 .catch(e => 
 console.error(e);
 );

Now, if i try to make a registration page, someting like this:

export class registration implements OnInit 


 constructor(keycloak:KeycloakService) 

 keycloak.register();

 

 ngOnInit() 

 

it works and sends me to a registration page and if i create an account it apears in the keycloak server.
BUT... even if i am not logged in with any account it lets me access any page, also, if i try :

keycloak.isLoggedIn().then(() => console.log("logged"), ()=>console.log("Not logged"));

The result is "logged", but if i try:

keycloak.loadUserProfile();

Then it says

The user profile was not loaded as the user is not logged in.

I can't understand how it works, am i missing someting?
So my question is:
-How do i prevent pages to show if i am not logged in?
-how do a make a user log and stay logged and angular to recognize who is logged and hwo is not.

Sorry if the question is stupid or the text doesn't matck this site best practices, i'm new around here.

thank you all!

UPDATE:
As asked i'm adding app.module.ts

import BrowserModule, HAMMER_GESTURE_CONFIG from '@angular/platform-browser';
import NgModule, APP_INITIALIZER from '@angular/core';
import TranslateModule from '@ngx-translate/core';
import HttpClientModule from '@angular/common/http';
import KeycloakService, KeycloakAngularModule from 'keycloak-angular';
import initializer from './utils/app-init';

import AppComponent from './app.component';
import AppRoutingModule from './app-routing.module';

import AuthenticationModule from './core/auth/authentication.module';
import NgxPermissionsModule from 'ngx-permissions';

import LayoutModule from './content/layout/layout.module';
import PartialsModule from './content/partials/partials.module';
import CoreModule from './core/core.module';
import AclService from './core/services/acl.service';
import LayoutConfigService from './core/services/layout-config.service';
import MenuConfigService from './core/services/menu-config.service';
import PageConfigService from './core/services/page-config.service';
import UserService from './core/services/user.service';
import UtilsService from './core/services/utils.service';
import ClassInitService from './core/services/class-init.service';
import NgbModule from '@ng-bootstrap/ng-bootstrap';
import BrowserAnimationsModule from '@angular/platform-browser/animations';
import GestureConfig, MatProgressSpinnerModule from '@angular/material';
import OverlayModule from '@angular/cdk/overlay';

import MessengerService from './core/services/messenger.service';
import ClipboardService from './core/services/clipboard.sevice';

import PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface from 'ngx-perfect-scrollbar';
import LayoutConfigStorageService from './core/services/layout-config-storage.service';
import LogsService from './core/services/logs.service';
import QuickSearchService from './core/services/quick-search.service';
import SubheaderService from './core/services/layout/subheader.service';
import HeaderService from './core/services/layout/header.service';
import MenuHorizontalService from './core/services/layout/menu-horizontal.service';
import MenuAsideService from './core/services/layout/menu-aside.service';
import LayoutRefService from './core/services/layout/layout-ref.service';
import SplashScreenService from './core/services/splash-screen.service';
import DataTableService from './core/services/datatable.service';


import 'hammerjs';
import AppAuthGuardComponent from './utils/keycloak/app-auth-guard/app-auth-guard.component';
import KEYCLOAK_HTTP_PROVIDER from './utils/keycloak/keycloak.http';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = 
 // suppressScrollX: true
;

@NgModule(
 declarations: [AppComponent, AppAuthGuardComponent],
 imports: [
 BrowserAnimationsModule,
 BrowserModule,
 AppRoutingModule,
 HttpClientModule,
 LayoutModule,
 PartialsModule,
 CoreModule,
 OverlayModule,
 AuthenticationModule,
 NgxPermissionsModule.forRoot(),
 NgbModule.forRoot(),
 TranslateModule.forRoot(),
 MatProgressSpinnerModule,
 KeycloakAngularModule,
 ],
 providers: [
 AclService,
 LayoutConfigService,
 LayoutConfigStorageService,
 LayoutRefService,
 MenuConfigService,
 PageConfigService,
 UserService,
 UtilsService,
 ClassInitService,
 MessengerService,
 ClipboardService,
 LogsService,
 QuickSearchService,
 DataTableService,
 SplashScreenService,
 KeycloakService,
 KEYCLOAK_HTTP_PROVIDER,
 
 provide: PERFECT_SCROLLBAR_CONFIG,
 useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
 ,
 
 provide: APP_INITIALIZER,
 useFactory: initializer,
 multi: true,
 deps: [KeycloakService]
 ,


 // template services
 SubheaderService,
 HeaderService,
 MenuHorizontalService,
 MenuAsideService,
 
 provide: HAMMER_GESTURE_CONFIG,
 useClass: GestureConfig
 
 ],
 bootstrap: [AppComponent]
)
export class AppModule