OAuth 2.0

Quick Start Options

Choose the path that best fits your needs:

Starting a New Application

Recommended: Use the Fanvue App Starter Kit

Our starter kit provides:

  • Pre-configured OAuth 2.0 flow with PKCE
  • Secure token management
  • Best practices built-in
  • Next.js template ready to deploy

Simply clone the repository, add your OAuth credentials, and you’re ready to build.

Adding OAuth to an Existing Application

If you’re integrating OAuth into an existing application, follow the implementation steps below. For detailed technical specifications and code examples, see our OAuth 2.0 Implementation Guide.

Implementation Steps

Here’s the high-level flow for implementing OAuth 2.0:

1. Generate PKCE Parameters

Create code_verifier and code_challenge cryptographically.

1import { randomBytes, createHash } from 'crypto';
2
3const codeVerifier = randomBytes(32).toString('base64url');
4const codeChallenge = createHash('sha256')
5 .update(codeVerifier)
6 .digest('base64url');

2. Store Code Verifier

Save code_verifier securely in your session/cookie.

1// Express
2req.session.codeVerifier = codeVerifier;
3
4// Next.js
5cookies().set('code_verifier', codeVerifier, { httpOnly: true, secure: true });

3. Authorization Request

Redirect users to Fanvue with code_challenge and code_challenge_method=S256.

1const authUrl = new URL('https://auth.fanvue.com/oauth2/auth');
2authUrl.searchParams.set('client_id', process.env.CLIENT_ID);
3authUrl.searchParams.set('redirect_uri', process.env.REDIRECT_URI);
4authUrl.searchParams.set('response_type', 'code');
5authUrl.searchParams.set('scope', 'openid offline_access offline read:self');
6authUrl.searchParams.set('state', randomBytes(32).toString('hex'));
7authUrl.searchParams.set('code_challenge', codeChallenge);
8authUrl.searchParams.set('code_challenge_method', 'S256');
9
10res.redirect(authUrl.toString());

User logs in to Fanvue and approves the requested permissions (handled by Fanvue).

5. Authorization Grant

Fanvue redirects back to your app with an authorization code (handled by Fanvue).

6. Token Exchange

Exchange the authorization code for tokens, including the original code_verifier.

1const response = await fetch('https://auth.fanvue.com/oauth2/token', {
2 method: 'POST',
3 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
4 body: new URLSearchParams({
5 grant_type: 'authorization_code',
6 client_id: process.env.CLIENT_ID,
7 client_secret: process.env.CLIENT_SECRET,
8 code: authorizationCode,
9 redirect_uri: process.env.REDIRECT_URI,
10 code_verifier: codeVerifier,
11 }),
12});
13
14const tokens = await response.json();

7. API Access

Use the access token to make authenticated API requests.

1const response = await fetch('https://api.fanvue.com/users/me', {
2 headers: { 'Authorization': `Bearer ${tokens.access_token}` }
3});

8. Token Refresh

Use refresh tokens to get new access tokens when they expire.

1const response = await fetch('https://auth.fanvue.com/oauth2/token', {
2 method: 'POST',
3 headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
4 body: new URLSearchParams({
5 grant_type: 'refresh_token',
6 client_id: process.env.CLIENT_ID,
7 client_secret: process.env.CLIENT_SECRET,
8 refresh_token: tokens.refresh_token,
9 }),
10});

PKCE (Proof Key for Code Exchange) is required for all OAuth 2.0 flows. It’s a security extension that prevents authorization code interception attacks. See the Implementation Guide for detailed PKCE implementation instructions and complete examples.

Next Steps

Ready to Build?

Need Help?