-
Notifications
You must be signed in to change notification settings - Fork 436
chore: update dependencies and improve README for React authentication example #2356
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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 | ||||||
| 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 | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
please always use sentence casing and active form in headings - see README.md |
||||||
|
|
||||||
| ### 1. Install Dependencies | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| First, install the necessary dependencies by running: | ||||||
|
|
||||||
| ```bash | ||||||
| # Install dependencies | ||||||
| npm install | ||||||
| ``` | ||||||
|
|
||||||
| # Start the development server | ||||||
| ### 2. Start the Application | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| 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 | ||||||
|
|
@@ -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 | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
|
|
@@ -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 | ||||||
|
|
@@ -54,7 +68,8 @@ Ory to authenticate requests. | |||||
| ## Project Structure | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| - `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 | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
|
|
@@ -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 | | ||||||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit but I think the official name is React, also see https://react.dev/