Spring Cloud Gateway and Authorization Server with React Web App

$ npm run dev

import './App.css'
import {AuthProvider} from "./hooks/useAuth.tsx";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import HomePage from "./pages/Home.tsx";
import LoginPage from "./pages/Login.tsx";
import PostLoginPage from "./pages/PostLogin.tsx";
import ProfilePage from "./pages/Profile.tsx";
import ProtectedRoute from "./components/ProtectedRoute.tsx";
import PostLogoutPage from "./pages/PostLogout.tsx";


const App: React.FC = () => {
    return (
        <BrowserRouter>
            <AuthProvider>
                <Routes>
                    {/*<Route element={<PrivateRoutes/>}>*/}
                    {/*    <Route path="/" element={<HomePage/>}/>*/}
                    {/*</Route>*/}
                    <Route path="/" element={<ProtectedRoute><HomePage/></ProtectedRoute>}/>
                    <Route path="/login" element={<LoginPage/>}/>
                    <Route path="/post-login" element={<PostLoginPage/>}/>
                    <Route path="/post-logout" element={<PostLogoutPage/>}/>
                    <Route path="/profile" element={<ProtectedRoute><ProfilePage/></ProtectedRoute>}/>
                </Routes>
            </AuthProvider>
        </BrowserRouter>
    )
}

export default App

import {useState} from 'react';
import {UserType} from "../types/User";

export const useLocalStorage = (key: string, initialValue: (UserType | string | boolean | null)) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.log(error);
            return initialValue;
        }
    });

    const setValue = (value: string) => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.log(error);
        }
    };

    return [storedValue, setValue];
}

import {createContext, ReactNode, useContext} from 'react';
import {useLocalStorage} from "./useLocalStorage.tsx";

type Props = {
    children: ReactNode;
}

type AuthContextType = {
    authenticated: boolean;
    username: string,
    setAuthenticated: (value: boolean) => void;
    setUsername: (value: string) => void;
}

const initialAuthContext: AuthContextType = {
    authenticated: false,
    setAuthenticated: () => {},
    username: '',
    setUsername: () => {}
}

const AuthContext = createContext<AuthContextType>(initialAuthContext);

const AuthProvider = ({ children }: Props) => {

    const [authenticated, setAuthenticated] = useLocalStorage('authenticated', false)
    const [username, setUsername] = useLocalStorage('username', '')

    const value = {
        authenticated,
        setAuthenticated,
        username,
        setUsername
    };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

const useAuth = () => {
  return useContext(AuthContext);
}

export { AuthContext, AuthProvider, useAuth };

import {useEffect} from "react";

function LoginPage() {
    const url = `${process.env.NSA2_GATEWAY_URL}/user/login`

    useEffect(() => {
        console.log('onLoad')
        window.location.href = url
    }, [url]);

    return (
        <div>
            <h1>Redirecting to OAuth2 Server</h1>
        </div>
    );

}

export default LoginPage;

@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    @Value("${app.auth.post-login-redirect}")
    private String postLoginRedirect;

    @GetMapping("/login")
    public void login(HttpServletRequest request, HttpServletResponse response) throws IOException {
        var cookies = request.getCookies();

        if(cookies != null) {
            log.debug("=====> cookies: {}", Arrays.asList(cookies));
        }

        log.debug("Redirecting to: {}", postLoginRedirect);
        response.sendRedirect(postLoginRedirect);
    }

    @GetMapping("/username")
    public Map<String, String> username(Authentication authentication) {
        String username = authentication.getName();
        log.info("username: {}",username);
        return Map.of("username", username);
    }
}

import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useLocalStorage} from "../hooks/useLocalStorage.tsx";


interface UsernameResponseModel {
    username: string,
}



function PostLoginPage() {

    const [authenticated, setAuthenticated] = useLocalStorage('authenticated', false);
    const [username, setUsername] = useLocalStorage('username', '')


    const [loaded, setLoaded] = useState(false)
    // const {setAuthenticated, setUsername} = useContext(AuthContext)
    const navigate = useNavigate()

    useEffect(() => {
        const loadUsername = async () => {
            const response = await fetch(`${process.env.NSA2_GATEWAY_URL}/user/username`, {
                method: 'GET',
                credentials: "include",
                headers: {
                    "Content-Type": "application/json",
                    "Origin": `${process.env.ORIGIN}`,
                }
            })
            const json = await response.json() as UsernameResponseModel
            if(response.ok) {
                const _username = json.username
                const _authenticated = _username !== null && _username.length > 0

                setUsername(_username)
                setAuthenticated(_authenticated)

                setLoaded(true)
                navigate('/')
            } else {
                setLoaded(false)
                navigate('/login')
            }
        }

        loadUsername()



    // }, [loaded, authenticated, username])
    }, [])


    return (
        <div>
            {/*<h1>Post Login Page</h1>*/}
        </div>
    );
}

export default PostLoginPage;

import {useLocalStorage} from "../hooks/useLocalStorage.tsx";
import {useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";


interface Csrf {
    headerName: string,
    parameterName: string,
    token: string,
}

function HomePage() {
    const [username] = useLocalStorage('username', '')

    const navigate = useNavigate()

    const viewProfile = (event: React.MouseEvent<HTMLAnchorElement>) => {
        event.preventDefault()

        navigate('/profile')
    }

    const initialCsrf = {parameterName:'', headerName: '', token: ''}
    const [csrf, setCsrf] = useState(initialCsrf)

    useEffect(() => {

        const loadCsrf = async () => {
            const response = await fetch('http://nsa2-gateway:8080/csrf', {
                method: 'GET',
                credentials: 'include',
                headers: {
                    "Content-Type": "application/json",
                    "Origin": "http://nsa2-gateway:3000",
                }
            })

            const json = await response.json() as Csrf

            console.log("json: ", json)

            if (response.ok) {
                setCsrf(json)
            }
        }

        loadCsrf()


    }, [])



    return (
        <div>
            <div><h1>NSA2 Sample Application</h1></div>
            <div>
                <h3>Signed as <a href="#" onClick={viewProfile}>{username}</a> </h3>
            </div>
            <div>
                <form action={`${process.env.NSA2_GATEWAY_URL}/logout?_csrf=${csrf.token}`} method={'POST'}>
                    <input type={'SUBMIT'} value={'Logout'}/>
                </form>
            </div>
            {/*<CsrfProvider csrf={_csrf}><LogoutForm/></CsrfProvider>*/}
        </div>
    )

}

export default HomePage;

import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useLocalStorage} from "../hooks/useLocalStorage.tsx";


interface ProfileModel {
    sub: string,
    birthdate: string,
    gender: string,
    email: string,
    roles: string[],
    name: string
}


function ProfilePage() {


    const navigate = useNavigate();

    const goHome = (event: React.MouseEvent<HTMLAnchorElement>)=> {
        event.preventDefault()
        navigate('/')
    }

    const [username] = useLocalStorage('username', '')

    const initialProfileModel: ProfileModel = {
        sub: username,
        birthdate: '',
        gender: '',
        email: '',
        roles: [],
        name: ''
    }

    const [profile, setProfile] = useState(initialProfileModel)

    useEffect(() => {
        const loadProfile = async() => {
            const response = await fetch(`${process.env.NSA2_GATEWAY_URL}/user/profile`, {
                method: 'GET',
                credentials: 'include',
                headers: {
                    "Content-Type": "application/json",
                    "Origin": `${process.env.ORIGIN}`,
                }
            })

            const json = await response.json() as ProfileModel

            console.log("json: ", json)

            if(response.ok) {
                setProfile(json)
            }
        }

        loadProfile()

    }, [])

  return (
    <div>
      <h1>Profile</h1>
        <table width={400} >
            <tr>
                <th>Username</th>
                <td align={'left'}>{profile.sub}</td>
            </tr>
            <tr>
                <th>Email</th>
                <td align={'left'}>{profile.email}</td>
            </tr>
            <tr>
                <th>Display name</th>
                <td align={'left'}>{profile.name}</td>
            </tr>
            <tr>
                <th>Date of Birth</th>
                <td align={'left'}>{profile.birthdate}</td>
            </tr>
            <tr>
                <th>Gender</th>
                <td align={'left'}>{profile.gender}</td>
            </tr>
            <tr>
                <th>Roles</th>
                <td align={'left'}>{profile.roles.join(", ")}</td>
            </tr>
        </table>
        {/*<form>*/}
        {/*    <label>*/}
        {/*        Username: <input size={50} name="username" readOnly={true} value={profile.sub}/>*/}
        {/*    </label>*/}
        {/*    <br/>*/}
        {/*    <label>*/}
        {/*        Display name: <input size={50} name="displayName" readOnly={true} value={profile.name}/>*/}
        {/*    </label>*/}
        {/*    <br/>*/}
        {/*    <label>*/}
        {/*        Email: <input size={50} name="email" readOnly={true} value={profile.email}/>*/}
        {/*    </label>*/}
        {/*    <br/>*/}
        {/*    <label>*/}
        {/*        Gender: <input size={50} name="gender" readOnly={true} value={profile.gender}/>*/}
        {/*    </label>*/}
        {/*    <br/>*/}
        {/*    <label>*/}
        {/*        Date of Birth: <input size={50} name="dob" readOnly={true} value={profile.birthdate}/>*/}
        {/*    </label>*/}
        {/*    <br/>*/}
        {/*</form>*/}

        <div style={{height: 40}}>
        </div>
        <div>
            <a href='#' onClick={goHome}>Go Homepage</a>
        </div>
    </div>
  );
}

export default ProfilePage;

import {useEffect} from "react";
// import {AuthContext, useAuth} from "../hooks/useAuth.tsx";
import { useNavigate} from "react-router-dom";
import {useLocalStorage} from "../hooks/useLocalStorage.tsx";

function PostLogoutPage() {
    const [authenticated, setAuthenticated] = useLocalStorage('authenticated', false);
    const [username, setUsername] = useLocalStorage('username', '')

    const navigate = useNavigate()

    useEffect(() => {
        setAuthenticated(false)
        setUsername('')

        navigate('/login')

    }, [])

    return (<>
            <div>
                <h1>Logged out</h1>
            </div>
        </>
    );
}

export default PostLogoutPage;

@RestController
public class CsrfController {
    @GetMapping("/csrf")
    public CsrfToken csrf(CsrfToken csrfToken) {
        return csrfToken;
    }
}

@Configuration(proxyBeanMethods = false)
@EnableWebSecurity
@Slf4j
public class GatewaySecurityConfig {
    // @formatter:off
    @Bean
    @Order(2)
    public SecurityFilterChain securityFilterChain(HttpSecurity http, ClientRegistrationRepository clientRegistrationRepository) throws Exception {
        http
            .addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class)
            .authorizeHttpRequests(authorize ->
                authorize
                    .requestMatchers("/jwks", "/logged-out", "/login/oauth2/code/nsa2").permitAll()
                    .requestMatchers("/actuator/health", "/actuator/health/liveness", "/actuator/health/readiness").permitAll()
                    .anyRequest().authenticated()
            )


            .oauth2Login(oauth2Login ->
                oauth2Login.loginPage("/oauth2/authorization/nsa2"))
            .oauth2Client(Customizer.withDefaults())
            // logout configuration
            .logout(logout-> {
                logout.logoutUrl("/logout")
                        .logoutSuccessHandler(oidcLogoutSuccessHandler(clientRegistrationRepository));
            });

            // This is not working as expected
//        http.csrf(csrf -> csrf
//                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
//                .csrfTokenRequestHandler(new SpaCsrfTokenRequestHandler())
//        );

        return http.build();
    }
    // @formatter:on

    private LogoutSuccessHandler oidcLogoutSuccessHandler(ClientRegistrationRepository clientRegistrationRepository) {
        OidcClientInitiatedLogoutSuccessHandler oidcLogoutSuccessHandler =
                new OidcClientInitiatedLogoutSuccessHandler(clientRegistrationRepository);

        // Set the location that the End-User's User Agent will be redirected to
        // after the logout has been performed at the Provider
        oidcLogoutSuccessHandler.setPostLogoutRedirectUri("{baseUrl}/logged-out");

        return oidcLogoutSuccessHandler;
    }
}

@Controller
@Slf4j
@RequestMapping("")
public class LogoutController {

    @Value("${app.auth.post-logout-redirect}")
    private String postLogoutRedirect;

    @GetMapping("/logged-out")
    public void loggedOut(HttpServletResponse response) throws IOException {
        log.info("logged-out");
        log.info("postLogoutRedirect: {}", postLogoutRedirect);

        response.sendRedirect(postLogoutRedirect);
    }
}