Autentizace na straně klienta (React aplikace)¶

Popis logiky autentizace¶

• Uživatel se přihlásí pod svým účtem.

• Klientská aplikace pošle tento požadavek na SPADe aplikaci. Pokud je tento požadavek validní, tj. uživatel opravdu existuje a heslo je správné, pak je zpět odeslán JWT token (https://jwt.io/introduction).

• Klientská aplikace si tento token přečte a uloží jej do cookie. Tento token je od tohoto bodu posílán s každým klientským požadavkem na server v hlavičce, viz obrázek hlavičky níže.
  

• Pouze takto je uživatel považován za autentikováno a může se svobodně pohybovat po aplikaci bez omezení.

Knihovna react-auth-kit¶

• K implementaci této feature byla použita knihovna třetí strany. Knihovna spravuje celý stav autentizace na straně klienta.
• Po přihlášení uživatele tedy knihovna uloží jwt token do cookie a následně poskytne 3 hooky (konkrétně useState), které s tímto tokenem manipulují.
• Následuje ukázka kódu, která používá knihovnu pro přihlášení uživatele.

Přihlášení uživatele

//importujeme useEffect knihovny pro prihlaseni uzivatele
import {useSignIn} from "react-auth-kit";

//komponenta pro prihlaseni uzivatele
const LoginComponent = () => {
    //initneme funkci knihovny
    //ktera udela vsechnu praci s ukladanim tokenu
    const signIn = useSignIn();

    //dummy funkce, ktera pouze demonstruje, jak se knihovna pouziva
    //samotna implementace v kodu je v jadru stejna, pouze je kolem vice omacky
    //pro tuto ukazku nedulezite
    const sampleLogin = async (username:string, password: string) =>{
        //V tomto bode zavolame server s nasim login pozadavkem
        //odpoved serveru je ve formatu jako nasledujici rozepsany objekt
        //tedy vratime nam status (HTTP code) - tim zjistime, jestli se neco nepokazilo
        //zpravu (message) - pro blizsi informace o vysledku informace
        //samotny jwt token (token) - timto tokenem se uzivatel autentikuje s kazdym nasledujicim pozadavkem na server
        const responseWrapper: {message:string; status:number; token:string} = await login(username,password);
        //token muze byt empty string, pokud doslo k chybe prihlaseni
        const accessToken:string = responseWrapper.token;
        if(responseWrapper.status != 200){
        //Zde by byla cast, ktera by vypsala uzivateli chybovou hlasku, protoze se prihlaseni nepovedlo

        }
        //volame samotny useEffect pro ulozeni tokenu do cookie
        signIn({
            //token, ktery ukladame, v nasem pripade promenna accessToken
            // cookie bude mit nazev "token" 
            token:accessToken,
            //jak dlouho token zije (v minutach)
            expiresIn: 3600,
            //typ tokenu, v pripade JWT se jedna o Bearer token
            tokenType: "Bearer",
            // co dalsiho si chceme ulozit, napriklad jmeno uzivatele, nutne to tu byt nemusi
            authState: {userName:username}
        });

    }

}
export default LoginComponent;