How does this code enable the redirection flow?
The flow:
- User go to
www.myfrontend.tech/auth/microsoft
(forwarded tohttps://mybackend.io/front/auth/microsoft
on the backend, since it matcheslocation ~ /auth/(.*)
on your nginx configuration) - It will redirect to Microsoft auth page
- 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 tohttps://mybackend.io/front/auth/microsoft/callback
on the backend, since it matcheslocation ~ /auth/(.*)
on your nginx configuration) - On that callback, passport middleware checks if the authorization succeed or not, if it is, it will redirect to
successRedirect
URI, which iswww.frontend.tech/auth/signinSuccess
(forwarded tohttps://mybackend.io/front/auth/signinSuccess
on the backend, since it matcheslocation ~ /auth/(.*)
on your nginx configuration) - Express app handle
auth/signinSuccess
success call, and redirects to/socialLoginSuccess
, since/socialLoginSuccess
location matcheslocation ~ /socialLoginSuccess
on your Nginx configuration (notlocation ~ /auth/(.*)
therefor there's no proxy pass), it will be redirected towww.frontend.tech/#/socialLoginSuccess
(by therewrite ^ '/#/socialLoginSuccess' redirect;
) - Since it's redirected to
www.frontend.tech/#/socialLoginSuccess
, it's now being handled by React router
And to answer your questions:
successRedirect
will go to your front end, so it will bewww.myfrontend.tech/auth/signinSuccess
, but since you have proxy configuration on Nginx, and it matcheslocation ~ /auth/(.*)
, it's being forwarded towww.mybackend.io/front/auth/signinSuccess
(read more about reverse proxy)res.redirect("/socialLoginSuccess")
will redirect you towww.frontend.tech/#/socialLoginSuccess
, the reason is mentioned on the 5th flow above