docs/content/docs/auth-configuration/white-labeling.mdx
There are four places where Composio branding shows up during authentication:
| Where | What users see | How to fix |
|---|---|---|
| Connect Link page | Composio logo and name on the hosted auth page | Change logo + app title in dashboard |
| OAuth consent screen | "Composio wants to access your account" on Google, GitHub, etc. | Use your own OAuth app |
| Outgoing redirect | backend.composio.dev in browser before reaching OAuth provider | Use long_redirect_url option |
| Return redirect | backend.composio.dev flashes when OAuth provider redirects back | Proxy the redirect through your domain |
The Connect Link is the hosted page your users see when connecting their accounts. By default it shows Composio branding.
<Video src="/videos/connect-link-branding.mp4" autoPlay />To replace it with your own branding:
This applies to all Connect Link flows across all toolkits. Each project has one logo and app title, so if you need different branding per product, use separate projects.
<Callout> Customizing the Connect Link only changes the Composio-hosted page. For OAuth toolkits like Gmail, Google Sheets, GitHub, and Slack, users still see a consent screen saying "Composio wants to access your account." To change that, and to remove the "Secured by Composio" badge, set up your own OAuth app as described [below](#using-your-own-oauth-apps). </Callout> <Callout type="warn" title="Troubleshooting"> - **"Secured by Composio" badge won't go away:** This badge is removed when you use your own OAuth app. See [Using your own OAuth apps](#using-your-own-oauth-apps). - **Logo doesn't appear after uploading:** Clear browser cache or try incognito. - **Upload fails with "failed to fetch":** Retry or use a smaller image. </Callout>OAuth toolkits like Google and GitHub show a consent screen that says which app is requesting access. By default this reads "Composio wants to connect to your account." To show your app name instead, register your own OAuth app and tell Composio to use it. This is done by creating a custom auth config with your own credentials. See when to use your own OAuth apps.
<Callout type="info" title="You don't need this for every toolkit"> Only white-label toolkits where users see a consent screen (Google, GitHub, Slack, etc.). Toolkits that use API keys don't show consent screens, so there's nothing to white-label. You can mix and match freely. </Callout> <Steps> <Step> <StepTitle>Create an OAuth app in the toolkit's developer portal</StepTitle>Register a new OAuth app with the toolkit. Set the callback URL to:
https://backend.composio.dev/api/v3/toolkits/auth/callback
You'll get a Client ID and Client Secret.
Step-by-step guides: Google | Slack | HubSpot | All toolkits </Step>
<Step> <StepTitle>Create an auth config in Composio</StepTitle>In the Composio dashboard:
Copy the auth config ID (e.g., ac_1234abcd).
Pass your custom auth config ID when initiating a connection:
<Tabs groupId="language" items={['Python', 'TypeScript']} persist> <Tab value="Python">
from composio import Composio
composio = Composio(api_key="your_api_key")
# White-labeled: users see your brand on the consent screen
github_conn = composio.connected_accounts.initiate(
user_id="user_123",
auth_config_id="ac_your_github_config",
)
print(f"Redirect to: {github_conn.redirect_url}")
For toolkits you haven't white-labeled, use the auth config ID from Authentication management in your dashboard. </Step> </Steps>
For development and testing, Composio's managed auth works fine. No OAuth app setup required.
Existing connected accounts are permanently tied to the auth config they were created with. Switching to a custom auth config does not affect them.
By default, when you initiate a connection, Composio returns a shortened redirect URL (backend.composio.dev/api/v3/s/...). The user's browser hits this URL first, then gets redirected to the OAuth provider. This means backend.composio.dev briefly appears in the browser.
To skip this and send users directly to the OAuth provider, pass long_redirect_url: true when initiating the connection:
<Tabs groupId="language" items={['Python', 'TypeScript']} persist> <Tab value="Python">
from composio import Composio
composio = Composio(api_key="your_api_key")
github_conn = composio.connected_accounts.initiate(
user_id="user_123",
auth_config_id="ac_your_github_config",
config={
"auth_scheme": "OAUTH2",
"val": {"status": "INITIALIZING", "long_redirect_url": True},
},
)
print(f"Redirect to: {github_conn.redirect_url}")
The redirect URL returned will point directly to the OAuth provider (e.g., accounts.google.com/o/oauth2/auth?...) instead of going through Composio first.
After the user authorizes, the OAuth provider redirects back through backend.composio.dev so Composio can capture the auth token. Some toolkits also display this URL on the consent screen.
If you need to hide Composio's domain from this return redirect, you can proxy it through your own domain.
<Steps> <Step> <StepTitle>Set the redirect URI to your domain</StepTitle>In your OAuth app's settings, set the authorized redirect URI to your own endpoint:
https://yourdomain.com/api/composio-redirect
This endpoint receives the OAuth callback and immediately 302-redirects it to Composio:
<Tabs groupId="language" items={['Python', 'TypeScript']} persist> <Tab value="Python">
from fastapi import FastAPI, Request
from fastapi.responses import RedirectResponse
app = FastAPI()
@app.get("/api/composio-redirect")
def composio_redirect(request: Request):
composio_url = "https://backend.composio.dev/api/v3/toolkits/auth/callback"
return RedirectResponse(url=f"{composio_url}?{request.url.query}")
export default function handler(req: NextApiRequest, res: NextApiResponse) {
const composioUrl = "https://backend.composio.dev/api/v3/toolkits/auth/callback";
const params = new URLSearchParams(req.query as Record<string, string>);
res.redirect(302, ${composioUrl}?${params.toString()});
}
</Tab>
</Tabs>
<Callout type="warn">
Your endpoint must return a **302 redirect**. Do not follow the redirect server-side or make a fetch call to Composio. The user's browser needs to be redirected so the OAuth flow completes correctly.
</Callout>
</Step>
<Step>
<StepTitle>Update your auth config</StepTitle>
In the Composio dashboard, update your auth config to use your custom redirect URI.
<Figure src="/images/custom-redirect-uri.png" alt="Auth Config Settings" caption="Setting the custom redirect URI in your auth config" size="sm" />
</Step>
</Steps>
Here's how the redirect flow works. Your proxy just forwards the browser redirect to Composio. It never touches the authorization code or token.
```mermaid
flowchart TD
A[Your App] -->|User connects| B["OAuth toolkit (e.g. Google, GitHub)"]
B -->|Redirects user| C[yourdomain.com]
C -->|Forwards redirect| D[backend.composio.dev]
D -.->|Redirects back| A