Skip to content

Commit

Permalink
Add support for CUSTOM_AUTH_SITE_URL (#142)
Browse files Browse the repository at this point in the history
This will allow a custom domain for signin and callback URLs. OAuth providers like Google (which show the domain to users) will use this instead of showing `happy-animal-123.convex.site` in the OAuth consent screen.
  • Loading branch information
dowski authored Dec 17, 2024
1 parent 4debc3a commit 754fdbc
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 8 deletions.
39 changes: 33 additions & 6 deletions docs/pages/advanced.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Aside } from "../components/Aside";
import { Callout } from "nextra/components";

# Advanced: Details

Expand Down Expand Up @@ -34,12 +35,13 @@ Convex Auth follows this logic:
import GitHub from "@auth/core/providers/github";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
providers: [
Resend,
GitHub({ allowDangerousEmailAccountLinking: false }),
],
});
export const { auth, signIn, signOut, store, isAuthenticated } =
convexAuth({
providers: [
Resend,
GitHub({ allowDangerousEmailAccountLinking: false }),
],
});
```

</details>
Expand Down Expand Up @@ -170,3 +172,28 @@ The session documents are created and deleted by Convex Auth.
For this reason if you're tying other documents to sessions, and you don't want
to lose information when the session expires, you should store both the session
ID and the user ID in your other document.

## Custom callback and sign-in URLs

For ease of configuration, Convex Auth defaults to using the builtin
`CONVEX_SITE_URL` value in callback and sign-in URLs. For some OAuth providers
(Google, for example) this can lead to something like
`happy-animal-123.convex.site` showing up to users on the OAuth consent screen.

If you're using a
[custom domain](https://docs.convex.dev/production/hosting/custom#custom-domains)
for your production Convex deployment, you can configure Convex Auth to use that
domain for the sign-in and callback URLs.

With your **Production** deployment selected in the Convex dashboard, navigate
to **Settings -> Environment Variables**. Add a `CUSTOM_AUTH_SITE_URL`
environment variable pointing to the custom domain you configured for the
deployment. For example, if your custom HTTP Actions domain is
`convex.example.com` then you'd set `CUSTOM_AUTH_SITE_URL` to
`https://convex.example.com` (no trailing slash).

<Callout type="warning">
Make sure to update your OAuth provider config for your production deployment
with your new callback URL. Otherwise it will refuse to redirect users to your
application.
</Callout>
9 changes: 9 additions & 0 deletions docs/pages/config/oauth/google.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,15 @@ https://fast-horse-123.convex.site/api/auth/callback/google

Click **CREATE**.

<Callout type="info">
If you follow the steps above exactly, Google will render the text
`fast-horse-123.convex.site` in their OAuth consent screen. If you're signed
up for a Convex Pro account, you can configure Convex Auth in your production
deployment to show a [custom
domain](../../advanced#custom-callback-and-sign-in-urls) in that screen
instead.
</Callout>

### Set Convex environment variables for Google OAuth

Reopen the client configuration.
Expand Down
2 changes: 1 addition & 1 deletion src/server/implementation/signIn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ async function handleOAuthProvider(
};
}
const redirect = new URL(
requireEnv("CONVEX_SITE_URL") + `/api/auth/signin/${provider.id}`,
(process.env.CUSTOM_AUTH_SITE_URL ?? requireEnv("CONVEX_SITE_URL")) + `/api/auth/signin/${provider.id}`,
);
const verifier = await callVerifier(ctx);
redirect.searchParams.set("code", verifier);
Expand Down
2 changes: 1 addition & 1 deletion src/server/oauth/convexAuth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { OAuthConfig } from "@auth/core/providers/oauth.js";

// ConvexAuth: The logic for the callback URL is different from Auth.js
export function callbackUrl(providerId: string) {
return requireEnv("CONVEX_SITE_URL") + "/api/auth/callback/" + providerId;
return (process.env.CUSTOM_AUTH_SITE_URL ?? requireEnv("CONVEX_SITE_URL")) + "/api/auth/callback/" + providerId;
}

// ConvexAuth: This is a ConvexAuth specific function that produces a string that the
Expand Down

0 comments on commit 754fdbc

Please sign in to comment.