Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions code-examples/protect-page-login/react/README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,39 @@
# Ory React Authentication Example

This project demonstrates how to integrate Ory authentication into a React
application built with Vite and TypeScript.
This example demonstrates how to implement authentication in a React.js
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This example demonstrates how to implement authentication in a React.js
This example demonstrates how to implement authentication in a React

nit but I think the official name is React, also see https://react.dev/

application built with Vite and TypeScript using Ory.

## Project Setup
## Prerequisites

- Node.js installed on your machine
- An Ory Network account with a project set up
- Your Ory Project ID

## Getting Started
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Getting Started
## Get started

please always use sentence casing and active form in headings - see README.md


### 1. Install Dependencies
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 1. Install Dependencies
### 1. Install dependencies


First, install the necessary dependencies by running:

```bash
# Install dependencies
npm install
```

# Start the development server
### 2. Start the Application
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 2. Start the Application
### 2. Start the application


You can start the application with:

```bash
npm run dev
```

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

## Connecting to Ory
### 3. Run the Ory Tunnel

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

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

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

## Making API Calls
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Making API Calls
## Making API calls


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

```bash
# Navigate to the API directory
cd api
cd src/api

# Install dependencies if needed
npm install
Expand All @@ -54,7 +68,8 @@ Ory to authenticate requests.
## Project Structure
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Project Structure
## Project structure


- `src/App.tsx` - Basic authentication example
- `src/AppWithAPI.tsx` - Authentication with API integration example
- `src/AppWithApi.tsx` - Authentication with API integration example
- `src/api/index.js` - Express.js API server example

## Available Scripts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Available Scripts
## Available scripts


Expand All @@ -77,3 +92,12 @@ To deploy this application to production:
2. Deploy the API server (e.g., on Heroku)
3. Configure a custom domain for your Ory project to match your application
domain

These three components must be hosted on the same top-level domain as they were
on your local machine:

| Component | Production | Local |
| --------------- | --------------- | -------------- |
| Single Page App | www.example.org | localhost:5173 |
| API | api.example.org | localhost:8081 |
| Ory | ory.example.org | localhost:4000 |
34 changes: 17 additions & 17 deletions code-examples/protect-page-login/react/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions code-examples/protect-page-login/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
},
"dependencies": {
"@ory/cli": "^1.1.0",
"@ory/client-fetch": "^1.19.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"@ory/client-fetch": "^1.22.11",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
Expand Down
Loading
Loading