docs: update quickstart to use tunnel (ory#2096)

* docs: update quickstart to use tunnel

* docs: update test script to use ory tunne

* fix: use correct base path

* chore: update test ports

* docs: deprecate ory proxy

* fix: add dev flag to tunnel command

* fix: update port

* fix: update port

* fix: tunnel port env for examples

* fix: php redirect url

* fix: add tunnel url env to express example

* fix: markdow syntax formatting

* chore: format

* fix: md syntaxt for formatting

* chore: format

* chore: remove p tags

* fix: resolve feedback

* chore: format

* chore: format

* fix: mermaid url syntax

* chore: remove html elements from callouts

* chore: format

---------

Co-authored-by: vinckr <[email protected]>

Author: christiannwamba

code-examples/protect-page-login/dotnet/entrypoint.sh

@@ -27,13 +27,13 @@ You can start the application with:
 npm run dev
 ```
 
-### 3. Run the Ory Proxy
+### 3. Run the Ory Tunnel
 
-To ensure cookies are on the same domain, run the Ory Proxy with your project
+To ensure cookies are on the same domain, run the Ory Tunnel with your project
 ID:
 
 ```bash
-ORY_PROJECT_ID=<Project_ID> npm run proxy
+ORY_PROJECT_ID=<Project_ID> npm run tunnel
 ```
 
 Replace `<Project_ID>` with your actual Ory Project ID from the Ory Console.

code-examples/protect-page-login/expressjs/README.md

@@ -3,9 +3,10 @@ const app = require("express")()
 const sdk = require("@ory/client-fetch")
 
 // highlight-start
+const basePath = process.env.ORY_SDK_URL || "http://localhost:4000"
 const ory = new sdk.FrontendApi(
   new sdk.Configuration({
-    basePath: process.env.ORY_SDK_URL || "http://localhost:4000/.ory",
+    basePath,
   }),
 )
 // highlight-end
@@ -17,7 +18,7 @@ const requireAuth = async (req, res, next) => {
     req.session = session
     next()
   } catch (error) {
-    res.redirect("/.ory/ui/login")
+    res.redirect(basePath + "/ui/login")
   }
 }
 // highlight-end

code-examples/protect-page-login/expressjs/index.js

@@ -4,7 +4,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "nodemon index.js",
-    "proxy": "ory proxy --project $ORY_PROJECT_ID --port 4000 http://localhost:3000/",
+    "tunnel": "ory tunnel --project $ORY_PROJECT_ID --port 4000 --dev http://localhost:3000",
     "start": "node index.js"
   },
   "keywords": [],

code-examples/protect-page-login/expressjs/package.json

@@ -1,6 +1,3 @@
-// Copyright © 2022 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
 package main
 
 import (
@@ -13,22 +10,26 @@ import (
 )
 
 type App struct {
-	ory *ory.APIClient
+	ory       *ory.APIClient
+	tunnelUrl string
 }
 
 func main() {
-	proxyPort := os.Getenv("PROXY_PORT")
-	if proxyPort == "" {
-		proxyPort = "4000"
+	tunnelPort := os.Getenv("TUNNEL_PORT")
+	if tunnelPort == "" {
+		tunnelPort = "4000"
 	}
 
-	// register a new Ory client with the URL set to the Ory CLI Proxy
-	// we can also read the URL from the env or a config file
+	// Configure Ory client to use tunnel
 	c := ory.NewConfiguration()
-	c.Servers = ory.ServerConfigurations{{URL: fmt.Sprintf("http://localhost:%s/.ory", proxyPort)}}
+	c.Servers = ory.ServerConfigurations{{URL: fmt.Sprintf("http://localhost:%s", tunnelPort)}}
+
+	// Store the tunnel URL for redirects
+	tunnelUrl := fmt.Sprintf("http://localhost:%s", tunnelPort)
 
 	app := &App{
-		ory: ory.NewAPIClient(c),
+		ory:       ory.NewAPIClient(c),
+		tunnelUrl: tunnelUrl,
 	}
 	mux := http.NewServeMux()
 
@@ -41,6 +42,9 @@ func main() {
 	}
 
 	fmt.Printf("Application launched and running on http://127.0.0.1:%s\n", port)
+	fmt.Printf("Make sure to run Ory Tunnel in another terminal:\n")
+	fmt.Printf("npx @ory/cli tunnel --dev http://localhost:%s\n", port)
+
 	// start the server
 	err := http.ListenAndServe(":"+port, mux)
 	if errors.Is(err, http.ErrServerClosed) {

code-examples/protect-page-login/go/main.go

@@ -28,9 +28,11 @@ func (app *App) sessionMiddleware(next http.HandlerFunc) http.HandlerFunc {
 		session, _, err := app.ory.FrontendAPI.ToSession(request.Context()).Cookie(cookies).Execute()
 		// Check if a session exists and if it is active.
 		// You could add your own logic here to check if the session is valid for the specific endpoint, e.g. using the `session.AuthenticatedAt` field.
+		// Redirect to login if session doesn't exist or is inactive
 		if err != nil || (err == nil && !*session.Active) {
-			// redirect the user to the login UI, in this case we use the default browser flow
-			http.Redirect(writer, request, "/.ory/self-service/login/browser", http.StatusSeeOther)
+			log.Printf("No active session, redirecting to login\n")
+			// Redirect to the tunnel URL, not the local app
+			http.Redirect(writer, request, app.tunnelUrl+"/ui/login", http.StatusSeeOther)
 			return
 		}
 
@@ -39,7 +41,6 @@ func (app *App) sessionMiddleware(next http.HandlerFunc) http.HandlerFunc {
 
 		// Continue to the next handler (the dashboard in the simple example).
 		next.ServeHTTP(writer, request.WithContext(ctx))
-		return
 	}
 }
 

code-examples/protect-page-login/go/middleware.go

@@ -1,6 +1,3 @@
-// Copyright © 2022 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
 <?php
 
 class App
@@ -24,7 +21,7 @@ public function validateSession()
         } catch (Exception $e) {
             error_log('Exception when calling toSession: ' . $e->getMessage());
             // this will initialize a new login flow and Kratos will redirect the user to the login UI
-            header("Location: /.ory/self-service/login/browser", true, 303);
+            header("Location: " . $this->tunnelUrl . "/ui/login", true, 303);
             die();
         }
         $this->session = $session;

code-examples/protect-page-login/php/app.php

@@ -1,6 +1,6 @@
 {
   "require": {
-    "ory/client": "^v1.0.2",
+    "ory/client": "^1.20",
     "bramus/router": "^1.6"
   }
 }

code-examples/protect-page-login/php/composer.json

@@ -1,21 +1,19 @@
-// Copyright © 2022 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
 <?php
   require 'vendor/autoload.php';
   require_once 'app.php';
 
   error_reporting(E_ERROR | E_PARSE);
 
-  $proxyPort = getenv("PROXY_PORT");
-  if ($proxyPort == "") $proxyPort = "4000";
+  $tunnelPort = getenv("TUNNEL_PORT");
+if ($tunnelPort == "")
+  $tunnelPort = "4000";
 
   $app = new App;
-  // register a new Ory client with the URL set to the Ory CLI Proxy
-  // we can also read the URL from the env or a config file
-  $config = Ory\Client\Configuration::getDefaultConfiguration()->setHost(sprintf("http://localhost:%s/.ory", $proxyPort));
+  // Configure Ory client to use tunnel port 4000
+  $config = Ory\Client\Configuration::getDefaultConfiguration()->setHost(sprintf("http://localhost:%s", $tunnelPort));
   $app->ory = new Ory\Client\Api\FrontendApi(new GuzzleHttp\Client(), $config);
-
+  // Pass tunnel URL to the App class for redirects
+  $app->tunnelUrl = sprintf("http://localhost:%s", $tunnelPort);
   $router = new \Bramus\Router\Router();
   $router->before('GET', '/', $app->validateSession());
   $router->get('/', $app->printDashboard());