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

Рет қаралды 24,754

Күн бұрын

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
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.
Buying stuff through my Amazon link supports the channel! amzn.to/3hK5gd0
Business inquiry? Email thecoopercodes@gmail.com
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!

Пікірлер: 24

@matthewblasco4720 9 ай бұрын

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

@aldusdanielmonteiro3636 Жыл бұрын

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)

@user-dc4qs5vs5z Жыл бұрын

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.

@yazidmohammedbouguedra4523 Жыл бұрын

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...

@user-fd6wx6ns2v Жыл бұрын

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

@artemshumeiko Жыл бұрын

Great video, keep it up!

@atolz1352 Жыл бұрын

Finally a video making sense!! THnak you

@medilies 11 ай бұрын

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

@GDMeira 9 ай бұрын

Really good content

@osmansagsoz9701 Жыл бұрын

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

@zero3281 12 күн бұрын

EPIC.

@rij3142 8 ай бұрын

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

@TodorImreorov 4 ай бұрын

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

@epicgame6426 8 ай бұрын

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

@0xfd-xz6ob 3 ай бұрын

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?