Skip to main content

Integrate the SDK into a React Application

This guide outlines two distinct approaches for integrating the SDK into a React application:

  • Option 1: Starting with the React Starter Kit - Ideal for those who are new to React or want a quick start with a pre-configured setup.
  • Option 2: Integrating into an Existing React 18 Application - Suitable for adding the SDK to an existing project.

Select the path that aligns with your project's needs.


Option 1: Starting with the React Starter Kit

The React Starter Kit provides a convenient starting point for new React projects or for quickly prototyping with a pre-configured setup.

Clone the Repository

git clone https://github.com/eniblock/eniblock-sdk-react-starter.git

Follow the README in the cloned repository for setup and further instructions.

Customize the Auth0 Configuration in the Starter Kit

Prerequisites

Edit the Code

  1. Update src/App.tsx:

    useEffect(() => {
    if (accessToken) {
    const fetchSdk = async () => {
    if (authService.isLoggedIn()) {
    setSdk(new Eniblock({
    appId: 'Your AppID',// Replace with your own Eniblock AppID; "eniblock-demo" is set by default
    accessTokenProvider: (() => Promise.resolve(localStorage.getItem('starter_sdk_react_access_token') ?? '')),
    storage: new UnsafeStorage(),
    }));
    }
    }
  2. Modify src/services/auth-service.ts:

    const OAUTH2_CLIENTID = "Your CLIENTID";
    const OAUTH2_DOMAIN = "Your DOMAIN";

Option 2: Integrating into an Existing React 18 Application

For those with an existing React 18 application, this section guides you through the process of integrating the SDK.

Without CRA (Create React App)

Step 1: Install Dependencies

To integrate the Eniblock SDK into your project, you will have to customize the Webpack configuration to add some polyfills.

Here are the requirements to use the Eniblock SDK when you don't use the tool Create React App:

npm i --save-dev [email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @types/crypto-js
npm i @eniblock/sdk buffer crypto-browserify stream-browserify node-polyfill-webpack-plugin core-js crypto-js

Step 2: Update webpack.config.js

const path = require('path')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const https = require("https");
module.exports = {
...,
plugins: [
new NodePolyfillPlugin(),
],
resolve: {
extensions: ['.ts', '.js', 'tsx', 'jsx'],
modules: ['src', 'node_modules'],
fallback: {
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
buffer: require.resolve('buffer'),
},
...
},
module: {
rules: [
{
...,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": "defaults"
}],
'@babel/preset-react'
]
}
}
]
}
]
}
}

Step 3: Check .babelrc

Ensure the .babelrc file in the root directory contains the correct presets.

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

With CRA

For projects created with Create React App:

Step 1: Create config-override.js

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = function override(config) {
config.plugins.push(
new NodePolyfillPlugin(),
);
config.resolve = {
extensions: ['.ts', '.js', '.jsx', '.tsx'],
modules: ['src', 'node_modules'],
fallback: {
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
buffer: require.resolve('buffer'),
},
};
return config;
};

Step 2: Update package.json

Add a script to launch the project with npm run start.

"start":"react-scripts-ts start"

Final Step: Access Token-Based Setup

Complete the SDK setup with access tokens: Access Token-Based Setup.