Authentication

Build a Next.js app that authenticates users, launches the Connector, and fetches financial data. Learn session token management and avoid rate limit errors.

Time: ~15 minutes Framework: Next.js (concepts apply to any framework)

Link to this section#What You'll Build

A Next.js app that:

1. Issues Session tokens server-side (protects your API key)
2. Caches tokens client-side (avoids rate limits)
3. Launches the Connector (lets users connect banks)
4. Fetches Profile data via GraphQL

Link to this section#Session Tokens Explained

Session tokens authenticate users for the Connector and GraphQL API:

• User-specific: Each token is scoped to one Profile
• 24-hour lifespan: Automatically expire
• Client-safe: Can be used in browser code
• Rate limited: 10/hour, 20/day per Profile

We'll use QuilttAuthProvider from @quiltt/react to handle token management automatically.

Link to this section#Prerequisites

• Quiltt Dashboard account
• Node.js 18+ installed
• Package manager (pnpm, yarn, or npm)

This tutorial uses pnpm but commands work with any package manager.

Link to this section#1. Project Setup

Create a Next.js project and install dependencies:

Add your credentials from the Dashboard:

Start the dev server:

Link to this section#2. Issue Session Tokens

Create a server-side endpoint to issue tokens (this protects your API key from client-side exposure):

Link to this section#3. Set Up Authentication Provider

Fetch tokens and pass to QuilttAuthProvider. This handles session management, Connector auth, and GraphQL client setup.

Link to this section#4. Add Provider to Layout

Wire up the Providers component:

Link to this section#5. Launch the Connector

Add a button that launches the Connector (automatically authenticated):

Visit http://localhost:3000 and click "Launch Connector":

Link to this section#6. Fetch Profile Data

Use useQuilttClient for GraphQL queries:

Add the Welcome component to your page:

Refresh the page to see the greeting:

Link to this section#Next Steps

Continue Learning:

• Multi-Aggregator Connectors Tutorial - Build a full connection flow with multiple providers
• GraphQL Tooling Tutorial - Set up type-safe GraphQL with code generation

Reference Documentation:

• Session token best practices - Caching and revocation strategies
• Authentication overview - Complete authentication guide
• GraphQL API reference - Available queries and mutations
• Connector SDK docs - Event handlers and customization