Sign in with your product_

Once your project's OAuth2 server is enabled, other apps can offer "Sign in with your product". This tutorial builds that experience end to end with two small TanStack Start apps, so you can see every part of the flow.

What you will build

Two apps play the two sides of an OAuth integration:

• TaskFlow, the provider. It owns the Appwrite project with the OAuth2 server enabled, and it hosts the consent screen where its users approve access.
• Vantage, the consumer. A separate product that adds a Sign in with TaskFlow button, exchanges the authorization code for tokens on its server, and reads the user's profile.

TaskFlow is your product. Vantage stands in for any third party integrating with it.

The flow

When a Vantage user clicks Sign in with TaskFlow, this happens:

1. Vantage redirects the user to TaskFlow's authorize endpoint.
2. The OAuth2 server sends the user to TaskFlow's consent screen to sign in and approve.
3. On approval, the server redirects back to Vantage with an authorization code.
4. Vantage's server exchanges the code for tokens using its client secret.
5. Vantage reads the user's profile from userinfo and signs them in.

The authorization code flow is standard OAuth 2.1, so nothing here is Appwrite-specific on the wire. The two pieces you build are the consent screen TaskFlow hosts and the sign-in Vantage adds.

Why the token exchange runs on the server

Vantage is a confidential client: it has a client secret. That secret authenticates the token exchange and must never reach the browser. TanStack Start makes this natural, the exchange runs inside a server function, so the secret stays on the server the whole time.

Prerequisites

• An Appwrite Cloud project.
• Node.js 20 or newer and a package manager (this tutorial uses pnpm).
• Basic familiarity with React.

Continue to enable the OAuth2 server on your project.