React + JWT

import React, { useState } from 'react';
import Hello from './Hello';

const Login = () => {
    const [user, setUser] = useState({username: '', password: ''});
    const [isAuthenticated, setAuth] = useState(false);

    const handleChange = (event) => {
        setUser({...user, [event.target.name] : event.target.value})
    }

    const login = () => {
        fetch("http://localhost:8080/login", 
        {
            method : "POST",
            headers : {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(user)
        })
        .then(response => response.json())
        .then(responseJSON => {
            const jwttoken = responseJSON.token;
            if (jwttoken !== null) {
                sessionStorage.setItem("jwttoken", jwttoken);
                setAuth(true);
            }
        })
        .catch(error => console.error(error))
    }

    if (isAuthenticated) {
        return(
            <div>
                <Hello />
            </div>  
        );
    }
    else {
        return(
            <div>
                <input type="text" name="username" onChange={handleChange} /><br />
                <input type="password" name="password" onChange={handleChange} /><br />
                <button onClick={login}>Login</button>
            </div>
        );
    }

}

export default Login;

import React, { useState } from 'react';

import Hello from './Hello';

​

const Login = () => {

    const [user, setUser] = useState({username: '', password: ''});

    const [isAuthenticated, setAuth] = useState(false);

​

    const handleChange = (event) => {

        setUser({...user, [event.target.name] : event.target.value})

    }

​

    const login = () => {

        fetch("http://localhost:8080/login", 

        {

            method : "POST",

            headers : {

                'Content-Type' : 'application/json'

            },

            body: JSON.stringify(user)

        })

        .then(response => response.json())

        .then(responseJSON => {

            const jwttoken = responseJSON.token;

            if (jwttoken !== null) {

                sessionStorage.setItem("jwttoken", jwttoken);

                setAuth(true);

            }

        })

        .catch(error => console.error(error))

    }

​

    if (isAuthenticated) {

        return(

            <div>

                <Hello />

            </div>  

        );

    }

    else {

        return(

            <div>

                <input type="text" name="username" onChange={handleChange} /><br />

                <input type="password" name="password" onChange={handleChange} /><br />

                <button onClick={login}>Login</button>

            </div>

        );

    }

​

}

​

export default Login;

import React, { useLayoutEffect, useState } from 'react';
import Login from './Login';

const Hello = () => {
    const [greeting, setGreeting] = useState("");
    const [isAuthenticated, setAuth] = useState(false);

    useLayoutEffect(() => {
        hello();
    });

    const hello = () => {
        const jwttoken = sessionStorage.getItem("jwttoken");
        fetch("http://localhost:8080/hello",
        {
            method : "POST",
            headers : {
                'Authorization' : 'Bearer ' + jwttoken
            },
        })
        .then(response => {
            if (response.status === 200) {
                setAuth(true);
                return response.json();
            }
            sessionStorage.setItem("jwttoken", "");
            setAuth(false);
            return null;
        })
        .then(responseJSON => {
            if (responseJSON) {
                setGreeting(responseJSON.greeting);
            }
        })
        .catch(error => console.error(error))
    }

    if (isAuthenticated) {
        return(
            <div>
                From Server : {greeting} 
            </div>
        );
    }
    else {
        return(
            <div>
                <Login />
            </div>
        );
    }
}

export default Hello;

import React, { useLayoutEffect, useState } from 'react';

import Login from './Login';

​

const Hello = () => {

    const [greeting, setGreeting] = useState("");

    const [isAuthenticated, setAuth] = useState(false);

​

    useLayoutEffect(() => {

        hello();

    });

​

    const hello = () => {

        const jwttoken = sessionStorage.getItem("jwttoken");

        fetch("http://localhost:8080/hello",

        {

            method : "POST",

            headers : {

                'Authorization' : 'Bearer ' + jwttoken

            },

        })

        .then(response => {

            if (response.status === 200) {

                setAuth(true);

                return response.json();

            }

            sessionStorage.setItem("jwttoken", "");

            setAuth(false);

            return null;

        })

        .then(responseJSON => {

            if (responseJSON) {

                setGreeting(responseJSON.greeting);

            }

        })

        .catch(error => console.error(error))

    }

​

    if (isAuthenticated) {

        return(

            <div>

                From Server : {greeting} 

            </div>

        );

    }

    else {

        return(

            <div>

                <Login />

            </div>

        );

    }

}

​

export default Hello;