htlstp.if.scre

# Authentication

---
#### JWT

![](assets/authentication/jwt-sequence.png)

----
#### Token

![](assets/authentication/jwt-structure.png)

----
#### `login`/`logout`

```typescript
login(username: string, password: string) {
  return this.httpClient
    .post<{ token: string }>(`${this.baseUrl}/token`, 
        { username: username, password: password })
    .pipe(
      tap(response => {
        localStorage.setItem(AuthService.tokenKey, response.token);
        this._user.set(username);
      })
    );
}
```

```typescript
logout(): void {
  localStorage.removeItem(AuthService.tokenKey);
  this._user.set('');
  this.router.navigate(['/login']);
}
```

----
#### Interceptor

```typescript
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  if (!authService.isLoggedIn())
      return next(req);
  const cloned = req.clone({
    headers: req.headers.set('Authorization', 
        `Bearer ${authService.getToken()}`)
  });
  return next(cloned);
};
```

---
#### OAuth

![](./assets/authentication/oauth-motivation.png)

----
#### Flow

![](./assets/authentication/oauth.png)

note: warum nicht gleich den token? Apps könnten Browser-URL mitlesen

----
#### Vorteile

* beschränkte Rechte

* Passwort bleibt beim Authentication-Service

* Single-Sign-On

* SRP - unterschiedliche Services für auth und Dienste

* Jederzeit widerrufbar

---
#### Intercept Attack
![](./assets/authentication/attack.png)

----
#### PKCE

![](./assets/authentication/pkce-small.png)

```python
code_verifier = get_random_string()
code_challenge = SHA256(code_verifier)
```

```http request
GET /authorize?
    client_id=...&scope=...&response_type=code&redirect_uri=target&
    code_challenge=base64url(code_challenge)&
    code_challenge_method=S256
```

```http request
POST /token
    
client_id=...&redirect_uri=...&code=acode&code_verifier=verifier
```

----

![](./assets/authentication/pkce.png)