Securing a Single Page Application (SPA) behind "Cloudflare Access"

[tim53]

Hi,

I’m building a React.js Single Page Application and thinking of using Cloudflare Access to secure the site and get users to login. Within the application how can I access the user details?

Thanks

Tim

[Judge]

Either use JWT or the header Cf-Access-Authenticated-User-Email has the user’s email. This header has the same protection as other CF-Initiated headers where it blocks requests that try to impersonate said header, so you can be sure nobody can fake it.

https://developers.cloudflare.com/access/setting-up-access/json-web-token/

In terms of this applying to a static site, the headers are only sent to the server, not the client, so my solution was to have a CF worker set up on a route and within that return the user’s email:

let userEmail = request.headers.get("Cf-Access-Authenticated-User-Email") || '_development';
    if (url.pathname == "/api/myemail") {
        return new Response(userEmail);
    }

[tim53]

thanks very much! I’ll try that out!