CODEWITHSUNDEEP
reactjsgithuboauth
altern
altern

Reputation: 5949

How to authorize my React app via GitHub OAuth?

I have a button in my app to sign in using GitHub. It opens up a popup with a confirmation about permissions my app is going to get once authorized. When user authorizes my app to use their GitHub profile, GitHub calls a callback URL. And that's when the things get tricky for me.

I have a React app with a route to /login where it sends a request to the nodejs backend part of app to obtain an access_token. It does it successfully closing the callback URL window. But now the problem is with rendering the result of authorization in the React app. How, for example, I replace the log in button with a profile picture. The React app has no way of knowing that the callback URL was called, therefore, there is no way to force the app to update/re-render its elements based on the fact that authorization has happened.

So, how do I make my app display the GitHub profile picture and have the rest of the profile data available in the React app?

Upvotes: 6

Views: 758

Answers (2)

Tem Ab
Tem Ab

Reputation: 21

if you for example using react-github-login library for this, there's always a helper method for such things like:

import React from 'react';
import ReactDOM from 'react-dom';
import GitHubLogin from 'react-github-login';

const onSuccess = response => console.log(response);    
const onFailure = response => console.error(response);

ReactDOM.render(
  <GitHubLogin clientId="ac56fad434a3a3c1561e"
    onSuccess={onSuccess}
    onFailure={onFailure}/>,
  document.getElementById('example')
);

and if you need a link to the github user avatar you can use a public api:

https://api.github.com/search/users?q=gaearon

which will return such response

{
  "total_count": 3,
  "incomplete_results": false,
  "items": [
    {
      "login": "gaearon",
      "id": 810438,
      "node_id": "MDQ6VXNlcjgxMDQzOA==",
      "avatar_url": "https://avatars.githubusercontent.com/u/810438?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/gaearon",
      "html_url": "https://github.com/gaearon",
      "followers_url": "https://api.github.com/users/gaearon/followers",
      "following_url": "https://api.github.com/users/gaearon/following{/other_user}",
      "gists_url": "https://api.github.com/users/gaearon/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/gaearon/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/gaearon/subscriptions",
      "organizations_url": "https://api.github.com/users/gaearon/orgs",
      "repos_url": "https://api.github.com/users/gaearon/repos",
      "events_url": "https://api.github.com/users/gaearon/events{/privacy}",
      "received_events_url": "https://api.github.com/users/gaearon/received_events",
      "type": "User",
      "site_admin": false,
      "score": 1.0
    },
    {
      "login": "gustavowarmling",
      "id": 51421406,
      "node_id": "MDQ6VXNlcjUxNDIxNDA2",
      "avatar_url": "https://avatars.githubusercontent.com/u/51421406?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/gustavowarmling",
      "html_url": "https://github.com/gustavowarmling",
      "followers_url": "https://api.github.com/users/gustavowarmling/followers",
      "following_url": "https://api.github.com/users/gustavowarmling/following{/other_user}",
      "gists_url": "https://api.github.com/users/gustavowarmling/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/gustavowarmling/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/gustavowarmling/subscriptions",
      "organizations_url": "https://api.github.com/users/gustavowarmling/orgs",
      "repos_url": "https://api.github.com/users/gustavowarmling/repos",
      "events_url": "https://api.github.com/users/gustavowarmling/events{/privacy}",
      "received_events_url": "https://api.github.com/users/gustavowarmling/received_events",
      "type": "User",
      "site_admin": false,
      "score": 1.0
    },
    {
      "login": "gaearoney",
      "id": 55377986,
      "node_id": "MDQ6VXNlcjU1Mzc3OTg2",
      "avatar_url": "https://avatars.githubusercontent.com/u/55377986?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/gaearoney",
      "html_url": "https://github.com/gaearoney",
      "followers_url": "https://api.github.com/users/gaearoney/followers",
      "following_url": "https://api.github.com/users/gaearoney/following{/other_user}",
      "gists_url": "https://api.github.com/users/gaearoney/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/gaearoney/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/gaearoney/subscriptions",
      "organizations_url": "https://api.github.com/users/gaearoney/orgs",
      "repos_url": "https://api.github.com/users/gaearoney/repos",
      "events_url": "https://api.github.com/users/gaearoney/events{/privacy}",
      "received_events_url": "https://api.github.com/users/gaearoney/received_events",
      "type": "User",
      "site_admin": false,
      "score": 1.0
    }
  ]
}

Upvotes: 1

altern
altern

Reputation: 5949

I noticed that the component I am using to initiate a popup has an onSucess prop with an argument response that has code in it. With this I now can have all the information I need in the React code.

Upvotes: 1

Related Questions