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
1019npm install
20+ ```
1121
12- # Start the development server
22+ ### 2. Start the Application
23+
24+ You can start the application with:
25+
26+ ``` bash
1327npm run dev
1428```
1529
1630Your 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
3246This 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
4559npm 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:
77922 . Deploy the API server (e.g., on Heroku)
78933 . 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 |
0 commit comments