diff --git a/app/_components/scope-picker.tsx b/app/_components/scope-picker.tsx new file mode 100644 index 000000000..782e1f9ea --- /dev/null +++ b/app/_components/scope-picker.tsx @@ -0,0 +1,122 @@ +"use client"; + +import { useState } from "react"; + +interface Tool { + name: string; + scopes: string[]; +} + +interface ScopePickerProps { + tools: Tool[]; +} + +export default function ScopePicker({ tools }: ScopePickerProps) { + const [selectedTools, setSelectedTools] = useState>(new Set()); + + const toggleTool = (toolName: string) => { + const newSelected = new Set(selectedTools); + if (newSelected.has(toolName)) { + newSelected.delete(toolName); + } else { + newSelected.add(toolName); + } + setSelectedTools(newSelected); + }; + + const selectAll = () => { + setSelectedTools(new Set(tools.map((t) => t.name))); + }; + + const clearAll = () => { + setSelectedTools(new Set()); + }; + + // Get unique scopes from selected tools + const requiredScopes = Array.from( + new Set( + tools.filter((t) => selectedTools.has(t.name)).flatMap((t) => t.scopes) + ) + ).sort(); + + return ( +
+
+
+

+ Scope calculator +

+
+ + +
+
+

+ Select the tools you plan to use to see the required OAuth scopes. +

+
+ +
+
+ {tools.map((tool) => ( + + ))} +
+ +
+

+ Required scopes{" "} + {selectedTools.size > 0 && ( + + ({requiredScopes.length}) + + )} +

+ {requiredScopes.length > 0 ? ( +
    + {requiredScopes.map((scope) => ( +
  • + {scope} +
    • + ))} +
+ ) : ( +

+ Select tools above to see required scopes +

+ )} +
+
+
+ ); +} diff --git a/app/en/home/auth-providers/google/page.mdx b/app/en/home/auth-providers/google/page.mdx index 7c43ce697..866ee0ad3 100644 --- a/app/en/home/auth-providers/google/page.mdx +++ b/app/en/home/auth-providers/google/page.mdx @@ -22,6 +22,57 @@ This auth provider is used by: ## Configuring Google auth +You can either use Arcade's default Google OAuth provider (fastest way to get started), or configure your own Google OAuth provider for production. + +## Arcade's default Google OAuth provider + +Arcade provides a default Google OAuth provider (the Arcade-managed Google app) that you can use to quickly get started. This provider supports a fixed set of scopes and is shared across all Arcade users. + +### Supported scopes + +The default Arcade Google OAuth provider supports the following scopes: + +- `https://www.googleapis.com/auth/calendar.readonly` +- `https://www.googleapis.com/auth/calendar.events` +- `https://www.googleapis.com/auth/calendar.events.readonly` +- `https://www.googleapis.com/auth/calendar.settings.readonly` +- `https://www.googleapis.com/auth/contacts` +- `https://www.googleapis.com/auth/contacts.readonly` +- `https://www.googleapis.com/auth/drive.file` +- `https://www.googleapis.com/auth/gmail.readonly` +- `https://www.googleapis.com/auth/gmail.compose` +- `https://www.googleapis.com/auth/gmail.send` +- `https://www.googleapis.com/auth/gmail.modify` +- `https://www.googleapis.com/auth/gmail.labels` +- `https://www.googleapis.com/auth/userinfo.email` +- `https://www.googleapis.com/auth/userinfo.profile` +- `openid` + + + If you try to use a scope that is not in this list with the default Arcade Google provider, you will get a `400 invalid authorization challenge: requesting unsupported scopes` error. For example, scopes like `https://www.googleapis.com/auth/drive.readonly` are not supported. + + To use scopes beyond this list, you must create your own Google OAuth provider (see below). + + +### Limitations + +The default provider has some limitations: + +- **Fixed scope list**: You can only use the scopes listed above +- **Shared rate limits**: All Arcade users share the same rate limits +- **Arcade branding**: Your users will see "Arcade" as the requesting application + + + For production use, we strongly recommend creating your own Google OAuth provider. This gives you: + + - Full control over which scopes to request + - Dedicated rate limits for your application + - Your own branding in the OAuth consent screen + - Better security and compliance with your organization's policies + + +## Configuring your own Google OAuth provider + When using your own app credentials, make sure you configure your project to use a [custom user @@ -40,6 +91,7 @@ Before showing how to configure your Google app credentials, let's go through th - Follow Google's guide to [setting up OAuth credentials](https://support.google.com/cloud/answer/6158849?hl=en) - Choose the [scopes](https://developers.google.com/identity/protocols/oauth2/scopes) (permissions) you need for your app - At a minimum, you must enable these scopes: + - `https://www.googleapis.com/auth/userinfo.email` - `https://www.googleapis.com/auth/userinfo.profile` - Add the redirect URL generated by Arcade (see below) to the Authorized redirect URIs list @@ -47,7 +99,7 @@ Before showing how to configure your Google app credentials, let's go through th Next, add the Google app to Arcade. -## Configuring your own Google Auth Provider in Arcade +### Setting up your Google OAuth provider in Arcade diff --git a/app/en/home/landing-page.tsx b/app/en/home/landing-page.tsx index 90a4d2dcb..c59341eb7 100644 --- a/app/en/home/landing-page.tsx +++ b/app/en/home/landing-page.tsx @@ -40,10 +40,10 @@ export function LandingPage() {