GitHub Login With React (GitHub APIs, GitHub OAuth 2.0 Authentication)

In this video we go over how to create a full GitHub OAuth 2.0 authentication system, fit with a React frontend, custom proxy server, and the ability to interact with the GitHub API by grabbing user data. This video is a great start for anyone who is interested in adding GitHub integrations to their React project, or wants to make GitHub one of their main ways of authentication. GitHub has a super powerful API, so this video should help you get started when it comes to interacting with the initial authentication.


0:00 Intro / project showcase
0:57 System diagram
2:50 Initialize GitHub OAuth 2.0 Application
4:21 Create React app / remove strict mode
6:00 Creating initial login logic
9:00 Process code parameter from URL
11:00 Create proxy server / call GitHub APIs
22:30 Create access token logic for frontend
27:11 Get user data with access token
33:51 Final project / thanks for watching!

[matthewblasco]

OMG! The way everything was explained was legit awesome! it was all digestible, I only have 1 or two rewind and everything was smooth thank you so much

[yazidmohammedbouguedra]

One thing to mention here is that the whole point of a proxy is to not store the Github token on the client side, ideally they'd be stored in the server.

Client requests the server using a user ID -> server requests GH API using the token of that user -> returns the response

If we're storing the GH token on the client side, we might as well call the GH API directly...

[aldusdanielmonteiro]

This video is amazing! I don't know how it has that little of views really useful. The only thing I didn't get it is that if we need to save specific data of our app and link that to an user how we associate GitHub profile with a user in our platform (let's say a game and I want to have player stats) (sorry for any English mistakes and feel free to correct them)

[dcqsvsz]

Really a great video. It helped me a lot.

Would like to mention that if we try to fetch the access token directly from the client, the response would be opaque, which means client won't be able to access the body or access token. You will see accessToken in network tab but won't be able to access it in code. So I think server would be necessary here.

[medilies]

Im a Laravel dev. But this is still useful to me

[atolz]

Finally a video making sense!! THnak you

[rij]

Getting a 'bad credentials' message when trying to store userData or try to acess userData, any suggestions?

[fdwxnsv]

OMG!!!! You saved me... Thanks for this amazing video!!!

[xfd-xzob]

Thank you for the video. I have an error message that says "Cookie must be enabled to use Github" But my browser is not blocking any third-party cookie. Any idea on how to fix this?

[TodorImreorov]

I am assuming this can be done without an express server and hosted as a gh-page?

[epicgame]

i write the same code but it is not work. it is failed to fetch

[osmansagsoz]

Thank you so much! Again an amazing video. I wanna make an app for searching repositories with the search api, is it like this too or do i need to change something? The docs on github are a mess i don't understand anything

[lbniyqr]

Please can we get the source code for this course

[zahidhussain]

I need the same thing with next-auth in next 13. anyone has implemented this?

[nyctophialicnid]

Can you please push the code to Github. :)

[TrueDetectivePikachu]

holup, why removing react strict could be so controversial? Second, why in the world would react render twice? Why the redundancy?

[anasouardini]

I though it would be hard like google's. google's way of doing oauth is stupid compared to github.

[thimerlanmatyakubov]

(in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON wha's that man pls help me