Tag 25 Spring Security 2

Spring Security (Frontend)

Änderungen im Frontend

• LoginPage erstellen (bestenfalls mit form, useState für einen User)
• login function erstellen (axios.post mit body=undefined in einem custom-hook)

function login(username: string, password: string) {
        return axios.post("/api/users/login", undefined, {auth: {username, password}})
            .then(response => {
                setUser(response.data)
            })
    }

• Route in App.tsx erstellen und als props die login-funktion mitgeben (axios Rückgabe als Promise<void> deklarieren, somit können wir in der LoginPage .then() nochmals verwenden)
• In LoginPage, bei onSubmit die login-funktion aus den props aufrufen und nach erfolgreichem login auf die Hauptseite weiterleiten

props.onLogin(username, password)
            .then(() => {navigate("/todos")})

• neuer File ProtextedRoutes.tsx (kann man auch anders nennen) erstellen, dieser soll gewisse Routes nur für angemeldete User verfügbar machen (braucht einen User als props)
• Boolean anlegen der überprüft ob der Nutzer angemeldet ist

const authenticated: boolean = props.user !== undefined && props.user !== 'anonymousUser'

• Return gibt ein <Outlet/> aus wenn ein User angemeldet ist, wenn nicht wird auf die LoginPage weitergeleitet (Outlet ist ein Platzhalter für alle Sub-Routes)

    return (
        authenticated ? <Outlet /> : <Navigate to={"/login"} />
    )

• In App.tsx neue Route erstellen, welche <ProtectedRoutes/> darstellt (alle Routes die innerhalb dieses Route-tags stehen werden dann als Outlet in ProtectedRoutes.tsx verwendet, somit nur Zugriff auf diese Routes wenn man angemeldet ist)

<Route element={<ProtectedRoutes user={user}/>}>
    ...
    {/* sub-routes kommen hier rein */}
    ...
</Route>

Änderungen im Backend

• Request im Controller erstellen (Request-Typ egal, empfohlen POST)

    @PostMapping("/login")
    public String login() {
        return SecurityContextHolder.getContext().getAuthentication().getName();
    }

• Login-Fenster von Spring-Security deaktivieren im SecurityConfig file
• Cookie-Erstellung im SecurityConfig file auf ALWAYS setzen, damit ein Cookie erstellt wird und der User angemeldet bleibt (folgende Zeile im return der filterChain-Methode hinzufügen, bestenfalls nach der csrf-Zeile)

.sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.ALWAYS))

Clean Code

Info - Link: https://www.freecodecamp.org/news/clean-coding-for-beginners/

KISS = Keep It Simple and Stupid // Keep It Super Simple

Wichtigste Punkte bei Clean Code:

1. Erweiterbar
2. Wiederverwertbar
3. Aussagekräftige Namen für Methoden/Klassen/Funktionen
4. Aufteilung in kleinen Schritten
5. DRY - Don't Repeat yourself
6. You Ain't Gonna Need It - nur das machen, was man gerade braucht
7. Immunability für Teile des Codes, die nicht verändert werden sollen