From 98fd02013b83fe6d150135fa86e1bb10476f3b9d Mon Sep 17 00:00:00 2001 From: Jonas Platte Date: Fri, 22 Aug 2025 12:26:35 +0200 Subject: [PATCH 1/2] Improve app-portal page - Remove useless self link - Put main example first in own-app-portal section (`SvixProvider` usage after) - Linkify first mention of `svix-react` instead of linking to it after the example --- docs/app-portal.mdx | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/docs/app-portal.mdx b/docs/app-portal.mdx index 7ad4ac4c..26887553 100644 --- a/docs/app-portal.mdx +++ b/docs/app-portal.mdx @@ -23,7 +23,7 @@ For more information on how to use the app portal please refer to the [receiving App portal access is based on short-lived sessions using special magic links. You customers don't need a Svix account, and they don't even need to know that Svix exists. ::: -To give your users access to the [App Portal](./app-portal), just use the [app portal access endpoint](https://api.svix.com/docs#tag/Authentication/operation/v1.authentication.app-portal-access). Calling this endpoint with an `app_id` returns a single-use URL you can just redirect your users to in order to log them into the App Portal. They will stay logged in for a few days or until they log out. +To give your users access to the App Portal, just use the [app portal access endpoint](https://api.svix.com/docs#tag/Authentication/operation/v1.authentication.app-portal-access). Calling this endpoint with an `app_id` returns a single-use URL you can just redirect your users to in order to log them into the App Portal. They will stay logged in for a few days or until they log out. @@ -199,7 +199,7 @@ import "svix-react/style.css"; const SvixEmbed = () => { const [appPortal, setAppPortal] = React.useState(null); - + React.useEffect(() => { // Prerequisite: You'll need an endpoint that returns the App Portal // magic URL (https://api.svix.com/docs#tag/Authentication/operation/v1.authentication.app-portal-access) @@ -259,22 +259,11 @@ http://app.svix.com/login?primaryColorLight=22cc91&primaryColorDark=28bb93&darkM ``` ## Implementing your own Consumer App Portal functionality -You can implement Consumer App Portal functionality into your own dashboard using ergonomic React Hooks provided by the `svix-react` library. This approach allows you to use your own UI structure and components. The hooks are an abstraction over the `svix` JavaScript library and help to handle concerns like paginating over large lists of data, and reloading data. - -Using the hooks requires wrapping your application or components in ``: -```jsx -import { SvixProvider } from 'svix-react' - -export default function App() { - return ( - - {/** your app's components **/} - - ) -} -``` +You can implement Consumer App Portal functionality into your own dashboard using ergonomic React Hooks provided by the [`svix-react`] library. +This approach allows you to use your own UI structure and components. +The hooks are an abstraction over the `svix` JavaScript library and help to handle concerns like paginating over large lists of data, and reloading data. -Then, you can use hooks like `useMessages`: +Here's an example of how to list endpoints using `svix-react`: ```jsx import { useEndpoints } from 'svix-react' @@ -302,7 +291,21 @@ export default function ListEndpoints() { } ``` -To get started and see a full list of hooks, refer to the [`svix-react` NPM package](https://www.npmjs.com/package/svix-react). +Using the hooks requires wrapping your application or components in ``: + +```jsx +import { SvixProvider } from 'svix-react' + +export default function App() { + return ( + + {/** your app's components **/} + + ) +} +``` + +[`svix-react`]: https://www.npmjs.com/package/svix-react ## Read Only Consumer App Portals You can set all Consumer App Portals belonging to an environment to be read only by enabling the Read Only toggle on the Environment Settings page. From 9087094f1c103fb26c74d50ca6263b2661cccaae Mon Sep 17 00:00:00 2001 From: Jonas Platte Date: Fri, 22 Aug 2025 16:35:41 +0200 Subject: [PATCH 2/2] Revert order of code snippets on app portal page --- docs/app-portal.mdx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/app-portal.mdx b/docs/app-portal.mdx index 26887553..89b1e89a 100644 --- a/docs/app-portal.mdx +++ b/docs/app-portal.mdx @@ -263,7 +263,21 @@ You can implement Consumer App Portal functionality into your own dashboard usin This approach allows you to use your own UI structure and components. The hooks are an abstraction over the `svix` JavaScript library and help to handle concerns like paginating over large lists of data, and reloading data. -Here's an example of how to list endpoints using `svix-react`: +Using the hooks requires wrapping your application or components in ``: + +```jsx +import { SvixProvider } from 'svix-react' + +export default function App() { + return ( + + {/** your app's components **/} + + ) +} +``` + +Then, you can use hooks like `useEndpoints`: ```jsx import { useEndpoints } from 'svix-react' @@ -291,20 +305,6 @@ export default function ListEndpoints() { } ``` -Using the hooks requires wrapping your application or components in ``: - -```jsx -import { SvixProvider } from 'svix-react' - -export default function App() { - return ( - - {/** your app's components **/} - - ) -} -``` - [`svix-react`]: https://www.npmjs.com/package/svix-react ## Read Only Consumer App Portals