Salesforce Nuxt.js Example

Example project of a Nuxt.js app powered by Salesforce data

This example project demonstrates how to integrate a Nuxt.js app with Salesforce. It currently includes the following features:

• At server startup products are prefetched via the Salesforce REST API. The app retrieves the name, code and description of all active records of the Product2 object and caches them internally to serve the product data from its own API endpoint.
• Salesforce community users (with a profile derived from Customer Community User) can authenticate at the server using their Salesforce credentials. The server sends them on a OAuth2 roundtrip and retrieves the user information from Salesforce once authentication was successful. The user info is stored in the session so that further requests can use it to identify the user calling the API.

Preparing the Salesforce Org

1. In Salesforce Setup open the App Manager and create a New Connected App with the following settings.
   • Connected App Name: {Some name of your choice}
   • API Name: {Some compliant API name of your choice}
   • Contact Email: {your e-mail address}
   • Enable OAuth Settings
   • Callback URL: http://localhost:3000/login/callback
   • Selected OAuth Scopes:
     • Access your basic information (id, profile, email, address, phone)
     • Perform requests on your behalf at any time (refresh_token, offline_access)
   • Require Secret for Web Server Flow
2. After creating the connected app copy the Consumer Key and Consumer Secret for later use.
3. Clone the user profile Customer Community User to create a custom community profile.
4. Grant the custom community profile access to the connected app created before.
5. Create a new customer community (e.g. using the template Build Your Own)
6. In the Administration of the community workspace go to Members and assign the custom community profile to the Selected Profiles.
7. Activate and publish the new community.
8. After creating the community copy its URL from the All Communities page for later use. Important: Copy the displayed URL, not the target of the hyperlink!
9. Create a customer user for one of your contacts and assign the user the custom community profile.
10. Make sure you can log in to the new community with that customer user.
11. Ensure that your Salesforce admin user has a security token. You can reset the token in the user settings area.

Running the Application

1. Install Node.js and Yarn.

2. Open a terminal in the project directory and install the dependencies.

   yarn install

3. Set the username and password (incl. security token) of your Salesforce admin user as environment variables. These credentials are used to connect the server app to your Salesforce org, for example to prefetch product data at startup.

   SALESFORCE_USERNAME={username}
   SALESFORCE_PASSWORD={password}{security token}

4. Set the OAuth2 configuration for the connected app as environment variables. This is required to allow users to log in with their Salesforce credentials and enables the server app to interact with the Salesforce org on behalf of those users.

   SALESFORCE_AUTH_URL={community url}/services/oauth2/authorize
   SALESFORCE_TOKEN_URL={community url}/services/oauth2/token
   SALESFORCE_USER_INFO_URL={community url}/services/oauth2/userinfo
   SALESFORCE_CLIENT_ID={connected app consumer key}
   SALESFORCE_CLIENT_SECRET={connected app consumer secret}

5. Run the application in development mode.

   yarn dev

6. Open the browser on http://localhost:3000

License

MIT