feat: [AUTH-2296] RBAC Demo App (#8)

* chore: Update Node to v18

* chore: Port over README changes

* chore: Update Stytch package versions, clean old deps

* remove project ID and secret from .env.template

* checkin: NextJS version bump nicities

* checkin: delete all BE API routes

* add .turbo to gitignore

* remove all of lib

* chore: hardcode live and test envs so we don't need stytch npm package

* chore: Port over RBAC functionality

* Use NextJS-configred ESLint

* chore: Remove cookies dep

* Make package non-private

* remove unused form component

* checkin: readme tweaks

* chore: run Next Font codemod

* feat: [AUTH-2296] RBAC Demo App

* remove all of lib

.env.template

@@ -1,5 +1,3 @@
 # The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
 NEXT_PUBLIC_STYTCH_PROJECT_ENV=test
-STYTCH_PROJECT_ID="YOUR_STYTCH_PROJECT_ID"
-STYTCH_SECRET="YOUR_STYTCH_SECRET"
 NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 
 # vercel
 .vercel
+.turbo
 
 # typescript
 *.tsbuildinfo

.nvmrc

@@ -1 +1 @@
-v16.10.0
+v18.19.0

README.md

@@ -8,7 +8,9 @@
 
 This example application demonstrates how one may use Stytch's B2B authentication suite within a Next.js application. The application features a sign-up and login flow powered by Email magic links. On sign-up a new organization is created, and the initial member becomes the admin of that organization. As admin, the member is able to invite others to join the organization, and set up SSO connections via SAML or OIDC.
 
-This project utilizes Stytch's [Node Backend SDK](https://www.npmjs.com/package/stytch) and Stytch's [Frontend JavaScript SDK](https://stytch.com/docs/b2b/sdks/javascript-sdk) to power authentication in the application.
+This project utilizes Stytch's RBAC offering to enforce authorization on Stytch resources as well as custom resources.
+
+This project utilizes Stytch's [NextJS Javascript SDK](https://www.npmjs.com/package/@stytch/nextjs) to power authentication. It uses the UI client for login flows and the headless client for member and SSO connection management after login.
 
 This project was bootstrapped with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).
 
@@ -26,9 +28,24 @@ Follow the steps below to get this application fully functional and running usin
 
    <img width="400" alt="Redirect URLs" src="https://user-images.githubusercontent.com/100632220/220420098-84c78ca3-4e71-46b5-90f1-25afbb571ce2.png">
 
-3. Navigate to [Frontend SDKs](https://stytch.com/dashboard/sdk-configuration) to enable the Frontend SDK and add `http://localhost:3000` as an authorized domain & `http://localhost:3000/{{slug}}/login` as the Organization URL template.
+3. Navigate to [Frontend SDKs](https://stytch.com/dashboard/sdk-configuration) to enable the Frontend SDK and add `http://localhost:3000` as an authorized domain & `http://localhost:3000/{{slug}}/login` as the Organization URL template. You will also need to toggle:
+
+   1. The 'Create Organizations' setting under 'Enabled methods'. This will enable end users to create new organizations when signing up for the application.
+   2. The 'Member actions & permissions' setting under 'Enabled methods'. This will allow the SDK to take various actions on behalf of the logged-in Member as long as they are permitted under the project's RBAC policy.
+
+4. Navigate to [Roles and Permissions](https://stytch.com/dashboard/rbac) to configure the project's RBAC policy. There should already be a "stytch_member" role, which is implicitly granted to all Members, and a "stytch_admin" role.
+
+   1. Click the "Roles" dropdown to navigate to "Resources". Click the "Create new Resource" button and create a resource with the resource ID = "todos". In the "actions" accordion, click the "Add action" button and input the following string: "create delete", which will create two actions. Make sure to save the resource before continuing.
+   2. Go back to the "Roles" page. Click on the "stytch_admin" role. Click "Edit Role". Under "Permissions", click "Assign permissions". In the modal, select "todos" in the resource dropdown, then toggle the "Assign the wildcard..." switch. Click "done", then save the role.
+   3. Go back to the "Roles" page. Click on the "stytch_member" role. Click "Edit Role". In the "permissions" accordion, you'll need to add permissions for 2 different resources. Once you've added both, click "done", then save the role.
+      1. For the "stytch.member" resource, add the following action: "search".
+      2. For the "stytch.sso" resource, add the following action: "get".
+   4. Go back to the "Roles" page. Click the "Create new Role" button and create a role with the role ID = "editor". In the "permissions" accordion, you'll need to add permissions for 3 different resources. Once you've added all 3, click "done", then save the role.
+      1. For the "stytch.member" resource, add the following action: "update.info.name".
+      2. For the "stytch.sso" resource, add the following action: "update".
+      3. For the "todos" resource, add the following action: "create".
 
-4. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys). You will need the `project_id`, `secret`, and `public_token` values found on this page later on.
+5. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys). You will need the `public_token` value found on this page later on.
 
 ### On your machine
 
@@ -40,19 +57,17 @@ cd stytch-b2b-sdk-example
 npm i
 ```
 
-Next, create `.env.local` file by running the command below which copies the contents of `.env.template`.
+Next, create an `.env.local` file by running the command below which copies the contents of `.env.template`.
 
 ```bash
 cp .env.template .env.local
 ```
 
-Open `.env.local` in the text editor of your choice, and set the environment variables using the `project_id`, `secret`, and `public_token` found on [API Keys](https://stytch.com/dashboard/api-keys). Leave the `NEXT_PUBLIC_STYTCH_PROJECT_ENV` value as `test`.
+Open `.env.local` in the text editor of your choice, and set the environment variables using the `public_token` found on [API Keys](https://stytch.com/dashboard/api-keys). Leave the `NEXT_PUBLIC_STYTCH_PROJECT_ENV` value as `test`.
 
 ```
 # This is what a completed .env.local file will look like
 NEXT_PUBLIC_STYTCH_PROJECT_ENV=test
-STYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234
-STYTCH_SECRET=secret-test-12345678901234567890abcdabcd
 NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234
 ```
 
@@ -66,6 +81,44 @@ npm run dev
 
 The application will be available at [`http://localhost:3000`](http://localhost:3000).
 
+## Expected RBAC functionality
+
+See the [RBAC docs](https://stytch.com/docs/b2b/api/rbac-resource-object) and [guide](https://stytch.com/docs/b2b/guides/rbac/overview)
+for more information on Stytch's RBAC offering.
+
+### Resources
+
+This example app will demonstrate how RBAC can be used for both Stytch resources and custom resources.
+The Stytch resources covered by RBAC are members, organizations, and SSO connections.
+The Stytch headless SDK will automatically enforce RBAC permissions on certain endpoints that affect Stytch resources,
+such as member update (`stytch.organizations.member.update()`) or get SSO connections (`stytch.sso.getConnections()`).
+
+The NextJS implementation of our Javascript SDK provides a helpful hook you can use to determine whether or not
+a user can take a specified action - just call `useStytchIsAuthorized` with the specific `resource_id` and `action`.
+This can be helpful when deciding what to display in the UI - for example, disabling a "save" button for updating SAML
+connections if the user does not have update permissions.
+
+The Organization TODO list in this example app is an example of using permissions on a custom resource.
+Note that the TODO list does not persist state, since it doesn't actually make any API calls - it just
+serves to demonstrate the usage of `useStytchIsAuthorized` with non-Stytch resources that you can define
+in your RBAC policy.
+
+### Roles and Permissions
+
+The first member in an organization will automatically be assigned the "stytch_admin" role.
+This role will allow them to invite new members to the organization, update member's names, create SSO connections,
+and update SSO connections. They will also be able to create and delete items in the TODO list, which utilizes Stytch
+custom resources.
+
+Members with the "editor" role will be able to update members' names and update SSO connections,
+but they will not be able to invite new members or create new SSO connections. They will be
+able to add items to the TODO list, but not delete them.
+
+All members automatically have the "stytch_member" role. Members who have only this role
+will be able to view all members and SSO connections in the org, but they will not be able
+to update them or create new ones. They will also not be able to create or delete items in the
+TODO list.
+
 ## Get help and join the community
 
 #### :speech_balloon: Stytch community Slack

components/DiscoveryForm.tsx

@@ -14,6 +14,7 @@ const LoginOrSignupDiscoveryForm = () => {
       products: [B2BProducts.emailMagicLinks],
       sessionOptions: { sessionDurationMinutes: 60 },
       emailMagicLinksOptions: {
+        // window.location.origin is not defined on SSR - we need to wait for CSR to render
         discoveryRedirectURL: `${window.location.origin}/authenticate`,
       },
       authFlowType: AuthFlowType.Discovery,