SPIKE: Proof of concept to show auth using Ory Network & Ory JavaScript SDK

[paigen11]

Problem Context

Simple POC to show how we can use the Ory Network (Ory's hosted version) and the Ory JavaScript SDK to authenticate with the Airnote application.

Changes

Screenshot (if applicable)

airnote-auth-poc.mov

Testing

To test locally, follow these steps:

For best results, open an incognito browser for testing (sometimes other cookies stored in already existing browser sessions can cause issues)

1. Run the following command in a terminal export ORY_SDK_URL=<INSERT_ORY_NETWORK_URL_HERE>
2. Then this command npx @ory/cli tunnel --dev http://localhost:5173
3. In a separate terminal window run this command npm run dev
4. Open the browser at http://localhost:5173
5. See the Airnote dashboard and a # link in the nav bar and on the main page. Click either link
6. See that you're redirected to an Ory # screen at http://localhost:4000, # or # as a new user.
7. After successful # see that you're redirected back to the Airnote app and the nav bar's # link is replaced with "Hi, <full_name>" instead as is the message on the homepage where the # button was
8. Click the Sign Out button on the homepage
9. See the homepage and nav bar switch back to # links after sign out is complete

Any other related PRs

Ticket(s)

[netlify]

✅ Deploy Preview for airnote-live ready!

Name	Link
🔨 Latest commit	acf0cee
🔍 Latest deploy log	https://app.netlify.com/sites/airnote-live/deploys/65df9316d4d1a60008909527
😎 Deploy Preview	https://deploy-preview-71--airnote-live.netlify.app/quickstart
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.