Integrating with Stytch
Stytch is architected to be embedded directly into your application, offering you flexibility and control over your integration and creating a seamless and native experience for users.
There are three different high level approaches to integrating Stytch directly into your application:
- Backend Integration: entirely server-side integration, where your backend calls Stytch's API through our backend SDK
- Headless Frontend Integration: your client invokes Stytch's headless frontend SDKs, which handles things like client-side session management out of the box, while providing flexibility in UX and UI
- Pre-built UI Frontend Integration: your client mounts the Stytch UI component on relevant routes, and the Stytch SDK handles the full login flow automatically
While we describe these as distinct integration options, most customers mix-and-match approaches to fit their needs. If you are using our pre-built UI for login, you might still leverage the headless methods for post-login changes (e.g. updating profile information) and if you are using our frontend SDKs, it is important to still do server-side session authentication checks with our backend SDKs for security reasons.
Integration methods
Choosing an integration approach
Stytch's frontend SDKs are built on top of our backend SDKs, and you can always change integration approaches in the future without any disruption to your application.
If you want to offload as much as possible to Stytch to start, we recommend using our frontend SDKs with pre-built UI components. If you want maximum flexibility and control, a backend-only integration might be a better fit.
If you're still undecided about which approach will best fit your use case and needs, see below for a detailed comparison of the differences between these integration approaches:
| Frontend (pre-built UI) | Frontend (headless) | Backend | |
|---|---|---|---|
| Development | Client-side and server-side | Client-side and server-side | Server-side only |
| Customization | Customize UI styling; leverage callbacks for custom logic following successful auth flow | Customize UI entirely; some ability to add custom logic before/after calling Stytch | Customize UI entirely; complete control over custom logic at any point before/after calling Stytch, including during multi-step auth flows |
| UI | Pre-built UI components for login and admin portal | Build your own custom UI | Build your own custom UI |
| Authentication | All user authentication methods available | All user authentication methods available | All user authentication methods available; M2M for server-to-server authentication available |
| Session Managment | Automatic session storage and management | Automatic session storage and management | Manual control over session storage and management |
| Authorization | Built-in RBAC protections for Stytch methods; Helpers for viewing and checking the logged-in user's permissions (custom and Stytch defined) for easy conditional rendering of UI | Built-in RBAC protections for Stytch methods; Helpers for viewing and checking the logged-in user's permissions (custom and Stytch defined) for easy conditional rendering of UI | Ability to optionally use Stytch's RBAC for both Stytch permissions and custom permissions |
| Member and organization management | Pre-built UI components for member and organization management, and SSO/SCIM setup; RBAC-gated and conditionally rendered | RBAC-gated methods for most member and organization management actions | Server side methods available for all management actions; optional to use Stytch RBAC for authorization checks |
| Fraud | Built-in Device Fingerprinting Protected Auth (DFPPA) features | Built-in Device Fingerprinting Protected Auth (DFPPA) features | Device Fingerprinting API; full control of when/where to fingerprint and how to action on response |
Relevant Resources
Frontend
- Frontend JS SDKs (headless and pre-built UI)
- Mobile SDKs (headless)
Check out the React or Next.js quickstarts to test out a frontend integration approach!
Read the guide for implementing pre-built UI components and for using our frontend SDK headlessly for more in-depth implementation details and considerations.
Backend
Check out the Node, Python, or Go quickstarts to test out a backend integration approach!
Read the backend implementation guide for more in-depth implementation details and considerations.
Still unsure what to choose?
If you have additional questions about our different integration options, please feel free to reach out to us in our community Slack, our developer forum, or at support@stytch.com for further guidance.