docs: update react quickstart example

code-examples/auth-api/expressjs/index.js

@@ -6,13 +6,12 @@ const cors = require("cors")
 const { FrontendApi, Configuration } = require("@ory/client-fetch")
 
 const app = express()
-
 // highlight-start
 const ory = new FrontendApi(
   new Configuration({
     // Points to the local Ory API server (Ory TunneL).
     basePath: process.env.ORY_URL || "http://localhost:4000",
-    baseOptions: { withCredentials: true },
+    credentials: "include",
   }),
 )
 // highlight-end

code-examples/protect-page-login/react/.gitignore

@@ -1,6 +1,28 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# dependencies
 /node_modules
 /.pnp
 .pnp.js
@@ -18,7 +40,3 @@
 .env.development.local
 .env.test.local
 .env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

code-examples/protect-page-login/react/README.md

@@ -1,69 +1,79 @@
-# Getting Started with Create React App
+# Ory React Authentication Example
 
-This project was bootstrapped with
-[Create React App](https://github.com/facebook/create-react-app).
+This project demonstrates how to integrate Ory authentication into a React
+application built with Vite and TypeScript.
 
-## Available Scripts
+## Project Setup
+
+```bash
+# Install dependencies
+npm install
 
-In the project directory, you can run:
+# Start the development server
+npm run dev
+```
 
-### `npm start`
+Your application will be running at
+[http://localhost:5173](http://localhost:5173).
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Connecting to Ory
 
-To get your application that runs locally and Ory APIs on the same domain, use
-Ory Tunnel - a development tool bundled with Ory CLI. It's like a microservice -
-an authentication API server on your domain!
+To get your application running locally with Ory APIs on the same domain, use
+the Ory Tunnel - a development tool bundled with Ory CLI:
 
-```shell-session
+```bash
+# Set your Ory project URL
 export ORY_SDK_URL=https://{your-project-slug-here}.projects.oryapis.com
-npx @ory/cli tunnel --dev http://localhost:3000
-```
 
-To access Ory's APIs, use URL `http://localhost:4000`
+# Run the tunnel connecting to your React app
+npx @ory/cli tunnel --dev http://localhost:5173
+```
 
-### `npm test`
+This will make Ory APIs available at `http://localhost:4000`, which is the URL
+used as the `baseUrl` in the Ory SDK configuration.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests)
-for more information.
+## Making API Calls
 
-### `npm run build`
+The example also demonstrates how to make authenticated API calls to a backend
+server. To run the API server:
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best
-performance.
+```bash
+# Navigate to the API directory
+cd api
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+# Install dependencies if needed
+npm install
 
-See the section about
-[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
-more information.
+# Start the server
+node index.js
+```
 
-### `npm run eject`
+The API server runs on port 8081 and requires the proper session cookies from
+Ory to authenticate requests.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## Project Structure
 
-If you aren’t satisfied with the build tool and configuration choices, you can
-`eject` at any time. This command will remove the single build dependency from
-your project.
+- `src/App.tsx` - Basic authentication example
+- `src/AppWithAPI.tsx` - Authentication with API integration example
 
-Instead, it will copy all the configuration files and the transitive
-dependencies (webpack, Babel, ESLint, etc) right into your project so you have
-full control over them. All of the commands except `eject` will still work, but
-they will point to the copied scripts so you can tweak them. At this point
-you’re on your own.
+## Available Scripts
 
-You don’t have to ever use `eject`. The curated feature set is suitable for
-small and middle deployments, and you shouldn’t feel obligated to use this
-feature. However we understand that this tool wouldn’t be useful if you couldn’t
-customize it when you are ready for it.
+- `npm run dev` - Start the development server
+- `npm run build` - Build the app for production
+- `npm run preview` - Preview the production build locally
 
 ## Learn More
 
-You can learn more in the
-[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+- [Ory Documentation](https://www.ory.sh/docs)
+- [React Documentation](https://reactjs.org/)
+- [Vite Documentation](https://vitejs.dev/)
+
+## Going to Production
+
+To deploy this application to production:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. Build the React app and deploy it to a hosting service (e.g., Vercel or
+   Netlify)
+2. Deploy the API server (e.g., on Heroku)
+3. Configure a custom domain for your Ory project to match your application
+   domain

code-examples/protect-page-login/react/eslint.config.js

@@ -0,0 +1,28 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

code-examples/protect-page-login/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ory + Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>