Single page applications and rendering private pages

Question

I have two different account types in my application [user, admin], the two log in from the same page on the website: http://example.com/login, the log-in page sends the entered email and password to the server, the server then replies back with 200 OK HTTP code.

Now, the front-end of the Admin contains pages that a regular user should not see (think of the CMS pages), these pages must only be rendered to the admin, and shouldn't be bundled in the code and served to the regular users, even if their browsers will not render them.

because the front end of the Admin holds API endpoints that shouldn't go public (even though hitting them requires authentication).

Is it possible to make the server decide which pages (components) it should serve back to the client based on the user role in a single-page React application? Is that available in Next JS or something like that?

I found that my question was similar to this one Is it insecure to include your login page in your single page application?, but I thought that this question deserves its own thread, because it's critically important and doesn't seem to be answered well on the internet anyway

Using `react-router-dom` you can make use of a wrapper to redirect non auth users to wherever you like, in this case `/login`. https://stackoverflow.com/questions/69923420/how-to-use-private-route-in-react-router-domv6 — Fer Toasted, Mar 29 '22 at 19:50
but the problem is that the code of the private pages will be served to the user either way. I don't want to allow the regular users to "imagine" what the admin panel looks like and what features it provides. hope that clarifies my point :D — Normal, Mar 29 '22 at 19:51
With nextjs I'd make use of cookies and a `_middleware`: https://nextjs.org/docs/middleware. If the middleware gets an active cookie, it will let user get in, otherwise it can be redirected. — Fer Toasted, Mar 29 '22 at 19:59
A 'single-page React app' means the server has no say in how the routes are used after delivering the entire bundle on load. You might want to look at server rendered React instead, using Next.js for example, or perhaps splitting your user and admin UI into two separate apps and delivering them in separate bundles after login. Honestly though, the browser is inherently insecure - worrying about people digging through minified React code to try and "rebuild" your UI is probably wasted energy. Anything that potentially sensitive should be requested from a heavily locked down backend service. — lawrence-witt, Mar 29 '22 at 20:02

score 0 · Answer 1 · answered Mar 29 '22 at 20:01

For a Nextjs auth implementation with cookies and _middleware would look something like this:

export function middleware(req) {
  const activeSession = req.headers.get('cookie');
  const url = req.nextUrl.clone();

  if (activeSession) {
    if (req.nextUrl.pathname === '/login') {
      url.pathname = '/';
      return NextResponse.redirect(url);
    }
    return NextResponse.next();
  }

  url.pathname = '/login';
  return NextResponse.rewrite(url);
}

You can set any cookie using any of the following methods:

https://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth

Single page applications and rendering private pages

1 Answers1