Certainly! Below is an example of an

App.tsx

file for a React application that handles the Ory login flow and, upon successful authentication, redirects the user back to

<http://localhost:5173>

. This implementation is based on the official Ory documentation for integrating authentication into a React app. It checks for a valid session and, if not present, redirects to the Ory login UI. After login, the user is redirected back to your app at

localhost:5173

using the

return_to

parameter.

tsx import { useState, useEffect } from "react" import { FrontendApi, Configuration, Session } from "@ory/client-fetch"  const basePath = import.meta.env.VITE_ORY_SDK_URL || "<http://localhost:4000>" const returnTo = "<http://localhost:5173>"  const ory = new FrontendApi(   new Configuration({     basePath,     credentials: "include",   }), )  function App() {   const [session, setSession] = useState<Session | null>(null)   const [logoutUrl, setLogoutUrl] = useState<string | null>(null)   const [loading, setLoading] = useState(true)    useEffect(() => {     const fetchSession = async () => {       try {         // Try to get the current session         const session = await ory.toSession()         setSession(session)         try {           const { logout_url } = await ory.createBrowserLogoutFlow()           setLogoutUrl(logout_url)         } catch (logoutError) {           console.error("Error creating logout flow:", logoutError)         }       } catch (err) {         // No valid session, redirect to Ory login UI with return_to         window.location.href =           `${basePath}/self-service/login/browser?return_to=${encodeURIComponent(returnTo)}`       } finally {         setLoading(false)       }     }     fetchSession()   }, [])    return (     <div className="main">       <main className="container">         {loading ? (           <div className="title">Loading...</div>         ) : session?.identity ? (           <div className="protected-content">             <div className="header">               <h1 className="title">Welcome!</h1>               <a                 href={logoutUrl || "#"}                 data-testid="logout"                 className="logout-button"               >                 Logout               </a>             </div>             <div className="session-info">               <h2 className="subtitle">Session Information</h2>               <pre>{JSON.stringify(session.identity.traits || {}, null, 2)}</pre>             </div>           </div>         ) : null}       </main>     </div>   ) }  export default App

Key points: - The app checks for a valid session on mount. - If no session is found, it redirects to the Ory login UI, specifying

return_to=<http://localhost:5173>

so the user is sent back after login. - On successful login, the session info is displayed and a logout link is provided. This approach is directly supported by Ory and matches the recommended integration pattern for React apps using Ory Network or self-hosted Ory Kratos, as shown in the official documentation [Integrate authentication into React + API](https://www.ory.sh/docs/getting-started/integrate-auth/react#validate-and-login) and [Sign in](https://www.ory.sh/docs/identities/get-started/sign-in).