Skip to content

Commit b024f84

Browse files
wassimoovinckr
authored andcommitted
chore: update dependencies and improve README for React authentication example
1 parent 6ba8d39 commit b024f84

File tree

6 files changed

+918
-35
lines changed

6 files changed

+918
-35
lines changed

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

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,39 @@
11
# Ory React Authentication Example
22

3-
This project demonstrates how to integrate Ory authentication into a React
4-
application built with Vite and TypeScript.
3+
This example demonstrates how to implement authentication in a React.js
4+
application built with Vite and TypeScript using Ory.
55

6-
## Project Setup
6+
## Prerequisites
7+
8+
- Node.js installed on your machine
9+
- An Ory Network account with a project set up
10+
- Your Ory Project ID
11+
12+
## Getting Started
13+
14+
### 1. Install Dependencies
15+
16+
First, install the necessary dependencies by running:
717

818
```bash
9-
# Install dependencies
1019
npm install
20+
```
1121

12-
# Start the development server
22+
### 2. Start the Application
23+
24+
You can start the application with:
25+
26+
```bash
1327
npm run dev
1428
```
1529

1630
Your application will be running at
1731
[http://localhost:5173](http://localhost:5173).
1832

19-
## Connecting to Ory
33+
### 3. Run the Ory Tunnel
2034

21-
To get your application running locally with Ory APIs on the same domain, use
22-
the Ory Tunnel - a development tool bundled with Ory CLI:
35+
To ensure cookies are on the same domain, run the Ory Tunnel with your project
36+
ID:
2337

2438
```bash
2539
# Set your Ory project URL
@@ -30,7 +44,7 @@ npx @ory/cli tunnel --dev http://localhost:5173
3044
```
3145

3246
This will make Ory APIs available at `http://localhost:4000`, which is the URL
33-
used as the `baseUrl` in the Ory SDK configuration.
47+
used as the `basePath` in the Ory SDK configuration.
3448

3549
## Making API Calls
3650

@@ -39,7 +53,7 @@ server. To run the API server:
3953

4054
```bash
4155
# Navigate to the API directory
42-
cd api
56+
cd src/api
4357

4458
# Install dependencies if needed
4559
npm install
@@ -54,7 +68,8 @@ Ory to authenticate requests.
5468
## Project Structure
5569

5670
- `src/App.tsx` - Basic authentication example
57-
- `src/AppWithAPI.tsx` - Authentication with API integration example
71+
- `src/AppWithApi.tsx` - Authentication with API integration example
72+
- `src/api/index.js` - Express.js API server example
5873

5974
## Available Scripts
6075

@@ -77,3 +92,12 @@ To deploy this application to production:
7792
2. Deploy the API server (e.g., on Heroku)
7893
3. Configure a custom domain for your Ory project to match your application
7994
domain
95+
96+
These three components must be hosted on the same top-level domain as they were
97+
on your local machine:
98+
99+
| Component | Production | Local |
100+
| --------------- | --------------- | -------------- |
101+
| Single Page App | www.example.org | localhost:5173 |
102+
| API | api.example.org | localhost:8081 |
103+
| Ory | ory.example.org | localhost:4000 |

code-examples/protect-page-login/react/package-lock.json

Lines changed: 17 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

code-examples/protect-page-login/react/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
},
1212
"dependencies": {
1313
"@ory/cli": "^1.1.0",
14-
"@ory/client-fetch": "^1.19.0",
15-
"react": "^19.0.0",
16-
"react-dom": "^19.0.0"
14+
"@ory/client-fetch": "^1.22.11",
15+
"react": "^19.2.0",
16+
"react-dom": "^19.2.0"
1717
},
1818
"devDependencies": {
1919
"@eslint/js": "^9.21.0",

0 commit comments

Comments
 (0)