Skip to main content
Frontier provides official SDKs to help you integrate authentication, authorization, and billing features into your applications quickly and efficiently.

​
Available SDKs

Frontier offers SDKs for the most popular JavaScript frameworks:

React SDK

Pre-built React components and hooks for authentication, user management, and billing

JavaScript SDK

Core JavaScript client for Node.js and browser environments

​
Features

All Frontier SDKs provide:
  • Authentication - Magic links, OAuth providers, and session management
  • User Management - User profiles, organizations, teams, and permissions
  • Billing & Subscriptions - Plans, subscriptions, payment methods, and usage tracking
  • Authorization - Role-based access control and permission checking
  • Organizations - Multi-tenant organization management
  • TypeScript Support - Full type safety with generated types from Protocol Buffers

​
Package Information

All SDKs are published under the @raystack/frontier package: 
npm install @raystack/frontier

​
Package Exports

The package provides multiple entry points:
Import PathDescription
@raystack/frontierCore JavaScript SDK
@raystack/frontier/reactReact components, hooks, and context
@raystack/frontier/hooksStandalone React Query hooks
@raystack/frontier/adminAdmin UI components

​
Architecture

​
Protocol Buffers & Connect

Frontier SDKs use Connect for type-safe RPC communication:
  • Type Safety - All API types generated from Protocol Buffers
  • Streaming Support - Bidirectional streaming capabilities
  • Browser & Node - Works in both environments
  • React Query Integration - Built-in caching and state management

​
React Query

The React SDK leverages TanStack React Query for:
  • Automatic caching and background refetching
  • Optimistic updates
  • Request deduplication
  • Polling support

​
Quick Start

1

Install the SDK

Install the Frontier SDK package:
npm install @raystack/frontier
2

Choose Your Framework

Select the appropriate SDK for your application:
  • React - Use @raystack/frontier/react for React applications
  • JavaScript - Use @raystack/frontier for vanilla JS or other frameworks
3

Configure Authentication

Set up your Frontier endpoint and authentication redirects:
const config = {
  endpoint: 'https://your-frontier-instance.com',
  redirectLogin: '/login',
  redirectSignup: '/signup'
};
4

Start Building

Use pre-built components or create custom integrations with the SDK APIs.

​
Next Steps

React SDK

Learn how to use React components and hooks

JavaScript SDK

Explore the core JavaScript client

API Reference

View the complete API documentation

Authentication

Set up authentication in your app

​
Support

Need help? Check out these resources:

Build docs developers (and LLMs) love

Get started for freeTalk to us