Fitbit OAuth2.0 redirect_uri and react native

Question

I am running into an issue between react native and the endpoint I have setup for the redirect_uri. For the process flow, currently the user is taken from the app to the browser where the fitbit authorization page appears. So far so good. The user selects the permissions that want to allow and from here the redirect_uri points to an express endpoint that saves the information into a database. After this step I would like to redirect the user back to the react native app to continue, instead it just displays the success message that comes from the endpoint in the mobile browser. How can I redirect the user back to the application once the endpoint has finished processing?

Answer 1

What you're asking about is called deep linking.

To open your native app from a browser:

1. Your native app needs to define a URL scheme that other apps can use to target it.
2. Your browser-based code needs to redirect to a URL using your app's scheme.

And, most likely:

3. Your app needs a listener for the deep-link. If you don't write a listener, your app will open, but there would be no way for you to pass information into the app from your browser-based code.

Here is a crude example, as a starting point. I would encourage you to go read the docs thoroughly, because deep-linking is a lot more complicated than first glance. :)

React Native

First, create the my-excellent-app:// scheme for your app as explained here. If you're using Expo, this becomes even easier.

Then, add the listener as early as possible in the life-cycle. Like most of the documentation on this explains – usually in your top-most component in App.js or index.js.

import { Linking } from 'react-native';
import URL from 'url-parse';

// Make sure to only add this listener once!
// Adding it more than once will trigger the handler more than once. ;)
Linking.addEventListener('url', ({ url }) => {
  const deeplink = URL(url, true);
  console.log(deeplink.query);
});

Web-stuff

I'm not sure exactly what tech stack you're using, but the concept is simple enough: do whatever you need to do on the server, and then redirect the browser back to your app's custom scheme.

In Express, that would be something like:

res.redirect('my-excellent-app://myCustomLink?other=data&using=UrlParamsGoesHere');

Lastly, there are third parties like Branch that also handle quite a lot of this, and more.