docs: update to current state (#1556)

* fix: site folder

* fix: site folder

site/docs/angular/02-code.md

@@ -21,11 +21,15 @@ Add the Auth module to your Angular imports in AppModule and setup the AuthConfi
 import { AuthConfig, OAuthModule } from 'angular-oauth2-oidc';
 
 const authConfig: AuthConfig = {
-    clientId: 'YOUR CLIENT ID',
-    redirectUri: 'http://localhost:4200/auth/callback', // change this to your domain later or use window.location.origin.
     scope: 'openid profile email',
     responseType: 'code',
     oidc: true,
+    clientId: 'YOUR-CLIENT-ID', // replace with your appid
+    dummyClientSecret: 'YOUR-SECRET', // required by library
+    issuer: 'https://issuer.zitadel.ch',
+    redirectUri: 'http://localhost:4200/auth/callback',
+    postLogoutRedirectUri: 'http://localhost:4200/signedout', // optional
+    requireHttps: false // required for running locally
 };
 
 @NgModule({
@@ -44,17 +48,16 @@ Then create a Authentication Service to provide the functions to authenticate yo
 You can use Angulars schematics to do so:
 
 ``` bash
-ng g component services/auth
+ng g component services/authentication
 ``` 
-This will create an AuthService automatically for you.
+This will create an AuthenticationService automatically for you.
 
 Copy the following code to your service. This code provides a function `authenticate()` which redirects the user to ZITADEL. After the user has logged in it will be redirected back to your redirectURI set in Auth Module and Console. Make sure both correspond, otherwise ZITADEL will throw an error.
 
 ```ts
 import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
 
-export default class AuthService {
-    private authConfig!: AuthConfig;
+export class AuthenticationService {
     private _authenticated: boolean = false;
     private readonly _authenticationChanged: BehaviorSubject<
         boolean
@@ -62,6 +65,7 @@ export default class AuthService {
 
     constructor(
         private oauthService: OAuthService,
+        private authConfig: AuthConfig,
         private statehandler: StatehandlerService,
     ) { }
 
@@ -77,7 +81,10 @@ export default class AuthService {
         return from(this.oauthService.loadUserProfile());
     }
 
-    public async authenticate(): Promise<boolean> {
+    public async authenticate(
+        setState: boolean = true,
+    ): Promise<boolean> {
+        console.log('auth');
         this.oauthService.configure(this.authConfig);
 
         this.oauthService.strictDiscoveryDocumentValidation = false;
@@ -85,7 +92,7 @@ export default class AuthService {
 
         this._authenticated = this.oauthService.hasValidAccessToken();
 
-        if (!this.oauthService.hasValidIdToken() || !this.authenticated || partialConfig || force) {
+        if (!this.oauthService.hasValidIdToken() || !this.authenticated) {
             const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
             this.oauthService.initCodeFlow(newState);
         }
@@ -102,6 +109,44 @@ export default class AuthService {
 }
 ```
 
+Our template includes a statehandler service to redirect the user back to the route where he initially came from. It saves the route information to a unique id so that the user can be redirected back after a successful authentication.
+If you don't need such a behaviour you can escape the following lines from the `authenticate()` method above.
+```ts
+...
+const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
+...
+```
+
+If you decide to use it provide the service in the `app.module` and make sure it gets initialized first using angulars `APP_INITIALIZER`.
+
+```ts
+
+const stateHandlerFn = (stateHandler: StatehandlerService) => {
+    return () => {
+        return stateHandler.initStateHandler();
+    };
+};
+
+...
+providers: [
+        {
+            provide: APP_INITIALIZER,
+            useFactory: stateHandlerFn,
+            multi: true,
+            deps: [StatehandlerService],
+        },
+        {
+            provide: StatehandlerProcessorService,
+            useClass: StatehandlerProcessorServiceImpl,
+        },
+        {
+            provide: StatehandlerService,
+            useClass: StatehandlerServiceImpl,
+        },
+]
+...
+```
+
 ### Add Login in your application
 
 To login a user, a component or a guard is needed. 
@@ -160,6 +205,16 @@ const routes: Routes = [
 ...
 ```
 
+> Note: To complete the code flow, `authenticate()` needs to be called twice. You may have to add a guard to your callback url to make sure it will complete the flow.
+
+```ts
+    {
+        path: 'auth/callback',
+        canActivate: [AuthGuard],
+        redirectTo: 'user',
+    },
+```
+
 ### Add Logout in your application
 
 The authService and Library also provides a useful function for logging out your users. Just call `auth.signout()` to log out your user. Note that you can also configure your Logout Redirect URL if you want your Users to be redirected after logout.
@@ -182,17 +237,20 @@ To fetch user data, ZITADELS user info endpoint has to be called. This data cont
 Our AuthService already includes a function called getOIDCUser(). You can call it whereever you need this information.
 
 ```ts
-import { AuthService } from 'src/app/services/auth.service.ts';
+import { AuthenticationService } from 'src/app/services/auth.service.ts';
 
-export class SomeComponentWithUserInfo {
-    constructor(public authService: AuthService){}
+public user$: Observable<any>;
+
+constructor(private auth: AuthenticationService) {
+    this.user$ = this.auth.getOIDCUser();
 }
 ```
 
 and in your html
 
 ```html
-<div *ngIf="(authService.getOIDCUser | async) as oidcInfo">
-    <p>{{oidcInfo | json}}</p>
+<div *ngIf="user$ | async as user">
+    <p>{{user | json}}</p>
 </div>
-```
+```
+