Stytch Example Apps

Stytch provides SDKs for a number of different languages, frameworks, and implementation approaches. This monorepo contains simple example apps that demonstrate our various frontend and backend SDKs.

Quick Start

This repo contains examples in different languages and with varying implementation methods (for instance, using Stytch-provided prebuilt UI vs. using a component library like radix-ui ). The first step is to figure out which directory in this repository best matches your situation. More detail about each example can be found further down in this README.

When starting from scratch or to build a proof of concept app we recommend trying one of these implementations:

B2B Applications:

• React B2B Prebuilt: Minimal setup with Stytch's hosted UI. See the React B2B Prebuilt README for complete setup instructions.
• Go B2B Backend: Full-stack example with backend integration. See the Go B2B Backend README for complete setup instructions.

Consumer Applications:

• React Consumer Prebuilt: Minimal setup with Stytch's hosted UI. See the React Consumer Prebuilt README for complete setup instructions.
• Go Consumer Backend: Full-stack example with backend integration. See the Go Consumer Backend README for complete setup instructions.

Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• nvm (Node Version Manager)

Stytch Dashboard Setup

Before running any example apps, you'll need to configure your Stytch project:

1. Enable the Frontend SDK: Go to your Stytch Dashboard → Frontend SDK page → enable the Frontend SDK

2. Get your credentials: On the Project Overview page, you'll find:

   • Project ID - Used by backend applications
   • Public Token - Used by frontend applications
   • Secret - Used by backend applications for server-side operations

💡 Tip: The Project Overview page shows all the credentials you need for each app type. Frontend apps typically need the Public Token, while backend apps need the Project ID and Secret.

Installation

1. Clone the repository:

   git clone git@github.com:stytchauth/stytch-all-examples.git
   cd stytch-all-examples

2. Switch to the correct Node.js version:

   nvm use

3. Install dependencies:

   yarn install

Implementation Types

Before exploring the repository, it's helpful to understand the different types of implementations:

• Headless: You build your own UI from scratch using Stytch Headless SDK methods - full control over styling and user experience
• Prebuilt: Uses Stytch's pre-built UI components with minimal setup - faster to implement but less customization
• Backend: Server-side authentication handling with custom UI - demonstrates API integration patterns

Repository Structure

This monorepo contains example applications organized by framework, implementation type, and Stytch data model (B2B vs Consumer). To run a specific example app:

1. Navigate to the specific package you want to build

2. Follow the instructions in that package's README for setup and running instructions specific to that implementation.

stytch-all-examples/
├── frontend/
│   ├── nextjs/
│   │   ├── headless/
│   │   │   ├── b2b/           # Next.js headless B2B implementation
│   │   │   └── consumer/      # Next.js headless Consumer implementation
│   │   └── prebuilt/
│   │       ├── b2b/           # Next.js prebuilt B2B implementation
│   │       └── consumer/      # Next.js prebuilt Consumer implementation
│   ├── react/
│   │   ├── headless/
│   │   │   ├── b2b/           # React headless B2B implementation
│   │   │   └── consumer/      # React headless Consumer implementation
│   │   └── prebuilt/
│   │       ├── b2b/           # React prebuilt B2B implementation
│   │       └── consumer/      # React prebuilt Consumer implementation
│   └── vanillajs/
│       ├── headless/
│       │   ├── b2b/           # Vanilla JS headless B2B implementation
│       │   └── consumer/      # Vanilla JS headless Consumer implementation
│       └── prebuilt/
│           ├── b2b/           # Vanilla JS prebuilt B2B implementation
│           └── consumer/      # Vanilla JS prebuilt Consumer implementation
├── backend/
│   ├── golang/
│   │   ├── b2b/               # Go B2B server implementation
│   │   └── consumer/          # Go Consumer server implementation
│   └── ui/
│       ├── b2b/               # Shared React UI for B2B backend examples
│       └── consumer/          # Shared React UI for Consumer backend examples
└── internal/                  # Shared components and utilities

Quick Links

Frontend Apps:

B2B Apps:

• React B2B Headless | React B2B Prebuilt
• Next.js B2B Headless | Next.js B2B Prebuilt
• Vanilla JS B2B Headless | Vanilla JS B2B Prebuilt

Consumer Apps:

• React Consumer Headless | React Consumer Prebuilt
• Next.js Consumer Headless | Next.js Consumer Prebuilt
• Vanilla JS Consumer Headless | Vanilla JS Consumer Prebuilt

Backend Apps:

• Go B2B Backend | Go Consumer Backend
• B2B UI | Consumer UI

Features Demonstrated

All implementations demonstrate the following Stytch SDK capabilities:

• Magic Link Authentication: Email-based passwordless authentication
• Google OAuth Login: One-click authentication with Google (opt-in)
• Session Management: View session tokens, JWT handling, and logout functionality
• Organization Management (B2B only): Create, list, and switch between organizations

Support

For questions about Stytch SDKs, visit our documentation or community forum.