docs: improve react guide (#1532)

* docs: add missing project flag * docs: update guide
ory · Sep 7, 2023 · 4f961e3 · 4f961e3
1 parent 484cde5
commit 4f961e3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/code-examples/protect-page-login/react/package-lock.json b/code-examples/protect-page-login/react/package-lock.json
diff --git a/code-examples/protect-page-login/react/package.json b/code-examples/protect-page-login/react/package.json
@@ -30,7 +30,7 @@
     }
   },
   "dependencies": {
-    "@ory/client": "~1.0.2",
+    "@ory/client": "~1.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/code-examples/protect-page-login/react/src/App.tsx b/code-examples/protect-page-login/react/src/App.tsx
@@ -22,8 +22,8 @@ function App() {
   const [logoutUrl, setLogoutUrl] = useState<string | undefined>()
 
   // Returns either the email or the username depending on the user's Identity Schema
-  const getUserName = (identity: Identity) =>
-    identity.traits.email || identity.traits.username
+  const getUserName = (identity?: Identity) =>
+    identity?.traits.email || identity?.traits.username
 
   // highlight-end
 

diff --git a/docs/getting-started/integrate-auth/25_react.mdx b/docs/getting-started/integrate-auth/25_react.mdx
@@ -66,7 +66,15 @@ happens Ory APIs might not be able to read the cookies sent by your app.
 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!
 
+First, set up the Ory SDK URL which you can find in the [Ory Console](https://console.ory.sh/projects/current/developers/guides)
+
 ```shell-session
+export ORY_SDK_URL=https://{project.slug}.projects.oryapis.com
+```
+
+and then start the Ory Tunnel:
+
+```
 npx @ory/cli tunnel --dev http://localhost:3000
 ```