How to integrate SSO?

[juicemia]

I'm posting here what I also posted on Reddit here.

Hi everybody. I'm going to attempt to port over an AngularJS application to React (this is just going to be a POC to see if it's worth doing the full thing).

One of the things I'm wondering is how SSO works with apps created with create-react-app.

Our AngularJS SPA is served from an app server written in Go, so everything is happening within the same origin. I would like to keep the same architecture because I don't think it makes a lot of sense to have a completely separate API for things related specifically to the app, like its authentication.

However, create-react-app doesn't support development builds or just starting a watch task that rebuilds the code without actually running a webpack server for development. So for development, there's no way to integrate any SSO.

I can't be the only person with this problem so I'm wondering how other people are handling this.

[stofolus]

I have a solution to this. I might not be a great solution but it works.

When deploying our CRA app we protect it and all APIs with oauth authentication in our proxy. So to be able to make API calls when testing I've set up a custom proxy like this.

src/setupProxy.js (We use alot of different services on different paths. That's why there's a loop) https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

const config = require("../proxy.json");
const proxy = require("http-proxy-middleware");

const paths = [
  "/api",
];

module.exports = function(app) {
  paths.forEach(path => {
    app.use(
      proxy(path, {
        target: config.url,
        changeOrigin: true,
        headers: { cookie: config.cookies },
        onError: error => console.log(error)
      })
    );
  });
};

proxy.json (This file is ignored to prevent someone from pushing secrets)

{
  "url": "https://test-site.example.com",
  "cookies": "oauth_cookie=XXXXXXXXXXX
}

Whenever someone clones our repository they create a proxy.json by copying a template file and then you sign in to the server (prod, test, local) you want to run your application against and copy the cookie from your browser into the cookies field. Again this probably isn't the best way to do this but it's at least a working solution