Stitch SSO
4.7. 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 User Token SSO flow 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 User Token SSO flow) - 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 | ||
---|---|---|
Library | Description | Platform/Language |
salte-auth/salte-auth | 💻🗝 OAuth 2.0 for the masses! | JavaScript |
andreassolberg/jso | Easy to use OAuth 2.0 javascript library for use in your javascript application | JavaScript |
zalando-stups/oauth2-client-js | A library to help you handle OAuth2 access and refresh tokens | JavaScript |
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 User Token SSO flow). Use the deeplink you created as theredirect_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 | ||
---|---|---|
Library | Description | Platform/Language |
openid/AppAuth-Android | Android client SDK for communicating with OAuth 2.0 and OpenID Connect providers. | Android |
openid/AppAuth-iOS | iOS and macOS SDK for communicating with OAuth 2.0 and OpenID Connect providers. | iOS and MacOS |
FormidableLabs/react-native-app-auth | React native bridge for AppAuth - an SDK for communicating with OAuth2 providers | React Native |
xamarin/Xamarin.Auth | Xamarin.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#) |