I am creating an social login page with an Access Management (AM) server.
When the user clicks on the login button then I make a fetch() HTTP POST call to the AM server. The AM server generates a 301 redirect response with auth cookies to the social login page. I need to follow this redirect response somehow and show the new content in the web browser.
UI: React.
Request:
POST /api/auth/socialauth/initiate HTTP/1.1
Host example.com
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0)
Accept */*
Accept-Language en-US,en;q=0.5
Accept-Encoding gzip, deflate
origin http://web.example.com:8080
Referer http://web.example.com:8080/myapp/login
Cookie authId=...; NTID=...
Response
HTTP/1.1 307 Temporary Redirect
https://www.facebook.com/dialog/oauth?client_id=...&scope=public_profile%2Cemail&redirect_uri=http%3A%2F%2Fam.example.com%3A8083%2Fopenam%2Foauth2c%2FOAuthProxy.jsp&response_type=code&state=qtrwtidnwdpbft4ctj2e9mv3mjkifqo
React code:
initiateSocialLogin() {
var url = "/api/auth/socialauth/initiate";
fetch(url, { method: 'POST' })
.then(response => {
// HTTP 301 response
// HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
})
.catch(function(err) {
console.info(err + " url: " + url);
});
}
How I can follow the redirect response and show the new content in the web browser?
Request.redirect could be "follow", "error" or "manual".
If it is "follow", fetch() API follows the redirect response (HTTP status code = 301,302,303,307,308).
If it is "error", fetch() API treats the redirect response as an error.
If it is "manual", fetch() API doesn't follow the redirect and returns an opaque-redirect filtered response which wraps the redirect response.
Since you want to redirect after a fetch just use it as
fetch(url, { method: 'POST', redirect: 'follow'})
.then(response => {
// HTTP 301 response
})
.catch(function(err) {
console.info(err + " url: " + url);
});