How to Redirect the User to Another Page After Login Using JavaScript Fetch API?

In the code provided, the JavaScript fetch() method is used to send a POST request to a backend endpoint with a token obtained from Google. Upon validation of the token in the backend, a RedirectResponse is returned with a status code of 303. However, the redirect does not occur in the browser.

Option 1: Returning RedirectResponse

The fetch() function follows redirect responses by default. Therefore, you can use the Response.redirected and Response.url properties in the fetch() response to manually redirect the user.

Working Example:

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
  redirect: 'follow'
})
.then(res => {
  if (res.redirected) {
    window.location.href = res.url;
  } else {
    // Handle non-redirect responses
  }
})

Option 2: Returning JSON Response with Redirect URL

Alternatively, the backend can return a JSON response containing the redirect URL. On the frontend, you can check for the "url" key in the response and redirect the user accordingly.

Working Example:

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
})
.then(res => res.json())
.then(data => {
  if (data.url) {
    window.location.href = data.url;
  } else {
    // Handle non-redirect responses
  }
})

Option 3: Using HTML

If using fetch() is not required, you can use a traditional HTML form with a submit button. When the form is submitted, the browser will automatically handle the redirect if a RedirectResponse is returned from the server.