Credential:  
None
  • None
  • Manage Credentials
Launch IDE ↗

Stitch SSO

5.5. Frontend Integration

This section is aimed at helping you integrate the Stitch SSO into your application. As there are a plethora of platforms and frameworks, this section will aim to first cover some of the general principles, before delving into specifics on certain select platforms. It is recommended that you complete SSO Introduction before continuing.

Broadly speaking integration will differ depending on whether your app is browser based or is a mobile application. However, both will require some form of backend (e.g. a webserver or cloud function) and database that can use the authorization code to retrieve and store the token respectively.

Integrating a Web Application

The general flow for integrating a web application is as follows:

  • Create a page that can be used to process the result of the authorization request, and register the URI with Stitch. The URI should ideally be distinct from the main pages as this reduces the danger of users getting stuck in a log-in loop.
  • In your application, create some form of button or link redirects the user to the /connect/authorize end point (using the appropriate query parameters as described in SSO Introduction)
  • After the user has completed the authorization process, they'll be redirected back to your application, specifically to the redirect_uri supplied in the request. The query string will contain the authorization code needed to retrieve the actual token.
  • POST the authorization code to your backend and use the backend to retrieve the access (and optionally refresh) tokens.
  • Store the tokens in an appropriately secured database and use it to query the Stitch API.
Useful Web Libraries
LibraryDescriptionPlatform/Language
salte-auth/salte-auth💻🗝 OAuth 2.0 for the masses!JavaScript
andreassolberg/jsoEasy to use OAuth 2.0 javascript library for use in your javascript applicationJavaScript
zalando-stups/oauth2-client-jsA library to help you handle OAuth2 access and refresh tokensJavaScript

Integrating a Mobile Application

The general flow for integrating a mobile application is as follows

  • Create a post authorization deep link to your application, and register this URI with Stitch.
  • In your application, create some form of button, link, or action that opens a new tab in the user's mobile browser, redirecting them to the /connect/authorize endpoint (using the appropriate query parameters as described in SSO Introduction). Use the deeplink you created as the redirect_uri.
  • After the user has completed the authorization process, they'll be redirected back to your application, specifically to the redirect_uri supplied in the request. The query string will contain the authorization code needed to retrieve the actual token.
  • Retrieve the access (and optionally refresh) tokens using the /connect/token endpoint
  • Store the tokens in an appropriately secured database and use it to query the Stitch API.

Best Practises for Native Mobile Applications

RFC 8252 - OAuth 2.0 for Native Apps goes into more details about best practises when implementing OAuth 2 in native applications. It is a useful read in that it contains operating system specific advice for improving the SSO user experience without sacrificing security.

Useful Mobile Libraries
LibraryDescriptionPlatform/Language
openid/AppAuth-AndroidAndroid client SDK for communicating with OAuth 2.0 and OpenID Connect providers.Android
openid/AppAuth-iOSiOS and macOS SDK for communicating with OAuth 2.0 and OpenID Connect providers.iOS and MacOS
FormidableLabs/react-native-app-authReact native bridge for AppAuth - an SDK for communicating with OAuth2 providersReact Native
xamarin/Xamarin.AuthXamarin.Auth helps developers authenticate users via standard authentication mechanisms (e.g. OAuth 1.0 and 2.0), and store user credentials. It's also straightforward to add support for non-standard authentication schemes.Xamarin (C#)