If you're interested in integrating Outseta with a React application, you've come to the right place. This process can be a bit tricky because of Client Side Rendering (CSR).
This tutorial will focus on integrating Outseta's sign up, login, and profile embeds with React. We'll also demonstrate how Outseta's no-code script can be used to setup protected content.
Integration basics
The outseta.min.js script is the entry point to integrating Outseta with your product. It takes its configuration from a globally defined configuration object whose name is passed to the <script> embed as follows:
<script>
var o_options = {
domain: '[your-subdomain].outseta.com',
monitorDom: true
};
</script>
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
For more information on this script, please check out our JavaScript configuration guide. Below you'll find a demo video and links that demonstrate three different approaches that can be used to integrate Outseta with React.
React Integration Demo Video
The video below is a walk-through of the three different integration paths mentioned below. Watch as Benedicte highlights the most important nuances in each approach.
No-code integration
Default integration
While the no-code integration is the fastest way to get started, chances are the reason you are coding a custom application is probably because you want more control than a "no-code" tool gives you. To get more control you can deactivate the no-code script and add code to handle the authentication flow yourself.
This example includes Outseta's sign up, login, and profile embeds but does not include the no-code script, which is used for content protection. The Outseta script in included in the head on load.
https://codesandbox.io/s/
Inject script integration
If you also need control of when the Outseta script is loaded you can load the script on demand. This could be if you want no third party script on initial load of the application. In this example the Outseta script is added after page load with code.
https://codesandbox.io/s/
If you have any questions on integrating Outseta with React, please email our engineering team at support(at)outseta.com.