Login with GitHub and Microsoft in reactjs

https://medium.com/@rocksinghajay

Here, is my previous article on Login with Facebook and Google in reactjs, How to setup redux and react router v4 in your react app

If you don’t know how to setup react app, see my article on Setting up a React.js project with simple steps.

I am using create-react-app for every new react project. And it’s very easy and good.

You can also clone the react-app repository from my GitHub account directly and then start coding. And I recommend you clone the repository. After cloned the repository. Your project folder structure will look like this below:-

Project Directory

After cloned the repository into your computer then install some dependencies which is used in your project.

After installing all these dependencies, edit the App.src component which is in the src folder of your react project to see the code below and edit it.

You can see the code above where CLIENT ID and REDIRECTURI are not created yet. Now, the next step is to create client id and redirectUri of GitHub and Microsoft. First, we will create GitHub client id and redirectUri then create Microsoft client id redirectUri.

GITHUB

Step 1: Go create a Github application, give redirect URL as your domain.

Github will provide you client ID and client secret, configure the unique client ID in App.js component.

Now, you have client id of GitHub application paste the unique client id in the App.js and add redirecturi as your website domain name. for example:- http://localhost:3000

Let’s move to the next part where we will create client id and redirecturi of Microsoft.

MICROSOFT

Step 1: Click here to launch the Microsoft development dashboard and create an application.

To create an application click on add an app button

Step 2: After adding an app then enter your application name and click on create button

Step 3: Microsoft will provide your Client ID, configure in App.js component where Client ID is empty yet and redirecturi as your website domain name. for example- http://localhost:3000

Step 4: Add Platform for web

Step 5: Configure redirect URL in the following way. And then Click on save.

After doing all these steps successfully you done all of the steps for creating the login with GitHub and Microsoft in reactjs.

And start your react app and see the output below like this :

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about react.js, stay connected with me.