mongodb-stitch-browser-sdk
Advanced tools
The official MongoDB Stitch Browser SDK for JavaScript/TypeScript.
Run the following in the root directory of your NPM project.
npm install mongodb-stitch-browser-sdk
This will start you off with the core SDK functionality as well as the remote MongoDB service.
See Customized Dependencies (Advanced) below for customizing dependencies.
You can also include the SDK directly in your HTML code using script tags. For core SDK functionality and the remote MongoDB service, use the following:
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch.js"></script>
See Customized Dependencies (Advanced) below for customizing dependencies.
First, you need to create the server-side Stitch app, and (for the purpose of this quick start) enable anonymous authentication:
For detailed instructions, see Create a Stitch App.
Next, you create the source for your client app.
npm installed. See npmjs.com.mkdir StitchProject && cd StitchProject
npm init
npm install mongodb-stitch-browser-sdk
npm install --save-dev webpack webpack-cli
"scripts" field of the package.json file that was generated by npm init:"scripts": {
"pack": "webpack"
}
mkdir src dist
src/index.js and add the following code, replacing <your-client-app-id> with the id you retrieved when setting up the application in MongoDB Stitch:import { Stitch, AnonymousCredential } from 'mongodb-stitch-browser-sdk'
function initializeAndLogin() {
const client = Stitch.initializeDefaultAppClient('<your-client-app-id>');
client.auth.loginWithCredential(new AnonymousCredential()).then(user => {
document.getElementById('auth-status').innerHTML =
`Logged in as anonymous user with id ${user.id}`;
});
}
window.onload = initializeAndLogin;
dist/index.html and add the following code:<!doctype html>
<html>
<head>
<title>MongoDB Stitch Sample</title>
</head>
<body>
<script src="main.js"></script>
<div id="auth-status">Logged Out</div>
</body>
</html>
Finally, you can build and run the app:
npm run pack
dist/index.html in your web browser. If everything was configured correctly, you should see a message in the browser window that you are logged in as an anonymous user.See the Getting Started guide on webpack's website for more information on how to use webpack to bundle your JavaScript or TypeScript code that uses the Stitch SDK.
Additionally, the JavaScript code above utilizes ES6 features. If you'd like your code to run in older browsers, you'll need to use a transpiler like Babel as part of your bundling process. See babel-loader.
When your app or webpage is initialized, use Stitch.initializeDefaultAppClient to initialize the Stitch SDK. Replace <your-client-app-id> with your Stitch application's client app ID:
import { Stitch, AnonymousCredential } from 'mongodb-stitch-browser-sdk'
Stitch.initializeDefaultAppClient('<your-client-app-id>');
Your client app ID can be found in the Stitch UI.
const client = Stitch.defaultAppClient;
console.log("logging in anonymously");
client.auth.loginWithCredential(new AnonymousCredential()).then(user => {
console.log(`logged in anonymously as user ${user.id}`)
});
When running this code, you should see the following in your browser's debug console:
logging in anonymously
logged in anonymously as user 58c5d6ebb9ede022a3d75050
See StitchAuth for more information.
One of Stitch's powerful features is serverless Functions. Once logged in, the Stitch client can execute remote Stitch Functions using the StitchAppClient.callFunction method:
client.callFunction("echoArg", ["Hello world!"]).then(echoedResult => {
console.log(`Echoed result: ${echoedResult}`);
})
Assuming you've configured your Stitch application to have a function named "echoArg" that returns its argument, you should see a message like:
Echoed result: Hello world!
The echoArg Function in Stitch would look something like:
// echoArg Function in the Stitch UI
exports = function(arg) {
return {arg: arg};
};
As a convenience, the SDK includes the bson library. You can import it as you would import other classes and values from the SDK.
Here is an example of importing BSON to generate a BSON ObjectID using ES6:
import { BSON } from 'mongodb-stitch-browser-sdk';
let myObjectId = new BSON.ObjectId();
console.log(`Generated ObjectId: ${myObjectId}`);
And here is an example of importing BSON to generate an ObjectId using an HTML <script> tag import:
<!doctype html>
<html>
<head>
<title>MongoDB Stitch BSON Sample</title>
</head>
<body>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch.js"></script>
<script>
function generateObjectId() {
const newObjectId = new stitch.BSON.ObjectId()
document.getElementById('obj-id-display').innerHTML =
`Generated ObjectId: ${newObjectId}`;
}
window.onload = generateObjectId;
</script>
<div id="obj-id-display">Generated ObjectId: None</div>
</body>
</html>
For customized dependencies in NPM use the following:
npm install mongodb-stitch-browser-core
npm install mongodb-stitch-browser-services-aws
npm install mongodb-stitch-browser-services-http
npm install mongodb-stitch-browser-services-mongodb-remote
npm install mongodb-stitch-browser-services-twilio
For customized dependencies with HTML script tags use the following:
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch-core.js"></script>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch-services-aws.js"></script>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch-services-http.js"></script>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch-services-mongodb-remote.js"></script>
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.8.0/stitch-services-twilio.js"></script>
In the case that you don't want a single default initialized StitchAppClient, you can use the following with as many client app IDs as you'd like to initialize clients for multiple app IDs:
const client = Stitch.initializeAppClient("<your-client-app-id>");
You can use the client returned there or anywhere else in your app by using the following:
const client = Stitch.getAppClient("<your-client-app-id>");
FAQs
MongoDB Stitch JavaScript SDK - Browser SDK
The npm package mongodb-stitch-browser-sdk receives a total of 242 weekly downloads. As such, mongodb-stitch-browser-sdk popularity was classified as not popular.
We found that mongodb-stitch-browser-sdk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.