I have a react project and I wanted to integrate Ory Kratos following this. I have proxied Ory cloud to be able to run locally via

ory proxy --project <http://xyz.projects.oryapis.com|xyz.projects.oryapis.com> --dev <http://localhost:5173>

and my react home page looks like this. However, I cant seem to be redirected to my custom signin page. Here is the code(App.jsx):

import React, { useEffect, useState } from 'react';
import {
  Routes,
  Route,
  useLocation
} from 'react-router-dom';
import { V0alpha2Api, Configuration, Session, Identity } from "@ory/client"
import './css/style.css';
import './charts/ChartjsConfig';

// Import pages
 import Dashboard from './pages/Dashboard';
 import Analytics from './pages/Analytics';
 import PageNotFound from './pages/utility/PageNotFound';
 import Signin from './pages/Signin';
 import Signup from './pages/Signup';


// Get your Ory url from .env
// Or localhost for local development
const basePath = process.env.REACT_APP_ORY_URL || "<http://localhost:4000>"
const ory = new V0alpha2Api(
  new Configuration({
    basePath,
    baseOptions: {
      withCredentials: true,
    },
  }),
)

function App() {

  const [session, setSession] = useState()
  const [logoutUrl, setLogoutUrl] = useState()

  // Returns either the email or the username depending on the user's Identity Schema
  const getUserName = (identity) =>
    identity.traits.email || identity.traits.username
  const location = useLocation();
 // Second, gather session data, if the user is not logged in, redirect to login
  useEffect(() => {
    document.querySelector('html').style.scrollBehavior = 'auto'
    window.scroll({ top: 0 })
    document.querySelector('html').style.scrollBehavior = ''
    ory
    .toSession()
    .then(({ data }) => {
      // User has a session!
      setSession(data)
      ory.createSelfServiceLogoutFlowUrlForBrowsers().then(({ data }) => {
        // Get also the logout url
        setLogoutUrl(data.logout_url)
      })
    })
    .catch((err) => {
      console.error(err)
      // Redirect to login page
      window.location.replace(`${basePath}/signin`)
    })
  }, [location.pathname]); // triggered on route change

  if (!session) {
    // Still loading
    return <h1>Loading...</h1>
  }
  else{
    console.log('...loading pages')
  return (
    <>
      <Routes>
        <Route exact path="/" element={<Dashboard />} />
         <Route path="/dashboard/analytics" element={<Analytics />} />
        <Route path="/dashboard/fintech" element={<Fintech />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>
  );}
}

export default App;

What’s the response code you see on the

window.location.replace

?

Any idea why?

I’ve tried to repro but no luck. Looking up that error code, it seems the page load was stopped. was the tunnel aborted?

No, the tunnel was still connected, what I saw though was that at some poing we could see the ...loading and then it tried to load the page(signin) ..and then this loops again and again non stop