Create a Reusable OAuth React Component with Oauth.io and Bit

Create the component once, share it with Bit, use it anywhere to save time!

Who doesn’t want to focus on creating product over dealing with OAuth logic in the code? Reduce the OAuth footprint in your code to a single request!

In this post, we will create a simple reusable OAuth component in React with OAuth.io, the OAuth market player with over 100 providers! Let’s see how.

Setup OAuth.io User

Register yourself at Oauth.io, it’s free :)

Upon login, you’ll get to the dashboard as shown below.

You can then try any integration, but remenber to setup the Integrated API first! Here’s how.

Add API

Click on Add APIs.

Select Facebook as a provider to the app.

Now, you need client_id and client_secret. So, create a Facebook app to get those credentials.

Go to https://developers.facebook.com to create an app and insert oauth.io as the domain for the app.

Add callback URI as oauth.io/auth

Put the id and secret in the form at OAuth.io.

Hit save, you can also add more APIs. Let’s make use of Facebook API first.

Create a React Component

Next, let’s create a React Component to use Oauth.io SDK. The documentation for oauth.io is located at http://docs.oauth.io

For a quick demonstration, I’ll prepare a small component using create-react-app in VS Code. It will look like this.

Here’s the OAuth component structure.

Make the component reusable with Bit

Bit is cloud-based software composition tool.

It’s a platform that lets you easily share, organize, discover and use components to build multiple applications. A team can create a collection of their shared components, which they can share, update and sync across multiple projects and apps.

Simply put, you can think of Bit as your component “Lego box” to which you can share components from any project, and then find and use them to build more things. Useful, right? there’s much more, but we won’t get into it now.

Bit - Share and build with code components

Why did I put a section about Bit in the OAuth demonstration?

I’m using Bit as part of my component workflow, which I use to make my components reusable and consume them in my different apps. This component also became a part of my collection, as you will now see.

First, login to Bit and create your collection (Scope).

Fill in the required details.

I named it react-o-auth and kept it public.

Now our collection is ready; let’s use Bit to quickly share the component from the repository it’s in (Bit does the “magic”; it automatically isolates the component and shares it to the cloud, without a single code or file change!).

Let’s share the component.

Install Bit

If you don’t have Bit already, install it globally using

npm install -g bit-bin

Initialize Bit for the project

Initialize Bit workspace with:

bit init

This command adds bit.json and .bitmap files so Bit can start tracking and isolating components in the repository when told to do so.

Connect to your collection

Use bit login to login to Bit. The link will open in the browser.

Authentication success is reflected in the terminal as well.

Start to developing

Open facebook.jsx and follow step by step

1. import necessary libraries

import React from "react";
import { OAuth } from "oauthio-web";

1. create FacebookAuth class

export default class FacebookAuth extends React.Component {

}

1. Create a state to store access token

state = {

access\_token: ""

};

1. Initialize OAuth-io SDK withinitialize and receive data from props

componentDidMount() {
   OAuth.initialize(this.props.api\_key);
}

1. Create an OAuth handler method

Auth = () => {
    OAuth.popup("facebook")
      .done(res => {
          this.setState({ access\_token: res.access\_token });
      })
      .fail(err => {
    });
};

1. Render a login button

render() {
   return (
      <button onClick={this.Auth}
       className="btn btn-tw btn-block">
       Sign in with facebook
      </button>
   );
}

1. Lastly, import this component in index.js

import FacebookAuth from "./components/FacebookAuth";

1. Activate the component by placing it somewhere

<FacebookAuth api\_key={"Fcdn9FAU7dhM0TztVA28NM"} />

Add the components to Bit

Now, ask Bit to track all the components you put in src/components directory.

bit add src/components/\*

The result

Run bit status to see the current status of yout Bit instance.

Set a Bit compiler for the workspace (I’ll use react) :

bit import bit.envs/compilers/react --compiler

and you can build your own components.

bit build components/o-auth

Now, declare this as the 1.0.0 version.

bit tag --all 1.0.0

Run bit status again to confirm this version is attached:

Push them to the Bit remote scope:

bit export krissnawat.react-o-auth

That’s it! The component you just exported will now show in your collection.

Any comment-block above the component definition is used as the component description, and if I were to add tests- Bit would run them too.

Now, you can easily Install any of those components in a separate project using npm. Just add the Bit registry to the npm config:

npm config set '@bit:registry' [https://node.bitsrc.io](https://node.bitsrc.io)

Get a Bit component with this command

npm i @bit/krissnawat.react-o-auth.components.o-auth

Wrapping up

That’s it for this tutorial!

We created a reusable React OAuth component that renders a simple Facebook login option using OAuth.io and shared the reusable component with Bit to easily reuse it in other projects.

Hope you had a good time, feel free to comment and ask anything. Show some support by clapping!

Learn more

• 5 Tools for Faster Development in React
• How to Share React UI Components between Projects and Apps
• 11 React UI Component Libraries you Should Know in 2019