---
layout: tutorial
title: Sign in with your product
description: Build an end-to-end "Sign in with your product" experience against your Appwrite OAuth2 server, from the consent screen to the token exchange.
step: 1
difficulty: intermediate
readtime: 25
framework: TanStack Start
category: OAuth2 server
back: /docs/products/auth/oauth-server
---

Once your project's [OAuth2 server](/docs/products/auth/oauth-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](https://tanstack.com/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](https://nodejs.org/) 20 or newer and a package manager (this tutorial uses `pnpm`).
- Basic familiarity with React.

**Get the finished code**

The complete apps from this tutorial are on GitHub at [appwrite-community/oauth-guide-taskflow](https://github.com/appwrite-community/oauth-guide-taskflow). Clone it to follow along or to compare against your own.

Continue to enable the OAuth2 server on your project.