We will create an app and link to OAuth2 of Fitbit API which is focusing on iOS.

Thanks to this tutorial for great instructions on using Yahoo API. Many of the project are based on this article.

Different APIs have different limitations, so it would be harmful if you follow the guide above to try to create a Fitbit app. Follow this one if you want to save your time. 

Step 1

Open your terminal and enter the code below

react-native init OauthExample
npm install qs --save

Step 2

Set up your environment:

1.Open ios/your_project_name.xcodeproj file to do the following configuration:

2.Link the Linking library in the project

• Click on your project. Go to Build Settings / Search Paths / Header Search Paths and add a path to the Linking library.
• Here I choose to add $(SRCROOT)/../node_modules/react-native/Libraries and select recursive.

3.Open AppDelegate.m and add the following code after @implementation AppDelegate:

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication
annotation:(id)annotation {
return [RCTLinkingManager
application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation];
}

Also add it on the top

#import "RCTLinkingManager.h"

• More information on Linking.

4.Register your app with a custom URL

• Click on your project. Go to Info / URL Types and add a custom Identifier and URL Scheme for your app.
• Creating a custom URL scheme makes your app directable through typing yoururlscheme:// in the address bar of a browser.
• Identifier makes different apps with the same URL scheme differentiable.

5.Goto Fitbit dev and create an app
– In the Callback Domain field, it has to be the domain of the server or app for redirection after authentication.

Step3

Add a config.js file to the root of directory, which contains:

export default {
client_id: 'YOUR_CLIENT_ID',
client_secret: 'YOUR_CLIENT_SECRET'
}

Then run

npm install
react-native run-ios

Ready to write codes into index.ios.js.

1.Remember to

import {Linking} from 'react-native';
import config from './config.js';
import qs from 'qs';

2.add the below cdoe into index.ios.js before class:

function OAuth(client_id, cb) {

// Listen to redirection
Linking.addEventListener('url', handleUrl);
function handleUrl(event){
console.log(event.url);
Linking.removeEventListener('url', handleUrl);
const [, query_string] = event.url.match(/\#(.*)/);
console.log(query_string);

const query = qs.parse(query_string);
console.log(`query: ${JSON.stringify(query)}`);

cb(query.access_token);
}

// Call OAuth
const oauthurl = 'https://www.fitbit.com/oauth2/authorize?'+
qs.stringify({
client_id,
response_type: 'token',
scope: 'heartrate activity activity profile sleep',
redirect_uri: 'mppy://fit',
expires_in: '31536000',
//state,
});
console.log(oauthurl);
Linking.openURL(oauthurl).catch(err => console.error('Error processing linking', err));
}

//get your API data
function getData(access_token) {
fetch(
'https://api.fitbit.com/1/user/-/activities/heart/date/today/1d.json',
{
method: 'GET',
headers: {
'Authorization': `Bearer ${access_token}`
},
//body: `root=auto&path=${Math.random()}`

}
).then((res) => {
return res.json()
}).then((res) => {
console.log(`res: ${JSON.stringify(res)}`);
}).catch((err) => {
console.error('Error: ', err);
});
}

3.write it into the class before

componentDidMount() {
OAuth(config.client_id, getAPIData);
}

Note

Thanks pyliaorachel for teaching me! Really thank you!