javier nicolás adan

Posted on Dec 28, 2024 • Edited on Jan 20

Integration of Salesforce, Node.js, and React: A Step-by-Step Guide

#salesforce #jwt #node

In this article, I’ll walk you through how to connect a backend built with Node.js to Salesforce using OAuth 2.0, and then integrate it with a frontend, in this case, React.
This solution is with Connected app in Salesforce, and sf-jwt-token & jsforce packages in the backend.
I’ll explain how to do this on your local machine, and in test environment, using Ngrok.

1. Salesforce Configuration

To enable secure communication between Salesforce and our application, we first need to configure a Connected App at the User Interface (UI) in Salesforce.
So before start coding, we need to configure Salesforce to allow integration with our application.

To do in UI Salesforce:

Create a Connected App:
- Go to Setup → App Manager → Create a Connected App.
- Enable API access by selecting Enable OAuth Settings.
- In Selected OAuth Scopes, choose:
  - Perform request at any time (refresh_token, offline_access)
  - Manage user data via APIs (api)
  - Full access (full).
Set OAuth Policies:
- Inside our new App, navigate to Manage → Edit Policies and set:
  - Permitted Users: Admin approved users are pre-authorized.
- Also we need to assign the profile we want to use in Manage Profiles.
Consumer Key and Secret:
In the API(Enable OAuth Settings) section, click on Manage Consumer Details and save Consumer Key (Consumer_Id) and Consumer Secret (Consumer_Secret). These values will be used later int the .env file fot the backend configuration.

4 Reset Your Security Token:
Reset your security token if needed by navigating to your personal settings in Salesforce. This token will also be added to your environment variables (explained below).

2. Setting Up the Node.js Server

Next, we’ll set up an Express backend and the required tools to interact with Salesforce.

You can use this repo already prepared for that purpose:
Backend Node

Install Dependencies:

npm install express jsforce sf-jwt-token

Note:

Im writing this post december '24, and these might not be the newest tools, but there are two recent nice to know node's features. So i just let you know about them, just in case:

If you're using Node.js v21.7.0 (April 2024) or later: You don’t need dotenv for environment variables anymore, you can use process.loadEnvFile() at the beginning of your aplication instead. After this, you will have your .env like normally in the root of your project with your variables, and now you can call your variables from everywhere in your code with process.env.YOUR_VARIABLE_NAME. Web Developer.
Also, from Node.js V22 (Long-Term Support from October 24), you can use node --watch <your file> instead of nodemon package for automatic restarts of the server. logrocket.

So, two less packages for installing.

Environment Variables:

Create a .env file and define the following:

CONSUMER_ID=your_consumer_id
SF_USERNAME=your_salesforce_username
LOGIN_URL=https://login.salesforce.com OR https://test.salesforce.com

Testing Locally? Use Ngrok

Ngrok is used to expose your local server to the internet, allowing Salesforce to send callbacks to your application during the authentication process (needed mainly in first call):

Install and run ngrok.
Run your server.
Point ngrok to the port your backend is running on, typing ngrok.exe http <you port> in your terminal.
Copy the ngrok-generated URL and set it as the Callback URL in your Salesforce Connected App in the API(Enable OAuth Settings) section.

3. Private Key and Certificate

Generate a private key and certificate with the following terminal command:

$ openssl req  -nodes -new -x509  -keyout private.pem -out server.cert

Upload digital signature to SF

Now the two files are in your project. Time to Enable the option Use digital signatures in your Connected App, and Upload the generated certificate in Setup → Certificates and Key Management.

Now, run the token route in your brower

http://localhost:3000/token

If everything went well, now you will get your access_token.

{
  access_token: '',
  scope: 'api full',
  instance_url: '',
  id: '',
  token_type: 'Bearer'
}

In this solution, I chose to request a new token from Salesforce for every API call. Salesforce may return the same token or issue a new one, as tokens are refreshed periodically.

5. Using JSforce

With the token, you can start interacting with Salesforce from your Node.js server. Here’s a simple example:

const jsforce = require('jsforce');

const conn = new jsforce.Connection({
  instanceUrl: 'https://your-instance.salesforce.com',
  accessToken: 'your_access_token',
});

conn.query('SELECT Id, Name FROM Account', (err, result) => {
  if (err) return console.error(err);
  console.log('Accounts:', result.records);
});

6. Integrating with React

Finally, use React to create a frontend that consumes data from the backend and displays it interactively. For instance, you could build:

A form to create records in Salesforce.
A table to display account data retrieved from the backend.

In my use case, I needed a way in which a company's workers were able to put the commuting data in, and make registers in SF, concrete in Net Zero Cloud, but for this exercise I just created the object needed and build the solution with a demo developer free org.

You can use also this React Frontend form repo for this purpose.

React Frontend.

Conclusion

Integrating Salesforce, Node.js, and React in a easy way, just to play around with tools and make things workings.
I hope this article helps you get started with your own integration solution.

Got questions or ideas to improve this workflow? Drop them in the comments.

DEV Community