How to redirect the user to another page after login using JavaScript Fetch API?
Question:
Using the following JavaScript code, I make a request to obtain the firebase token, and then a POST request to my FastAPI backend, using the JavaScript fetch() method, in order to login the user. Then, in the backend, as can be seen below, I check whether or not the token is valid, and if so, return a redirect (i.e., RedirectResponse) to another webpage. The problem is that the redirect in the browser does not work, and the previous page remains.
function loginGoogle() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
//.currentUser.getToken(provider)
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.idToken;
// The signed-in user info.
var user = result.user;
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
firebase.auth().currentUser.getIdToken(true).then(function(idToken) {
console.log(idToken)
const token = idToken;
const headers = new Headers({
'x-auth-token': token
});
const request = new Request('http://localhost:8000/login', {
method: 'POST',
headers: headers
});
fetch(request)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
})
The endpoint in the backend that returns the login page that contains the HTML code with the button and the loginGoogle function:
@router.get("/entrar")
def login(request: Request):
return templates.TemplateResponse("login.html", {"request": request})
I call this POST endpoint and then a redirect to /1 which is a GET route, and with status_code being 303, which is how @tiangolo specifies it in the doc to redirect from a POST to a GET route.
@router.post("/login")
async def login(x_auth_token: str = Header(None)):
valid_token = auth.verify_id_token(x_auth_token)
if valid_token:
print("token validado")
return RedirectResponse(url="/1", status_code=status.HTTP_303_SEE_OTHER)
else:
return {"msg": "Token no recibido"}
This is the GET endpoint to which the user should be redirected, but it doesn’t:
@app.get("/1")
def get_landing(request: Request):
return templates.TemplateResponse("landing.html", {"request": request})
Swagger screenshot of testing the /login endpoint:
Answers:
Option 1 – Returning RedirectResponse
When using fetch() to make an HTTP request to a server that responds with a RedirectResponse, the redirect response will be automatically followed on client side (as explained here), as the redirect mode is set to follow in fetch() method by default. This means that the user won’t be redirected to the new URL, but rather fetch() will follow that redirect behind the scenes and return the response from the redirect URL. You might expected that setting redirect to manual instead would allow you to get the redirect URL (contained in the Location response header) and manually navigate to the new page, but this is not the case, as described here.
However, you could still use the default redirect mode in the fetch() request, i.e., follow (no need to manually specify it, as it is already set by default—in the example below, it is manually defined for clarity purposes only), and then use Response.redirected to check whether or not the response is the result of a request that you made which was redirected. If so, you can use Response.url, which will return the "final URL obtained after any redirects", and using JavaScript’s window.location.href, you can redirect the user to the target URL (i.e., the redirect page).
Instead of window.location.href, one can also use window.location.replace(). The difference from setting the href property value is that when using the location.replace() method, after navigating to the given URL, the current page will not be saved in session history—meaning the user won’t be able to use the back button to navigate to it.
Working Example
app.py
from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.responses import RedirectResponse
from fastapi.security import OAuth2PasswordRequestForm
app = FastAPI()
templates = Jinja2Templates(directory='templates')
@app.get('/')
async def index(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
# perform some validation, using data.username and data.password
credentials_valid = True
if credentials_valid:
return RedirectResponse(url='/welcome',status_code=status.HTTP_302_FOUND)
else:
return 'Validation failed'
@app.get('/welcome')
async def welcome():
return 'You have been successfully redirected'
templates/index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // Cancel the default action
var formElement = document.getElementById('myForm');
var data = new FormData(formElement);
fetch('/login', {
method: 'POST',
redirect: 'follow',
body: data,
})
.then(res => {
if (res.redirected) {
window.location.href = res.url; // or, location.replace(res.url);
return;
}
else
return res.text();
})
.then(data => {
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error(error);
});
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="[email protected]"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="pa55w0rd"><br><br>
<input type="submit" value="Submit" class="submit">
</form>
<div id="response"></div>
</body>
</html>
Option 2 – Returning JSON response containing the redirect URL
Instead of returning a RedirectResponse from the server, you could have the server returning a normal JSON response with the URL included in the JSON object. On client side, you could check whether the JSON object returned from the server—as a result of the fetch() request—includes the url key, and if so, retrieve its value and redirect the user to the target URL, using JavaScript’s window.location.href or window.location.replace().
Alternatively, one could add the redirect URL to a custom response header on server side (see examples here and here on how to set a response header in FastAPI), and access it on client side, after posting the request using fetch(), as shown here (Note that if you were doing a cross-origin request, you would have to set the Access-Control-Expose-Headers response header on server side (see examples here and here, as well as FastAPI’s CORSMiddleware documentation on how to use the expose_headers argument), indicating that your custom response header, which includes the redirect URL, should be made available to JS scripts running in the browser, since only the CORS-safelisted response headers are exposed by default).
Working Example
app.py
from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.security import OAuth2PasswordRequestForm
app = FastAPI()
templates = Jinja2Templates(directory='templates')
@app.get('/')
async def index(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
# perform some validation, using data.username and data.password
credentials_valid = True
if credentials_valid:
return {'url': '/welcome'}
else:
return 'Validation failed'
@app.get('/welcome')
async def welcome():
return 'You have been successfully redirected'
templates/index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // Cancel the default action
var formElement = document.getElementById('myForm');
var data = new FormData(formElement);
fetch('/login', {
method: 'POST',
body: data,
})
.then(res => res.json())
.then(data => {
if (data.url)
window.location.href = data.url; // or, location.replace(data.url);
else
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error(error);
});
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="[email protected]"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="pa55w0rd"><br><br>
<input type="submit" value="Submit" class="submit">
</form>
<div id="response"></div>
</body>
</html>
Option 3 – Using HTML <form> in the frontend
If using a fetch() request is not a requirement for your project, you could instead use a normal HTML <form> and have the user click on the submit button to send the POST request to the server. In this way, using a RedirectResponse on server side (as demonstrated in Option 1) would result in having the user on client side automatically be redirected to the target URL, without any further action.
Working examples can be found in this answer, as well as this answer and this answer.
Using the following JavaScript code, I make a request to obtain the firebase token, and then a POST request to my FastAPI backend, using the JavaScript fetch() method, in order to login the user. Then, in the backend, as can be seen below, I check whether or not the token is valid, and if so, return a redirect (i.e., RedirectResponse) to another webpage. The problem is that the redirect in the browser does not work, and the previous page remains.
function loginGoogle() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
//.currentUser.getToken(provider)
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
var token = credential.idToken;
// The signed-in user info.
var user = result.user;
// ...
})
.catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
firebase.auth().currentUser.getIdToken(true).then(function(idToken) {
console.log(idToken)
const token = idToken;
const headers = new Headers({
'x-auth-token': token
});
const request = new Request('http://localhost:8000/login', {
method: 'POST',
headers: headers
});
fetch(request)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
})
The endpoint in the backend that returns the login page that contains the HTML code with the button and the loginGoogle function:
@router.get("/entrar")
def login(request: Request):
return templates.TemplateResponse("login.html", {"request": request})
I call this POST endpoint and then a redirect to /1 which is a GET route, and with status_code being 303, which is how @tiangolo specifies it in the doc to redirect from a POST to a GET route.
@router.post("/login")
async def login(x_auth_token: str = Header(None)):
valid_token = auth.verify_id_token(x_auth_token)
if valid_token:
print("token validado")
return RedirectResponse(url="/1", status_code=status.HTTP_303_SEE_OTHER)
else:
return {"msg": "Token no recibido"}
This is the GET endpoint to which the user should be redirected, but it doesn’t:
@app.get("/1")
def get_landing(request: Request):
return templates.TemplateResponse("landing.html", {"request": request})
Swagger screenshot of testing the /login endpoint:
Option 1 – Returning RedirectResponse
When using fetch() to make an HTTP request to a server that responds with a RedirectResponse, the redirect response will be automatically followed on client side (as explained here), as the redirect mode is set to follow in fetch() method by default. This means that the user won’t be redirected to the new URL, but rather fetch() will follow that redirect behind the scenes and return the response from the redirect URL. You might expected that setting redirect to manual instead would allow you to get the redirect URL (contained in the Location response header) and manually navigate to the new page, but this is not the case, as described here.
However, you could still use the default redirect mode in the fetch() request, i.e., follow (no need to manually specify it, as it is already set by default—in the example below, it is manually defined for clarity purposes only), and then use Response.redirected to check whether or not the response is the result of a request that you made which was redirected. If so, you can use Response.url, which will return the "final URL obtained after any redirects", and using JavaScript’s window.location.href, you can redirect the user to the target URL (i.e., the redirect page).
Instead of window.location.href, one can also use window.location.replace(). The difference from setting the href property value is that when using the location.replace() method, after navigating to the given URL, the current page will not be saved in session history—meaning the user won’t be able to use the back button to navigate to it.
Working Example
app.py
from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.responses import RedirectResponse
from fastapi.security import OAuth2PasswordRequestForm
app = FastAPI()
templates = Jinja2Templates(directory='templates')
@app.get('/')
async def index(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
# perform some validation, using data.username and data.password
credentials_valid = True
if credentials_valid:
return RedirectResponse(url='/welcome',status_code=status.HTTP_302_FOUND)
else:
return 'Validation failed'
@app.get('/welcome')
async def welcome():
return 'You have been successfully redirected'
templates/index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // Cancel the default action
var formElement = document.getElementById('myForm');
var data = new FormData(formElement);
fetch('/login', {
method: 'POST',
redirect: 'follow',
body: data,
})
.then(res => {
if (res.redirected) {
window.location.href = res.url; // or, location.replace(res.url);
return;
}
else
return res.text();
})
.then(data => {
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error(error);
});
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="[email protected]"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="pa55w0rd"><br><br>
<input type="submit" value="Submit" class="submit">
</form>
<div id="response"></div>
</body>
</html>
Option 2 – Returning JSON response containing the redirect URL
Instead of returning a RedirectResponse from the server, you could have the server returning a normal JSON response with the URL included in the JSON object. On client side, you could check whether the JSON object returned from the server—as a result of the fetch() request—includes the url key, and if so, retrieve its value and redirect the user to the target URL, using JavaScript’s window.location.href or window.location.replace().
Alternatively, one could add the redirect URL to a custom response header on server side (see examples here and here on how to set a response header in FastAPI), and access it on client side, after posting the request using fetch(), as shown here (Note that if you were doing a cross-origin request, you would have to set the Access-Control-Expose-Headers response header on server side (see examples here and here, as well as FastAPI’s CORSMiddleware documentation on how to use the expose_headers argument), indicating that your custom response header, which includes the redirect URL, should be made available to JS scripts running in the browser, since only the CORS-safelisted response headers are exposed by default).
Working Example
app.py
from fastapi import FastAPI, Request, status, Depends
from fastapi.templating import Jinja2Templates
from fastapi.security import OAuth2PasswordRequestForm
app = FastAPI()
templates = Jinja2Templates(directory='templates')
@app.get('/')
async def index(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
@app.post('/login')
async def login(data: OAuth2PasswordRequestForm = Depends()):
# perform some validation, using data.username and data.password
credentials_valid = True
if credentials_valid:
return {'url': '/welcome'}
else:
return 'Validation failed'
@app.get('/welcome')
async def welcome():
return 'You have been successfully redirected'
templates/index.html
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // Cancel the default action
var formElement = document.getElementById('myForm');
var data = new FormData(formElement);
fetch('/login', {
method: 'POST',
body: data,
})
.then(res => res.json())
.then(data => {
if (data.url)
window.location.href = data.url; // or, location.replace(data.url);
else
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error(error);
});
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" value="[email protected]"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="pa55w0rd"><br><br>
<input type="submit" value="Submit" class="submit">
</form>
<div id="response"></div>
</body>
</html>
Option 3 – Using HTML <form> in the frontend
If using a fetch() request is not a requirement for your project, you could instead use a normal HTML <form> and have the user click on the submit button to send the POST request to the server. In this way, using a RedirectResponse on server side (as demonstrated in Option 1) would result in having the user on client side automatically be redirected to the target URL, without any further action.
Working examples can be found in this answer, as well as this answer and this answer.