The official MongoDB Stitch React Native SDK for JavaScript/TypeScript.
Run the following in the root directory of your NPM project.
npm install mongodb-stitch-react-native-sdk
This will start you off with the core SDK functionality as well as the remote MongoDB service.
For customized dependencies use the following:
npm install mongodb-stitch-react-native-core
npm install mongodb-stitch-react-native-services-aws
npm install mongodb-stitch-react-native-services-http
npm install mongodb-stitch-react-native-services-mongodb-remote
npm install mongodb-stitch-react-native-services-twilio
npm
installed. See npmjs.com.npm install mongodb-stitch-react-native-sdk
.npm install
again to ensure that the SDK's dependencies are properly fetched.App.js
, replace the existing code with the following, replacing <your-client-app-id>
with the id you retrieved when setting up the application in MongoDB Stitch:import React from 'react'
import { Button, StyleSheet, Text, View } from 'react-native';
import { Stitch, AnonymousCredential } from 'mongodb-stitch-react-native-sdk';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state={
currentUserId: undefined,
client: undefined
};
this._loadClient = this._loadClient.bind(this);
this._onPressLogin = this._onPressLogin.bind(this);
this._onPressLogout = this._onPressLogout.bind(this);
}
componentDidMount() {
this._loadClient();
}
render() {
let loginStatus = "Currently logged out."
if(this.state.currentUserId) {
loginStatus = `Currently logged in as ${this.state.currentUserId}!`
}
loginButton = <Button
onPress={this._onPressLogin}
title="Login"/>
logoutButton = <Button
onPress={this._onPressLogout}
title="Logout"/>
return (
<View style={styles.container}>
<Text> {loginStatus} </Text>
{this.state.currentUserId !== undefined ? logoutButton : loginButton}
</View>
);
}
_loadClient() {
Stitch.initializeDefaultAppClient('<your-client-app-id>').then(client => {
this.setState({ client });
if(client.auth.isLoggedIn) {
this.setState({ currentUserId: client.auth.user.id })
}
});
}
_onPressLogin() {
this.state.client.auth.loginWithCredential(new AnonymousCredential()).then(user => {
console.log(`Successfully logged in as user ${user.id}`);
this.setState({ currentUserId: user.id })
}).catch(err => {
console.log(`Failed to log in anonymously: ${err}`);
this.setState({ currentUserId: undefined })
});
}
_onPressLogout() {
this.state.client.auth.logout().then(user => {
console.log(`Successfully logged out`);
this.setState({ currentUserId: undefined })
}).catch(err => {
console.log(`Failed to log out: ${err}`);
this.setState({ currentUserId: undefined })
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
npm start
and following the instructions in the terminal.<your-client-app-id>
with your Stitch application's client app ID:import { Stitch, AnonymousCredential } from 'mongodb-stitch-react-native-sdk';
Stitch.initializeDefaultAppClient('<your-client-app-id>').then(client => {
// use the client
});
Please take note that unlike the other Stitch SDKs, this client initialization method is asynchronous. This is due to the fact that the client stores persisted authentication information using React Native's AsyncStorage system.
Stitch.defaultAppClient
const stitchClient = Stitch.defaultAppClient;
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}`)
});
logging in anonymously
logged in anonymously as user 58c5d6ebb9ede022a3d75050
StitchAppClient
's callFunction()
methodclient.callFunction("echoArg", ["Hello world!"]).then(echoedResult => {
console.log(`Echoed result: ${echoedResult}`);
})
Echoed result: Hello world!
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:
Stitch.initializeAppClient("<your-client-app-id>").then(client => {
// use the client
});
You can use the client here or anywhere else in your app by using the following:
const client = Stitch.getAppClient("<your-client-app-id>");
The client maintains some background processes in the event loop that must be
shutdown when the client is no longer needed. Simply call close
on the client
when you are done with the client:
client.close();
Generated using TypeDoc