How does this code enable the redirection flow?

Viewed 105

I have a frontend www.myfrontend.tech and a backend www.mybackend.io. My previous developer managed to realize third-party authentications (like Microsoft) with PassportJS. But when looking at his code, I could not understand the flow and how the code enables this. Here is the code:

In the .conf of nginx of www.myfrontend.tech:

upstream mybackend {
   server www.mybackend.io:443;
}

server {
    location ~ /socialLoginSuccess {                                                                                            
        rewrite ^ '/#/socialLoginSuccess' redirect;
    }

    location ~ /auth/(.*) {                                                                                            
        proxy_pass  https://mybackend/front/auth/$1?$query_string;
        proxy_set_header Host www.myfrontend.tech;
    }
    ... ...
}

In frontend/src/router.tsx of www.myfrontend.tech in ReactJS:

function RouterConfig({ history }: any) {
  return (
    <ConnectedRouter history={history}>
      <Layout>
        <Switch>
          <Route path="/socialLoginSuccess">
            <SocialLoginSuccess />
          </Route>
          ... ...

In app.js of www.mybackend.io in NodeJS+ExpressJS+PassportJS:

var _front = require('./routes/front');
app.use('/front', _front);

In routes/front.js of www.mybackend.io:

router.get('/auth/microsoft', passport.authenticate('microsoft', { scope: ['User.Read'] }));
router.get('/auth/microsoft/callback', passport.authenticate('microsoft', {
  successRedirect: '/auth/signinSuccess',
  failureRedirect: '/auth/signinFailure',
  failureFlash: true
}))

router.get('/auth/signinSuccess', function (req, res, next) {
  res.redirect("/socialLoginSuccess");
})

In passport.module.js:

var Microsoft = (function() {
  function Microsoft() {}
  Microsoft.prototype.enable = function() {
    var MicrosoftStrategy = require("passport-microsoft").Strategy;
    passport.use(
      "microsoft",
      new MicrosoftStrategy(
        {
          clientID: keys.MICROSOFT_CLIENT_ID,
          clientSecret: keys.MICROSOFT_CLIENT_SECRET,
          callbackURL: `/auth/microsoft/callback`
        },
        this.loginSuccessfully
      )
    );
  };
  return Microsoft;
})();

During tests of this authentication, I can see in the address bar www.myfrontend.tech/auth/google and www.myfrontend.tech/#/socialLoginSuccess after signing in.

My question is, for example, where successRedirect: '/auth/signinSuccess' goes (backend or frontend)? and where does res.redirect("/socialLoginSuccess") go? How was it enabled by the code?

1 Answers

The flow:

  1. User go to www.myfrontend.tech/auth/microsoft (forwarded to https://mybackend.io/front/auth/microsoft on the backend, since it matches location ~ /auth/(.*) on your nginx configuration)
  2. It will redirect to Microsoft auth page
  3. After user clicked authorize, it will redirected to the callback URL on your Microsoft Oauth App, which in your case is www.frontend.tech/auth/microsoft/callback (forwarded to https://mybackend.io/front/auth/microsoft/callback on the backend, since it matches location ~ /auth/(.*) on your nginx configuration)
  4. On that callback, passport middleware checks if the authorization succeed or not, if it is, it will redirect to successRedirect URI, which is www.frontend.tech/auth/signinSuccess (forwarded to https://mybackend.io/front/auth/signinSuccess on the backend, since it matches location ~ /auth/(.*) on your nginx configuration)
  5. Express app handle auth/signinSuccess success call, and redirects to /socialLoginSuccess, since /socialLoginSuccess location matches location ~ /socialLoginSuccess on your Nginx configuration (not location ~ /auth/(.*) therefor there's no proxy pass), it will be redirected to www.frontend.tech/#/socialLoginSuccess (by the rewrite ^ '/#/socialLoginSuccess' redirect;)
  6. Since it's redirected to www.frontend.tech/#/socialLoginSuccess, it's now being handled by React router

And to answer your questions:

  1. successRedirect will go to your front end, so it will be www.myfrontend.tech/auth/signinSuccess, but since you have proxy configuration on Nginx, and it matches location ~ /auth/(.*), it's being forwarded to www.mybackend.io/front/auth/signinSuccess (read more about reverse proxy)
  2. res.redirect("/socialLoginSuccess") will redirect you to www.frontend.tech/#/socialLoginSuccess, the reason is mentioned on the 5th flow above
Related